Home > Chapter Review and Exercises > Chapter 8 - Tables
This straightforward chapter covers the markup for structuring “tabular material” (tables). Because tables are a specialized type of content, it is okay to skip them if you are eager to get started with CSS. You can always come back and add tabular material later.
In Chapter 8, students will learn the following:
• That table markup should be used for tabular material (content arranged into rows and columns).
• Elements for basic table structure (table, tr, th, td).
• The role of table headers.
• How to span cells with colspan and rowspan attributes.
• Table accessibility features such as the caption element and the scope attribute for th elements.
• Adding a semantic layer to rows with the row group elements (thead, tbody, and tfoot).
• Adding a semantic layer to columns with the column group elements (colgroup and col).
tabular material
Data arranged into rows and columns (tables)
table headers
Cells that provide important information or context about the cells in the row or column they precede (th)
table data cells
Cells that contain the main content of the table (td)
spanning
Stretching a cell to cover several rows or columns, allowing more complex table structures
8-1: Making a simple table
This exercise asks students to write the HTML source for a simple table with two columns and six rows.
8-2: Column spans
This provides a chance to try the colspan attribute to span columns
8-3: Row spans
This time rowspan is used to span rows.
8-4: The table challenge
Students can put all of the previous table lessons together to recreate a complex table structure shown in the figure.
The table header element is < th >
The HTML table caption element < caption > specifies the caption (or title) of a table, and if used is always the first child of a < table >
The Inline CSS style used to specify table width is table { style="width:300px;" }
The CSS style used to specify the table border's width, style, and color is table { border: width style color; }
To make a table element span multiple columns is colspan="x"
To make a table element span multiple rows is rowspan="x"