HTML and CSS Reference
In-Depth Information
Figure 11.1
A table of topics that includes multiple columns and rows
Table Header
To designate a heading for a column or row of cells, the table header element,
<th>
, should
be used. The
<th>
element works just like the
<td>
element in that it creates a cell for
data. The value to using the
<th>
element over the
<td>
element is that the table header
element provides semantic value by signifying that the data within the cell is a heading,
while the
<td>
element only represents a generic piece of data.
The difference between the two elements is similar to the difference between headings
(
<h1>
through
<h6>
elements) and paragraphs (
<p>
elements). While a heading's content
could be placed within a paragraph, it doesn't make sense to do so. Specifically using a
heading adds more semantic value to the content. The same is true for table headers.
Table headers may be used within both columns and rows; the data within a table determ-
ines where the headers are appropriate. The
scope
attribute helps to identify exactly what
content a table header relates to. The
scope
attribute indicates with the values
col
,
row
,
colgroup
, and
rowgroup
whether a table header applies to a row or column. The most
commonly used values are
col
and
row
. The
col
value indicates that every cell within
the column relates directly to that table header, and the
row
value indicates that every cell
within the row relates directly to that table header.
Using the
<th>
element, along with the
scope
attribute, tremendously helps screen read-
ers and assistive technologies make sense of a table. Therefore, they are also beneficial to
those browsing a web page using those technologies.
Additionally, depending on the browser, table headers may receive some default styling,
usually bold and centered (see
Figure 11.2
).
1.
<table>
2.
<tr>
3.
<th scope="col">Item</th>
4.
<th scope="col">Availability</th>
5.
<th scope="col">Qty</th>
Search WWH ::
Custom Search