The following table is produced using the code beneath it.
Column 1 Heading | Column 2 Heading | Column 3 Heading | Column 4 Heading |
---|---|---|---|
Row 1 heading | Text here | Text here | Text here |
Row 2 heading | Text here | Text here | Text here |
Row 3 heading | Text here | Text here | Text here |
Row 4 heading | Text here | Text here | Text here |
Row 5 heading | Text here | Text here | Text here |
<style type="text/css">table { width:75%; border:1px; margin:auto;}
caption {margin-bottom:15px; margin-top:15px; font-weight: bold; caption-side:top;}
th.col {width:20%; text-align:center; vertical-align: center; padding: 6px;}
th.row {text-align:left; vertical-align: center; padding: 4px;}
tr:nth-child(even){background: #EEEEEE;}
tr:nth-child(odd) {background: #FFFFFF;}
</style>
<table summary="Here is where a detailed table summary goes for screen reader usage">
<caption>Table Caption/Title Goes Here (if any)</caption>
<thead>
<tr>
<th class="col" scope="col">Column 1 Heading</th>
<th class="col" scope="col">Column 2 Heading</th>
<th class="col" scope="col">Column 3 Heading</th>
<th class="col" scope="col">Column 4 Heading</th>
</tr>
</thead>
<tbody>
<tr>
<th class="row" scope="row">Row 1 heading</th>
<td>Text here</td>
<td>Text here</td>
<td>Text here</td>
</tr>
<tr>
<th class="row" scope="row">Row 2 heading</th>
<td>Text here</td>
<td>Text here</td>
<td>Text here</td>
</tr>
<tr>
<th class="row" scope="row">Row 3 heading</th>
<td>Text here</td>
<td>Text here</td>
<td>Text here</td>
</tr>
<tr>
<th class="row" scope="row">Row 4 heading</th>
<td>Text here</td>
<td>Text here</td>
<td>Text here</td>
</tr>
<tr>
<th class="row" scope="row">Row 5 heading</th>
<td>Text here</td>
<td>Text here</td>
<td>Text here</td>
</tr>
</tbody>
</table>