Publishing Technical Documents with ePub

Prerelease Version

Tables in ePub

Small, simple tables are no problem for ePub, and can be treated the same as any other HTML content. What can cause issues are tables that are wider or taller than the page size in your Reader. Here are a few tips that may address this issue.

First, you can change the CSS to make the text size in table rows smaller than the rest of the body, increase the width to 100% and just let the Reader cope as best it can. This is basically the do nothing strategy, but it can work well enough since the people who write Reader software are aware of the issue with tables and have worked to address this through software solutions. It may not work for older Readers, but it’s worth considering this approach because it allows you to just focus on the markup since it’s likely that the tech will advance enough that the problem will just go away in the near future.

Second, you can add media queries to change the rendering of your table depending upon the device viewport size. For example, you could have the table appear normally in most cases, but be replaced by a generic graphic with a link to an external file that contains the table markup. If you’ve also marked that as being non-linear in your OPF file (see here), the Reader should go ahead and render your table separate from your main text body and may make it zoomable or do other things to make the content more readable. Executing this strategy can involve javascript and CSS issues that you may not want to bother with, however it should produce a better result for larger tables.

Third, for tables that are very tall but not very wide, you can break the content into a number of smaller <tbody> elements that are all wrapped in a single <table>. This should encourage the Reader to break the table in appropriate places rather than just splitting the table when it hits the bottom of a digital “page” which could happen in the middle of row for some software. If you do this, you will need to define the column widths in the CSS in a fairly strict manner in order to force the columns in different <tbody> elements to line up.

You may consider using images to replace your table content, especially if you had some very nice looking tables in a print version of your content that would not translate very well to ePub with just CSS. However, if you want to support accessibility requirements (and you do), then you should include an HTML version of that content somewhere, even if it is only a link to a separate content file. Also, remember that large image files can greatly increase the file size of your ePub.

The bottom line is that large tables can be a thorny issue when designing ePubs. No single approach is likely to work for every problem, and you will likely need to consider multiple device sizes and specs when building your ePub. The good news is that it is getting better for most Readers.



Table of Contents