Male 18-39 yrs. | Male 40-65 yrs | Female 18-39 yrs | Female 40-65 yrs | |
---|---|---|---|---|
W. Germany | ||||
Bayern | 37.5% | 48.9% | 32.5% | 42.8% |
Hessen | 33.4% | 39.3% | 29.7% | 34.8% |
E. Germany | ||||
Sachsen | 34.8% | 43.6% | 29.5% | 40.7% |
Besides using the 6 scope
attributes the data is split up into multiple sections via tbody
(enclosed between the red borders).
Also notice the additional th
elements being a header for the different sections.
This is the markup I used:
<table summary="Here goes the description of the table's purpose and structure, mainly for non-visual media" frame="box">
<caption>Demographical values about (...whatever) </caption>
<!-- The header section -->
<thead>
<tr>
<td></td>
<!-- The top-level headers for the columns -->
<th scope="col">Male 18-39 <abbr title="Years">yrs.</abbr></th>
<th scope="col">Male 40-65 yrs</th>
<th scope="col">Female 18-39 yrs</th>
<th scope="col">Female 40-65 yrs</th>
</tr>
</thead>
<tbody>
<!-- The West Germany section -->
<tr>
<!-- Header for the following rows -->
<th colspan="5"><abbr title="Western">W.</abbr> Germany</th>
</tr>
<tr>
<td scope="row">Bayern</td>
<td>37.5%</td>
<td>48.9%</td>
<td>32.5%</td>
<td>42.8%</td>
</tr>
<tr>
<td scope="row">Hessen</td>
<td>33.4%</td>
<td>39.3%</td>
<td>29.7%</td>
<td>34.8%</td>
</tr>
</tbody>
<tbody>
<!-- The East Germany section -->
<tr>
<!-- Header for the following row -->
<th colspan="5"><abbr title="Eastern">E.</abbr> Germany</th>
</tr>
<tr>
<td scope="row">Sachsen</td>
<td>34.8%</td>
<td>43.6%</td>
<td>29.5%</td>
<td>40.7%</td>
</tr>
</tbody>
</table>
Previous table example | Next table example | Back to the article