Foundation HTML5 with CSS3

Building Tables

Optional Attributes

In addition to the global attributes, the col element has an additional optional attribute.

 span: a positive integer that defines how many columns are spanned by the col

element. Properties of the col element are shared across all of the columns it

spans.

One more thing...

Did you ever imagine there could be so many unique elements needed to build a semantic, accessible

table? We’ve introduced you to rows, cells, headings, row groups, and column groups. The last two—row

groups and column groups—add great semantic and accessibility value to a table but largely function

behind the scenes. We have one last element to introduce to you that adds semantic value and increases

accessibility in a manner that is apparent to all.

caption

The caption element defines a title for its parent table element. The addition of a caption element can

provide clarity and context to a table that it may otherwise be lacking. The caption element, a part of

HTML since version 3.2, receives a bit of a promotion in HTML5. Previous versions of HTML limited its

content model to inline elements and recommended that authors keep its content relatively short. The

summary attribute of the table element was intended for longer descriptions of a table and its content.

HTML5 changes most of this. For starters, the summary attribute of the table element is no longer with us.

Farewell, dear summary attribute; we hardly used ye. As part of its promotion, the caption element now

accepts flow elements as children and has no implied restriction on the length of its content.

The caption element, if included, must be the first child of a table element and must have both a start

and an end tag. Listing 7-20 shows an example of the caption element in use.

Listing 7-20. A table with a caption

<table>

<caption>

<h2>Power Outfitters Inventory</h2>

<p>Power Outfitters continues to stock only the finest products 

for all your crime-solving needs.</p>

</caption>

<thead>

<tr>

<th scope="col">Product</th>

<th scope="col">Quantity</th>

</tr>

</thead>

<tbody>

<tr>

<th scope="row">Utility Belts</th>

<td>9</td>