Tutorial 6: Working with Tables and Columns

general structure of a web table

<table> <tr> table cells </tr> <tr> table cells </tr> ... </table>

marking tables and table rows

a *table* element contains a collection of table rows marked using the *tr* (table row) element a table contains cells within each row size of a table is defined by - number of table rows - number of cells within rows

creating columns groups (cont.)

columns can be referred using the following *colgroup* element: *<table> <colgroup> columns </colgroup> table rows </table>* where *columns* are the individual columns defined within the group

creating a table caption

market using the *caption* element *<caption>content</caption>* where *content* is the content contained within the caption - listed immediately after the *<table>* tag - only one caption is allowed per web table - inherits the text styles associated with the table

setting the number of columns

size of a column is set using the *column-count* property *column-count: value;* where *value* is the number of columns in the layout - browser extensions are included to ensure cross-browser compatibility

colspan="cols"

where *cols* is the number of columns that the cell occupies

rowspan="rows"

where *rows* is the number of rows that the cell occupies

2 style choices for borders

- separate borders - collapsed borders

spanning cells

- single cell that occupies more than one cell row and/or column - created by adding *rowspan* and/or *colspan* attributes to *td* or *th* elements - spanning starts in the cell with *rowspan* or *colspan* attributes and covers the cells in the right and below the initial cell

levels of precedence in the table styles in decreasing order

- table cells - rows - row groups - columns - column groups - table

adding table borders with CSS

- the CSS *border* property is used to add borders to any part of a web table - borders need not be of the same style

web table

- HTML structure that consists of multiple table rows - each table row contains one or more table cells - effective tool for organizing and classifying web page content - consists of a *table* element

precedence to borders in decreasing order

- borders around individual table cells - borders for table rows - borders for row groups - borders for columns - borders for column groups - borders around the entire table

the collapsed borders model:

- borders from adjacent elements are merged together to form a single border - borders are joined to combine their features - combining adjacent borders with different widths, styles, or colors is complicated

working with width and height

- by default, browsers attempt to fit more content in each column before wrapping the cell text - extra space is divided equally among columns if the width of a table is larger than its individual columns - column widths are set using the *width* property - the height of each row is based on the height of the tallest cell - a uniform row height is defined by applying the height style to table rows within each row group - the *vertical-align* property is used to move the cell text

columns and column groups accept only CSS style properties to modify:

- column borders - background - width - visibility

designing a column layout

- column layout enables display of content side-by-side in a page - layouts that use float elements or flexboxes differ from column layout ---- single element can flow from one column to the next ---- flow of content adjusts to match the page width

creating column groups

- columns are determined implicitly based on the number of cells within the table rows - columns are identified by the *col* element - to identify individual columns, use the *id* and/or *class* attributes

header cells

- contains content placed at the top of a column or beginning of a row - by default, displays text in bold and centers text horizontally - marked using the *th* element

data cells

- contains content within columns or rows - by default, displays text as unformatted text and is aligned to the left within the cell - marked using the *td* element

2 types of table cells supported by web tables

- header cells - data cells

creating row groups

- row groups contain specific table information - allows to create different styles for groups of rows HTML supports 3 row groups: - rows that belong to the table head ---- marked using *thead* element - rows that belong to the table footer ---- marked using *tfoot* element - rows that belong to the table body ---- marked using *tbody* element

adding table borders with CSS (cont.)

- to choose between separate or collapsed borders model apply the following property to the *table* element: *border-collapse: type;* where *type* is either *separate* or *collapse* - the separate borders model sets the spacing between borders using *border-spacing: value;* where *value* is in CSS units of measure

5 rules to reconcile the differences between adjacent borders:

1. if either border has a style of *hidden*, the collapsed border is hidden 2. border style of *none* is overridden by another border style 3. the style of wider border takes priority over the narrower border if either border is hidden 4. double borders have higher precedence followed by solid, dashed, ridge, outset, groove, and inset 5. if borders differ only in color, precedence is given to borders

creating a table caption (cont.)

by default, captions are placed about the tables to specify the location, use the *caption-side* property *caption-side: position;* where *position* is either *top* or *bottom*

creating row groups (cont.)

the general structure of a web table divided into row groups *<table> <thread>table rows</thead> <tfoot>table rows</tfoot> <tbody>table rows</tbody> </table>* only one *thead* and *tfoot* element is allowed per table