Foundation HTML5 with CSS3

(Steven Felgate) #1
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>
Free download pdf