HTML and CSS Reference
In-Depth Information
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>
