Tables
Responsive Tables
Tables must have a caption and scope attributes for the headings. All these are accessible via the source code or the table editor.
| Heading 1 | Heading 2 | Heading 3 | Heading 4 |
|---|---|---|---|
| content | content | content | content |
Sample Responsive Table Code
Areas important for accessibility are bolded
<div class="table-responsive">
<table class="table-condensed">
<caption class="sr-only">
Add a caption to your data table
</caption>
<tr>
<th scope="col">Heading 1</th>
<th scope="col">Heading 2</th>
<th scope="col">Heading 3</th>
<th scope="col">Heading 4</th>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<table class="table-condensed">
<caption class="sr-only">
Add a caption to your data table
</caption>
<tr>
<th scope="col">Heading 1</th>
<th scope="col">Heading 2</th>
<th scope="col">Heading 3</th>
<th scope="col">Heading 4</th>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
Notes
- For more cell padding, remove the class 'table-condensed'.
- Tables are fully editable via Table Properties in OU's editor (right click on a table and select 'Table Properties').
Skip sidebar
End of sidebar