The (X)HTML table specification includes tags and attributes which you can use to ensure that the content of the table is clear when it’s read out to users who can’t see the layout. In the next test.html file these tags are marked with bold.
File test.html
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”https://www.w3.org/1999/xhtml” lang=”en-US”>
<head>
<title>How to use HTML table specification tags and attributes</title>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<link rel=”stylesheet” type=”text/css” href=”test.css” />
</head>
<body>
<table summary=”This table shows Apple Inc. Annual Data for years 2009 through 2012″>
<caption>Yearly Income Statements 2009 – 2012</caption>
<tr>
<th scope=”col”>In Millions of USD (except for per share items)</th>
<th scope=”col”>52 weeks ending 2012-09-29</th>
<th scope=”col”>52 weeks ending 2011-09-24</th>
<th scope=”col”>52 weeks ending 2010-09-25</th>
<th scope=”col”>52 weeks ending 2009-09-26</th>
</tr>
<tr>
<th scope=”row”>Revenue</th>
<td>156,508.00</td>
<td>108,249.00</td>
<td>65,225.00</td>
<td>42,905.00</td>
</tr>
<tr>
<th scope=”row”>Other Revenue, Total</th>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<th scope=”row”>Total Revenue</th>
<td>156,508.00</td>
<td>108,249.00</td>
<td>65,225.00</td>
<td>42,905.00</td>
</tr>
<tr>
<th scope=”row”>Cost of Revenue, Total</th>
<td>87,846.00</td>
<td>64,431.00</td>
<td>39,541.00</td>
<td>25,683.00</td>
</tr>
<tr>
<th scope=”row”>Gross Profit</th>
<td>68,662.00</td>
<td>43,818.00</td>
<td>25,684.00</td>
<td>17,222.00</td>
</tr>
<tr>
<th scope=”row”>Selling/General/Admin. Expenses, Total</th>
<td>10,040.00</td>
<td>7,599.00</td>
<td>5,517.00</td>
<td>4,149.00</td>
</tr>
<tr>
<th scope=”row”>Research & Development</th>
<td>3,381.00</td>
<td>2,429.00</td>
<td>1,782.00</td>
<td>1,333.00</td>
</tr>
<tr>
<th scope=”row”>Total Operating Expense</th>
<td>101,267.00</td>
<td>74,459.00</td>
<td>46,840.00</td>
<td>31,165.00</td>
</tr>
</table>
</body>
</html>
The summary Attribute of the <table> Tag
<table summary=” This table shows Apple Inc. Annual Data for years 2009 through 2012″>
You can use is to explain the context of the table to make sure that users with screen readers understand the purpose of the table. The summary is not visible on-screen for regular browsers, but users with screen readers will read it.
The <caption> Tag
You can use it to add a caption to the table. By default, the browsers display the caption above the table, but you set the position of the caption manually by using the caption-side CSS property.
table {
caption-side: bottom;
}
The caption tag ensures that the text is tied to the table and that it’s recognized as the table’s caption. You can create CSS rules for captions when you want your table captions to display as paragraph text or level three headings in a graphical browser.
The <th> Tag
<th scope=”col”>In Millions of USD (except for per share items)</th>
You can use the tag to specify data that is row or column heading. The scope attribute shows whether a given heading is applied to the column (col) or row (row).