Add tables
Tables need to added carefully to be accessible. W3.org explains table concepts and shows examples.
Add tables
There are three ways to add tables:
- Visual editor – uses the Table option in the toolbar to add columns, rows and styling.
- Text editor – manually add code for the table.
- TablePress plugin – use the plugin to add content to the tables manually or import files to create the table (which can save a lot of time).
Tables imported from a Word docx will not be accessible and can format badly in the PDF and ePub exports.
Visual editor
Add the table using the Table option in Pressbooks to include the correct markup.
Example of a table with the correct mark up for accessibility
| Time | Monday | Tuesday | Wednesday | Thursday | Friday |
|---|---|---|---|---|---|
| 09:00 – 11:00 | Folk dance | Hip Hop | Jazz | Ballet | Ballroom |
| 11:00 – 13:00 | Contemporary | Jazz | Tap dance | Ballroom | Irish dance |
| 14:00 – 16:00 | Ballet | Folk dance | Hip Hop | Folk dance | Bollywood |
Table settings should be:
- Width set to 100% for best display in all formats
- Height – left blank
- A caption
- Header information (th) in both the top row and the first column
- All header cells are marked up as cells with scope attributes (col or row) added. This helps some users to understand the relationship between the header and data cells.
- Do NOT set height px for manually added tables or try to adjust columns widths. If your table has a px height it won’t display well in epub. Remove any pixel height info from the table and all rows so e.g. <td style=”width: 33.3333%; height: 14px;”> change to just <td>
Text editor
You can use the text editor to add or edit the code. Example:
<table class=”grid” style=”width: 100%;”><caption>Dance class days and times</caption>
<tbody>
<tr>
<th scope=”col”>Time</th>
<th scope=”col”>Monday</th>
<th scope=”col”>Tuesday</th>
<th scope=”col”>Wednesday</th>
<th scope=”col”>Thursday</th>
<th scope=”col”>Friday</th>
</tr>
<tr>
<th scope=”row”>09:00 – 11:00</th>
<td>Folk dance</td>
<td>Hip Hop</td>
<td>Jazz</td>
<td>Ballet</td>
<td>Ballroom</td>
</tr>
<tr>
<th scope=”row”>11:00 – 13:00</th>
<td>Contemporary</td>
<td>Jazz</td>
<td>Tap dance</td>
<td>Ballroom</td>
<td>Irish dance</td>
</tr>
<tr>
<th scope=”row”>14:00 – 16:00</th>
<td>Ballet</td>
<td>Folk dance</td>
<td>Hip Hop</td>
<td>Folk dance</td>
<td>Bollywood</td>
</tr>
</tbody>
</table>
Complex tables
w3.org Tables Concepts explains what is needed if you want to include more complex tables.
TablePress
The TablePress plugin allows you to display dynamic tables in your webbook that users can sort, filter, and search within.
Create tables guide explains how to use it. TablePress allows some different styling options and has more help info available in the plugin.
TablePress also allows you to import CSV and other files to create the table.
Tables with many columns
For wide tables created in TablePress that expand beyond the margins in PDF and ePub versions try adding the css class – grid landscape:
-
- Go to the table in TablePress
- Scroll to Table Options
- Type in grid landscape in the Extra CSS Classes field. The “grid landscape” class is used to turn Pressbooks tables 90 degrees on PDFs so that a large table reads better for print, as PDFs don’t offer the same option as the web version to scroll on the table.
