HTML Tables on the Kindle Fire

Thank you for visiting this eBook design tutorial. We now have an eBook design startup—BB eBooks—dedicated to helping independent authors and small presses get their eBooks formatted, converted, and ready for sale at all the major online retailers (e.g. Amazon's Kindle Store, Barnes & Noble's Nook, iBookstore, Smashwords, etc.) Please contact us for a no-obligation quote. For those writers, editors, and publishers looking to go the DIY route for eBook production (you probably are if you visited this page), we offer free online tutorials and apps to help you professionally design your eBook. Please visit our Developers page and let’s work together to improve the overall standards of eBooks. Also, please sign up for the mailing list for promotions, design & marketing tips, plus eBook industry news.

Previous Post: Embedding Audio and Video

Tables are useful for displaying tabulated data in a logical format, and are particularly crucial for data-heavy non-fiction works. They can be used within the content of the eBook, or they may be more suitable to place in the appendix. A long time ago, web design utilized the HTML markup for tables to layout the entire webpage into various sections (e.g. the banner, the sidebar, and the main content). You should never use this approach when designing your eBook for the Kindle Fire. Limit your use of tables to tabular information only.

The original Kindle does not support HTML tables and flattens the information into one long column; however, later versions of the e-ink Kindles (e.g. Kindle DX, Kindle 3, etc.) have marginal support for them. The Kindle Fire allows extensive styling of HTML tables, which you will learn about in CSS, and renders them as well as a web browser. To ensure readability across all Kindle devices, Amazon advises using images for tables rather than HTML markup, particularly for highly complex tables. Nevertheless, you should learn about the basic HTML markup for tabular information to insert simple tables into your eBook.

The HTML Table Model

Proper HTML markup for tabular information is accomplished by encoding your content row by row rather than by columns. This is because the web browser or eBook reading device renders the markup by stacking rows on top of each other to create a table. Within each row there are cells where content can be inserted. For example a table with 3 rows and 3 columns would have 9 cells total, and the HTML markup would specify three rows that each had three cells.

The basic HTML tags for tables are as follows:

• <table>…</table>: wraps around the entire table to indicate that the HTML nested inside is for tabular information
• <tr>…</tr>: markup that indicates a table row, which wraps around the individual cells
• <td>…</td>: markup that wraps around the content of an individual cell
• <th>…</th>: similar to <td>, except used for table header cells

Additionally, there are two attributes for the <td> element you should be aware of if you would like to merge cells (i.e. turning two or more cells in a table into one big cell):

• colspan="x": indicates that the cell should merge across x columns in the row
• rowspan="x": indicates that the cell should merge across x rows in the column

For eBook designers accustomed to building tabular information in programs like Excel, this HTML markup may not be particularly intuitive. Therefore, the HTML table model should be visualized as follows:

HTML Table Model Visualized

You should limit the size of your tables inside eBooks due to the small viewing windows of eReading devices (such as the Kindle for iPhone app). This guide recommends no more than 4 columns inside your table, and no more than approximately 10 rows. Tables that appear across multiple pages on the Kindle do not paginate well and are a general headache for readers. Consider splitting complex tables with lots of information into multiple tables.

HTML Example for a Table

Say you wanted to have a table of some exciting 80s movies in your eBook. The table is similar in structure to the preceding table model example. The top row will include table header cells that indicate the type of data in each column. The subsequent rows will include 3 cells of information (name of the movie, year it was released, and a rating). The last two rows will have one merged cell that spans across two columns and two rows. An example of the HTML markup would be as follows:

<h2>Awesome 80s Movies Table</h2>

<table>

  <tr>

    <th>Movie Name</th>

    <th>Year Released</th>

    <th>Rating</th>

  </tr>

  <tr>

    <td>Hard Rock Zombies</td>

    <td>1985</td>

    <td>7</td>

  </tr>

  <tr>

    <td>The Wizard</td>

    <td>1988</td>

    <td>9</td>

  </tr>

  <tr>

    <td>Spinal Tap</td>

    <td>1984</td>

    <td>11!</td>

  </tr>

  <tr>

    <td colspan="2" rowspan="2">Placeholder for More Movies</td>

    <td>1</td>

  </tr>

  <tr>

    <td>3</td>

  </tr>

</table>

As you can see, reading the HTML markup from top to bottom goes row by row within the table element. You do not have to explicitly clarify how many rows and how many columns are inside the table, because HTML understands the number of columns will be the maximum amount of sequential <td> elements within a row, and the number of rows is the number of <th> and <tr> elements within the <table>…</table> tags. Therefore, you could always add more table rows at a later time.

Without CSS styling of the tables, presentation behavior can be random on the Kindle. The following example of the HTML markup for the table above would appear in the Kindle Fire and e-ink Kindles with some minor CSS styling that you will learn about later:

An Example of a Table Rendered in the Kindle Fire and Older e-ink Kindles

Tip: Indenting your HTML markup with spaces can help you understand where elements are nested; however, it is by no means required. Whether or not you indent your HTML has no effect on how it is rendered by a web browser or eReading device.

Alternative Method of Displaying Tables as Images

Because the HTML markup for tables can be a bit cumbersome, it may be advantageous to just save the table as an image and insert it into the eBook. Simple tables as images, if saved in the GIF format, are rarely large in size. This is also beneficial if you are working on designing an eBook and only have a PDF manuscript.

To save a table as an image, perform the following steps:

1. Open the document with the tabular information
2. Copy the contents of the document to your clipboard (alt+printscreen for Windows and command+control+shift+3 for Mac users)
3. Paste the contents of the clipboard into your favorite photo-editing software
4. Crop and resize as needed
5. Save as a GIF image

Example of Saving a Table in a PDF to an Image

This technique will ensure that the table can be seen as intended by the author across all Kindle devices. However, ensure that you keep the size of the table small and the image dimensions large so that the tabular information is legible.

Next Post: Working with Lists on the Kindle Fire

HTML Tables on the Kindle Fire