Show tables in a reading device

[szalonyptak]

I have used CSS tables to arrange a set of numbers as a matrix of rows and columns after converting a book from pdf to epub. The table was completely messed up in the pdf document.
The tables in the epub book look nice in Sigil and Calibre but they don't render well in my Kindle.

I'd like to know if there is a better strategy to show those tables, though it's obvious that the ebook screen size sets a limitation on the number of columns.

Do you people have any recommendation?

[KevinH]

Have you tried pure a html table?

[hobnail]

HTML tables have worked for me. With a little CSS to add borders, center headings, etc.

[hobnail]

Here is the CSS I use for HTML tables. The last 4, coltwonum (column two, numeric) etc. are for columns where it's decimal numbers, e.g., 2.34, to force right alignment so that the decimal points line up. tr.final is for a row where the values are a sum of the columns.

table {
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    margin-top: 1em;
}

table caption {
    font-weight: bold;
    padding-bottom: 0.5em;
}

td {
    border: 1px solid currentColor;
    empty-cells: show;
    padding: 0.125em;
    text-align: left;
}

tr.final {
   border-top:  2px solid currentColor;
}

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

table.colsthreenum td:nth-child(3) {
    text-align: right;
}

table.colfournum td:nth-child(4) {
    text-align: right;
}

table.colfivenum td:nth-child(5) {
    text-align: right;
}

[szalonyptak]

I have tried this approach:

#table1 {
  width: 60%;
}

#table1 td,th {
  padding-top: 8px;
  text-align: left;
}

#table1 td + td,
#table1 th + th
{
    text-align:right;
}

and looks nice in Calibre and Sigil, first column aligned to the left and all the others to the right, however it is completely ignord by my Kindle.

[KevinH]

Which version of Kindle? Basic Tables work with Kindle 8 azw3 style ebooks. It sounds like you are trying with an older mobi style Kindle device?

How are you converting it to Kindle (mobi 6 format, mobi 8 format, or joint)?

What does Kindle Preview show?

[szalonyptak]

Originally Posted by KevinH

Which version of Kindle? Basic Tables work with Kindle 8 azw3 style ebooks. It sounds like you are trying with an older mobi style Kindle device?

How are you converting it to Kindle (mobi 6 format, mobi 8 format, or joint)?

What does Kindle Preview show?

I'm using a Kindle Paprwhite I purchsed back in February, firmware version 5.12.4.
I converted epub to mobi 6 and also to azw3 with Calibre 4.23.
Preview in Calibre was ok but on the Kindle device the table was misaligned and looked ugly.

[KevinH]

mobi6 is old and does not support tables but mobi8 (azw3) shoukd be fine. Please load your epub (not mobi6 - but actual epub) into the KindlePreview app and tell us what you see?

[szalonyptak]

Originally Posted by KevinH

mobi6 is old and does not support tables but mobi8 (azw3) shoukd be fine. Please load your epub (not mobi6 - but actual epub) into the KindlePreview app and tell us what you see?

Just installed Kindle Previewer.

The epub looks fine on it, exactly as intended.

Now, if I convert it to mobi or azw3, whether using Calibre or an online converter, the tables become disrupted.

[hobnail]

Can you post a sample table and your css? I tried it and it works fine on my Kindle Touch; I created a dual Mobi with Kindlegen, which contains both the old MobiPocket format as well as the AZW (not sure what version of AZW), although the Touch uses the AZW, not the MobiPocket.

[KevinH]

Just convert to mobi8 (azw3) using KindlePreviewer/Kindlegen app itself. It is doing that internally to show you the epub. Then try loading the mobi8/azw3 into your device. Keep calibre out of the conversion process completely for this test. My guess is a calibre’s conversion setting might be influencing the output.

Some online converters just use calibre behind the scenes and not the latest Kindlegen.

[szalonyptak]

@KevinH: you're right, I did as you suggested and 2 out of 3 tables look good on the device, the one that doesn't has 8 columns which I guess is a bit too many for the limitted space available -even if I use my Kindle in landscape mode.

@hobnail: below are my test tables and styles, in case you feel like playing around with them.

TABLES:

Spoiler:

<table id="tabl1" style="fixed">
<tr>
<th>Time</th>
<th>Activity</th>
</tr>
<tr>
<td>07:00 - 07:55</td>
<td>Jogging</td>
</tr>
<tr>
<td>08:00 - 08:05</td>
<td>Take a shower</td>
</tr>
<tr>
<td>08:15 - 09:50</td>
<td>Breakfast</td>
</tr>
<tr>
<td>10:00 - 10:45</td>
<td>Reading a book</td>
</tr>
</table>
<br/><br/>
<table id="tabl2">
<tr>
<td>–271.500</td>
<td>–233.468</td>
<td>–249.608</td>
<td>–95.281</td>
<td>–103.750</td>
<td>–46.946</td>
<td>–55.717</td>
<td>-7.226</td>
</tr>
<tr>
<td>168.229</td>
<td>51.611</td>
<td>–21.544</td>
<td>–230.520</td>
<td>–8.238</td>
<td>–24.495</td>
<td>–52.657</td>
<td>–96.621</td>
</tr>
<tr>
<td>-27.198</td>
<td>–31.236</td>
<td>–32.278</td>
<td>173.389</td>
<td>–51.141</td>
<td>–56.942</td>
<td>4.002</td>
<td>49.143</td>
</tr>
</table>
<br/><br/>
<table id="tabl3" style="fixed">
<tr>
<th>Name</th>
<th>x₁</th>
<th>x₂</th>
<th>x₃</th>
<th>x₄</th>
</tr>
<tr>
<td>Kezutoshi</td>
<td>10.34</td>
<td>0.32</td>
<td>7.63</td>
<td>5.35</td>
</tr>
<tr>
<td>Enzo</td>
<td>9.43</td>
<td>2.97</td>
<td>9.79</td>
<td>11.39</td>
</tr>
<tr>
<td>Pavel</td>
<td>6.23</td>
<td>-1.67</td>
<td>11.06</td>
<td>13.34</td>
</tr>
</table>


STYLES:

#tabl1 {
border-collapse: collapse;
width: 100%;
}

#tabl1 td {
padding: 2px;
text-align: left;
}

#tabl1 th {
padding-top: 10px;
padding-bottom: 10px;
text-align: left;
}

#tabl2 {
border-collapse: collapse;
width: 95%;
}

#tabl2 td {
padding-top: 5px;
padding-bottom: 5px;
text-align: right;
}

#tabl3 {
border-collapse: collapse;
width: 80%;
}

#tabl3 td,th {
padding-top: 8px;
text-align: left;
}

#tabl3 td + td,
#tabl3 th + th
{
text-align:right;
}

tr:nth-child(even) {background-color: #f2f2f2;}