HTML and CSS Reference
In-Depth Information
</caption>
<thead>
<tr>
<th id=”n”> Negative
<th> Characteristic
<th> Positive
<tbody>
<tr>
<td headers=”n r1”> Sad
<th id=”r1”> Mood
<td> Happy
<tr>
<td headers=”n r2”> Failing
<th id=”r2”> Grade
<td> Passing
</table>
Notice how the
<details>
tag is
placed within the
<caption>
tag and,
further, how the
<summary>
tag is
within
<details>
. The content in the
<details>
tag that is not in the
<summary>
tag is considered the
actual details of the table. When ren-
dered by the browser (Figure 18-2),
the caption is immediately followed
by the summary and then the details.
The summary is really intended for
screenreaders and often does not add
anything useful to the visual display. If
that is the case with your design, you
can use CSS to move it offscreen, but
at the same time, keep it accessible to
assistive technology. Here's an example
CSS rule:
FiGure 18-2
summary {
position: absolute;
left: -999px;
}
Through absolute positioning, the
summary
tag selector is moved a good distance (999 pixels) from
the left edge of the screen, effectively hiding it from view while still keeping the content within the
document flow.
The negative absolute positioning method is a better technique than the use of
the
display: none
directive because most screenreaders ignore content that is
explicitly not defined.
