Tables: what is the best way to render them on ebooks?

[1v4n0]

Hello, what do you think is the best way to render tables on epub/azw3 ebooks? I usually turn them into html tables, which works fine on kindle and on one of the apps I use (Moon+), but it doesn't work on Kobo (I'm told) and on Lithium, another app.
I guess turning them into images would make them more cross-compatible, but it would also make the books heavier.

What's your suggestion?

[JSWolf]

Tables do work on Kobo Readers. Create a test ePub with a table and I'll try it on my Kobo with the latest firmware.

[1v4n0]

PM

[Turtle91]

JSWolf can definitely help you out testing for the kobo.

In general, tables should be avoided UNLESS they are small (2-3 columns) and really need to be presented as a table. Too many columns and the data just becomes unreadable on smaller displays.

Your idea of using images is most definitely the most cross-compatible, and image "weight" can be minimized by choosing the correct format (.gif, .png, .jpg). However, you still need to be concerned with too many columns on a small display - it can make the image so small it's unreadable.

[JSWolf]

Is it OK if I post a screen shot (with cellphone camera) of one of the tables? It does work no problem sort of. If the text if made large enough, it won't look good. But at whatever size it is in the photo, it looks good. It's the table from Tav. 4.

Oh and one more thing, I added a text-align: left to the table CSS as it looks better that way then the text trying to full justify.

[1v4n0]

Sure, post it.

[1v4n0]

Wait, "Tav. 3" is actually an image. Tell me about the other ones, like "Tav. 4"

[JSWolf]

Originally Posted by 1v4n0

Wait, "Tav. 3" is actually an image. Tell me about the other ones, like "Tav. 4"

Here is the photo of Tav. 4.



It looks good.

[1v4n0]

Looks good yes, thanks.

[JSWolf]

There is going to be an issue on Kindles as they have wide left/right margins. On the Kobo, I have a rather narrow margin as you can see. And given that the table just fits, it may not fit on a Kindle screen.

For the table you asked me to look at in PM, make the headers muliti-line by adding a hyphen and then make those columns smaller. Do that for every table you can and you'll have a better chance of the table fitting with a larger font size.

One other thing, my Kobo is an H2O and that uses a 6.8" screen.

[DaleDe]

Read Table in our wiki.

Dale

[Tex2002ans]

Originally Posted by 1v4n0

Hello, what do you think is the best way to render tables on epub/azw3 ebooks? I usually turn them into html tables,

Yes, that's your best bet. It will:

• Follow all user preferences
• Be readable by Text-to-Speech
• Copy/Pastable
• Searchable
• [...]

But because of very huge font sizes + skinny devices (cell phones), you should minimize how many columns across your tables are (~5+ columns is about the soft limit, depending on data).

You may have to display your data in a very different way:

1. "Transposing" or "verticalizing" the tables:

Change a wide 3x13 table and flipping it to a tall 13x3.

See example I posted in 2013, where I also went into more detail on HTML tables: "Tables in an EPUB?".

2. Converting from a table into actual text:

For example, this table:

------------------------------
First   |   Last  |  Votes
------------------------------
A1      |   A2    |   A3
B1      |   B2    |   B3
------------------------------

could be converted to text as:

Spoiler:

First: A1
Last: A2
Votes: A3

First: B1
Last: B2
Votes: B3

3. Split into X amount of skinnier tables:

Spoiler:

-------------------
First   |   A1    |
-------------------
Last    |   A2    |
-------------------
Votes   |   A3    |
-------------------

-------------------
First   |   B1    |
-------------------
Last    |   B2    |
-------------------
Votes   |   B3    |
-------------------

Originally Posted by 1v4n0

I guess turning them into images would make them more cross-compatible, but it would also make the books heavier.

Images of tables can't be spoken via Text-to-Speech. And depending on the resolution of your images, they may not age well at all. (With higher DPI/resolution devices, some of those old tables-as-images became ant-sized.)

If you want to read more of the pros/cons of all different methods of displaying tables, there's also the discussion in "How to Control Fonts in SVG Images of Charts and Tables?".

Originally Posted by Turtle91

image "weight" can be minimized by choosing the correct format (.gif, .png, .jpg).

And if you do have to save the table as an image... use PNG (Indexed if you want really small filesize).

Do not use that crappy JPG. :P

[stumped]

i have had library book loans where tables were used and some text got cropped, either at the sides or at the bottom. I think that was independent of the device being used
I know that it was a tables issue as I got into the code and looked
I don't think the device renderers have a solution for stuff that does not fit the screen, except to crop and discard

[hobnail]

I haven't tried this after the last update but on the kobo using nth-child to make a column right aligned doesn't work, for example

td {
    text-align: left;
}

table.twodigits td:nth-child(2) {
    text-align: right;
}

[JSWolf]

Originally Posted by hobnail

I haven't tried this after the last update but on the kobo using nth-child to make a column right aligned doesn't work, for example

td {
    text-align: left;
}

table.twodigits td:nth-child(2) {
    text-align: right;
}

You have to create your eBook such that it works with ADE 2.0.1 or ADE 3.x. I'm not sure what ADE version the RMSDK that Kobo is using is equivalent to. I do wish Kobo would update to the latest version RMSDK.