HTML and CSS Reference
Figure 11.1 A table of topics that includes multiple columns and rows
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 ).
3. <th scope="col">Item</th>
4. <th scope="col">Availability</th>
5. <th scope="col">Qty</th>