8

TABLE MARKUP
 OVERVIEW

• How tables are structured

• Table headers

• Cell spanning (rows and columns)

• Table captions

• Row and column groups

 Tabular Data
HTML table markup is for data arranged into rows and columns.
 HTML Table Structure
Tables are made up of cells arranged into rows.
A simple table
 HTML Table Structure (cont’d.)

How it looks using markup (table, tr, th, and td):

NOTE: Columns are implied by the number of cells in each row (not
created with column elements).
 HTML Table Structure (cont'd)

The same table written in code: Default browser display:

<table>
<tr>
<th>Menu item</th>
<th>Calories</th>
<th>Fat (g)</th>
</tr>
<tr>
<td>Chicken noodle soup</td>
<td>120</td>
<td>2</td>
</tr>
<tr>
<td>Caesar salad</td>
<td>400</td>
<td>26</td>
</tr>
</table>
 The table Element
<table> </table>

• Identifies tabular material

• Contains some number of row (tr) elements

• Optionally, may also have a caption element and row and

column group elements
 Table Row (tr) Element
<tr> </tr>

• tr stands for “table row.”

• The only thing that can go between tr tags is some number

of th (header) and td (data cell) elements.

• There may be no text content in a row that is not contained

within a header or data cell.
 Table Cells
<td> </td>

• td stands for “table data.”

• Cells can contain any type of web content.

• All content in a table must be contained in td tags.

 Table Headers
<th> </th>

• th stands for “table header.”

• Headers provide information about the cells in the row or

column they precede.

• They are key tools for making table content accessible.

Screen readers may read headers aloud before each data
cell, providing context that is missing when you can’t see the
table.

• Headers are often rendered in a bold font by default.

 Table Columns Are Implied
This table would have 2 rows and 3 columns
(because there are 3 cells defined in each row):

<table>
<tr>
<th>Burgers</th>
<td>Organic Grass-fed Beef</td>
<td>Black Bean Veggie</td>
</tr>
<tr>
<th>Fries</th>
<td>Hand-cut Idaho potato</td>
<td>Seasoned sweet potato</td>
</tr>
</table>
 Spanning Cells

Spanning
Stretching a cell to cover several rows or columns

Column span
Stretching a cell to the right over subsequent columns

Row span
Stretching a cell downward over several rows
 Column Spans
Use the colspan attribute to specify the number of columns the cell
should span over:

<table>
<tr>
<th colspan="2">Fat</th>
</tr>
<tr>
<td>Saturated Fat (g)</td>
<td>Unsaturated Fat (g)</td>
</tr>
</table>

Notice that the first tr element only has one cell in it now. Every row
should have the same number of cells or equivalent colspan values.
 Row Spans
The rowspan attribute to specifies the number of rows the cell
spans:

<table>
<tr>
<th rowspan="3">Serving Size</th>
<td>Small (8oz.)</td>
</tr>
<tr>
<td>Medium (16oz.)</td>
</tr>
<tr>
<td>Large (24oz.)</td>
</tr>
</table>

Notice that the td elements that were spanned over are no longer in
the source.
 Table Caption
<caption> </caption>

• Provides a title or description for the table

• Improves table accessibility

• The caption element must appear first in the table element.

• The caption displays above the table by default.

 Table Caption (cont’d)

<table>
<caption>Nutritional Information</caption>
<tr>
<th>Menu item</th>
<th>Calories</th>
<th>Fat (g)</th>
</tr>
…table continues…
</table>
 Row and Column Groups

• For complicated tables, you can create semantic groups of

rows and/or columns that describe the table’s structure.

• Row group and column group elements also provide more

“hooks” for scripting and styling.
 Row Groups
<thead> </thead>
<tbody> </tbody>
<tfoot> </tfoot>

• Provide additional semantic structure

• Row group elements may contain one or more tr elements

(no direct text content).

• Some browsing agents may repeat the header and footer

rows on tables that span multiple pages.
 Row Groups (cont’d)

<table>
…
<thead>
<!-- headers -->
<tr></tr>
<tr></tr>
<tr></tr>
<thead>
<tbody>
<!-- data -->
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
<tfoot>
<!-- footnote -->
<tr></tr> NOTE: this table also utilizes
</tfoot>
</table> row and column spans.
 Column Groups
<colgroup> </colgroup>
<col> </col>

• Allows you to assign id and class names to columns so

they can be accessed by scripts or styles

• colgroup elements go at the start of the table, after the

caption element if there is one.

• colgroup elements contain no content; they only provide an

indication of column structure
 Column Groups (cont’d)

The number of columns in a If you need to access

group is noted with the span individual columns, identify
attribute: them with col elements:

<table> <colgroup></colgroup>
<caption>…</caption> <colgroup>
<colgroup></colgroup> <col class="start">
<colgroup span="2"></colgroup> <col class="end">
<colgroup span="2"></colgroup> </colgroup>
<colgroup>
<!-- rest of table... --> <col class="start">
<col class="end">
</colgroup>