For websites, tables should be used to hold data and NOT used for design layout. Layout should be determined by a Cascading Style Sheet (css) with use of the <div> tag.
Best Practices for using Tables
Simple data tables can easily be read by screen readers if they incorporate the <th> tag and “scope” attribute to identify which cells are row and column headers. More complex tables can incorporate the <caption> and <summary> tags.
Consider the following table:
| Contact Information | |
|---|---|
| Person | Number |
| John Doe | (555) 555-5555 |
It is important to remember that screen reader read tables linearly. This table looks simple but is a little more complex when looking at the html code.
<table border=”1″ cellpadding=”0″ cellspacing=”0″ style=”width: 400px;”>
<thead>
<tr>
<th colspan=”2″ scope=”col”>Contact Information</th>
</tr>
<tr>
<th scope=”col”>Person</th>
<th scope=”col”>Number</th>
</tr>
</thead>
<tbody>
<tr>
<td style=”width:200px”>John Doe</td>
<td style=”width:200px”>(555) 555-5555</td>
</tr>
</tbody>
</table>
The table uses the <th> tags to identify the headers content. Most browsers will render any text in the <th> tag as bold and centred. We can improve this table’s usability by adding a <caption> and <summary>. The <caption> tag is used to give a table a title. The <summary> is only read by screen readers and not displayed visually and they provide brief summaries of complex data and don’t need to be used for every table.
Now we add a caption and summary to our example:
| Person | Contact |
|---|---|
| John Doe | (555) 555-5555 |
The html code:
<table border=”1″ cellpadding=”0″ cellspacing=”0″ style=”width: 500px;” summary=”Table cells are read left to right, top to bottom.”>
<caption>Contact Information</caption>
<thead>
<tr>
<th scope=”col”>Person</th>
<th scope=”col”>Contact</th>
</tr>
</thead>
<tbody>
<tr>
<td style=”width:200px”>John Doe</td>
<td style=”width:200px”>(555) 555-5555</td>
</tr>
</tbody>
</table>
Inserting a Table using Affinity
- Place your cursor where you wish to insert a table.
- The “Table” button from the menu
- Select how many rows and columns you wish to have for your table
- At any point during the table addition of data, you must set table header (e.g. table rows) by placing your cursor within the row you wish to designate as a header, select “Table” from the Affinity menu, then “Row”, then “Table row properties”, and finally selecting “Header” for row type in the “Table row properties” dialog.