Assistance with tables in Sigil

[phossler]

Most of the stuf I do is pretty streight forward, but now I think I have to use a table to keep things arranged.

I did a simple 3x3 test (attached) and css picked up from cssschools.com, but I'm missing something


What I'd like ...

1. entire table centered on page, with maybe 10% margins left and right

2. 3px solid bottom border below header row

3. 1px dotted border between each data row

4. some way to specify the width (by percent??) for each of the columns, 25%, 25%. 50%

/* applies to entire table */
	table
		{ 
		border:3px solid black;
		text-align: left;
		margin-left:10%;
		margin-right:10%;
		margin-top:1em;
		margin-bottom: 0em;
		}

/* applies to just the first = header row */
	th
		{
		font-style:italic;
		bottom-border:1px solid black;
		height:3em;
		vertical-align:center;
		text-align:center;
		padding:5px;
}

/* applies to each row */
	tr
		{
		margin-top:1em;
		margin-bottom: 1em;
		height:2em;
		vertical-align:top;			
		}


/* applies to data cells */
	td
		{
		padding:5px;
		}

So if someone (or someones) can offer a little guidence I'd appreciate it. As always, suggestions are ALWAYS welcome

Thanks

Paul

[RbnJrg]

Originally Posted by phossler

Most of the stuf I do is pretty streight forward, but now I think I have to use a table to keep things arranged.

I did a simple 3x3 test (attached) and css picked up from cssschools.com, but I'm missing something


What I'd like ...

1. entire table centered on page, with maybe 10% margins left and right

2. 3px solid bottom border below header row

3. 1px dotted border between each data row

4. some way to specify the width (by percent??) for each of the columns, 25%, 25%. 50%

...

So if someone (or someones) can offer a little guidence I'd appreciate it. As always, suggestions are ALWAYS welcome

Thanks

Paul

Something like this:

table {
    width: 90%;
    margin-left: 5%;
    text-align: center;
    border: 3px solid black;
    border-collapse: collapse;
}

th {
    font-style: italic;
    height: 3em;
    vertical-align: middle;
    padding: 5px;
    border-bottom: 3px solid black;
    background-color: #8fbc8f;
}

tr {
    margin-top: 1em;
    margin-bottom: 1em;
    height: 2em;
}

tr:nth-child(even) { /* this selector doesn't work in ADE */
    background-color: #BDE1BD;
}

tr:nth-child(odd) { /* this selector doesn't work in ADE */
    background-color: #F0FFF0;
}

td {
   padding: 5px;
   border-bottom: 1px solid black;
}

td.first, td.second {
   width: 25%; /* width of the first and second columns */
}

td.third {
   width: 50%; /* width of the third column */
}

And in the .html file:

<table>
  <thead>
      <tr>
        <th colspan="3">FIRST ROW</th>
      </tr>
  </thead>

  <tbody>
     <tr>
        <td class="first">1</td>

        <td class="second">2</td>

        <td class="third">3</td>
     </tr>

     <tr>
        <td>4</td>

        <td>5</td>

        <td>6</td>
     </tr>

     <tr>
        <td>7</td>

        <td>8</td>

        <td>9</td>
     </tr>

     <tr>
        <td>10</td>

        <td>11</td>

        <td>12</td>
     </tr>
  </tbody>
</table>

Below you can see a screenshot of my Kindle and Sigil and the respective epub.

Regards
Rubén

[phossler]

WOW -- thanks

There's a lot to review

Some CSS I understand, but there's a number that will have me looking in cssschools.com

Thanks again

Paul

[Hitch]

Originally Posted by RbnJrg

Something like this:

Below you can see a screenshot of my Kindle and Sigil and the respective epub.

Regards
Rubén

Ruben:

Isn't that a Kindle4? A K8 device, in other words? If you try to use that for a K7 mobi, what happens, or do you use an image of the table instead as a fallback for K7?

Hitch

[RbnJrg]

Originally Posted by phossler

WOW -- thanks

There's a lot to review

Some CSS I understand, but there's a number that will have me looking in cssschools.com

Thanks again

Paul

You are welcome

[RbnJrg]

Originally Posted by Hitch

Ruben:

Isn't that a Kindle4? A K8 device, in other words? If you try to use that for a K7 mobi, what happens, or do you use an image of the table instead as a fallback for K7?

Hitch

Hi Hitch;

Yes! that is K4NT Of course, we can't use those styles in K7; in that case, I think what you point out, is the better choice: to use images (.gif images) instead of tables as a fallback for K7.
But it seems to me that in this case Paul doesn't want to use the tables in a Kindle device because he posted in the Sigil section of this forum; if he would want to use the tables for Kindle he would have posted in the "Kindle Formats" section (but of course, I may be wrong ).

Regards
Rubén

[phossler]

Hmmm - I was targeting towards a file for the Kindle Touch (run the epub through KindleGen). Sometimes I'll put the epub on my iPad, although I typically prefer the small and lighter form factor ofthe Kindle.

I was really only trying to keep some numerical data aligned in a grid

I have not even gotten to the point of seeing what the tables will look like on the KT, since I'm still trying to learn enough CSS and HTML to format them with Sigil.

Does this mean that some CSS shouldn't be used for KT compatibility?

Paul

Paul

[RbnJrg]

Originally Posted by phossler

Hmmm - I was targeting towards a file for the Kindle Touch (run the epub through KindleGen). Sometimes I'll put the epub on my iPad, although I typically prefer the small and lighter form factor ofthe Kindle.

I was really only trying to keep some numerical data aligned in a grid

I have not even gotten to the point of seeing what the tables will look like on the KT, since I'm still trying to learn enough CSS and HTML to format them with Sigil.

Does this mean that some CSS shouldn't be used for KT compatibility?

Paul

Paul

Don't worry; if you have a Kindle Touch, the tables -with the styles I pointed out- will work perfectly. Problems can be when tables are used in older Kindle models (Kindle 1 and Kindle 2). But for devices that support the .kf8 format (like your Kindle Touch) tables designed as in my previous post, will work.

[crutledge]

Originally Posted by RbnJrg

Below you can see a screenshot of my Kindle and Sigil and the respective epub.

Regards
Rubén

You have already hit upon your solution.

Save the image as a *.gif file and replace the table with the image.

Shows fine in all formats and devices. I do this with all tables no matter how complex.

P.S. The gif format seems to diaplay character data better than other formats.

[exaltedwombat]

I think we're now just about at the point where simple tables are acceptable in general-distribution eBooks - we can't go on supporting obsolete products for ever. But if you're thinking of publishing, note that Smashwords will reject out of hand books that use tables. And if you're doing it for money, a client will have little problem in finding a platform that gives an unsatisfactory rendition - some of them delight in doing this :-)

[Tex2002ans]

Thank you for the code RbnJrg. Code for tables is definitely an area where I am sorely lacking. Would be great if people could post samples of tables that look good in old MOBI as well. That may or may not help many lurkers who never post in topics but learn a lot (ok ok, and me too!).

Originally Posted by crutledge

Save the image as a *.gif file and replace the table with the image.

Shows fine in all formats and devices. I do this with all tables no matter how complex.

P.S. The gif format seems to diaplay character data better than other formats.

If you are trying to use gif, create an Indexed PNG instead. PNG can handle every single use case of gif, but with much less overhead.

For the love of all that is holy, DO NOT save tables/charts as JPG though (one of my huge pet peeves).

See my post here for some comparisons:

https://www.mobileread.com/forums/sho...5&postcount=26

[RbnJrg]

Originally Posted by crutledge

You have already hit upon your solution.

Save the image as a *.gif file and replace the table with the image.

Shows fine in all formats and devices. I do this with all tables no matter how complex.

P.S. The gif format seems to diaplay character data better than other formats.

Hi crutledge;

If you are going to use few tables, then using images is not an important matter and what you do is a very good solution

But when tables are many, then the book becomes heavier when we use images instead of table code. Besides, if you want to make some changes in the data tables, it's easier when your work with table code and not with images. As you see, by using images we have advantages but also disadvantages We have to make the choice with more advantages (less disadvantages) and that vary with each case in particular.

[RbnJrg]

Originally Posted by Tex2002ans

Thank you for the code RbnJrg.

You are welcome

Originally Posted by Tex2002ans

Code for tables is definitely an area where I am sorely lacking. Would be great if people could post samples of tables that look good in old MOBI as well.

Tables are not supported in Kindle 1 (nor borders). In Kindle 2 you can have tables with borders and you can apply colors (shade of grays) with the css "background-color" property. But borders you can apply are very limited. So if we want to find a solution for all Kindle model, the choice would be (by means of media-queries):

1. For .kf8 to use css and html code.
2. For mobi7 (Kindle1 and Kindle2), to use images.

That is because if we use tables for Kindle2, Kindle1 won't read them.

Regards
Rubén

[crutledge]

Originally Posted by RbnJrg

Hi crutledge;

If you are going to use few tables, then using images is not an important matter and what you do is a very good solution

But when tables are many, then the book becomes heavier when we use images instead of table code. Besides, if you want to make some changes in the data tables, it's easier when your work with table code and not with images. As you see, by using images we have advantages but also disadvantages We have to make the choice with more advantages (less disadvantages) and that vary with each case in particular.

It's all trade-off. There is no solution.

[Hitch]

Originally Posted by crutledge

It's all trade-off. There is no solution.

Well, one solution is to simply have the author (assuming we're not talking about PD books which need to stay essentially "as-are") reformat the tables. Not every table has to be a table. Tabular data is put in that format because, on paper or in print, it makes sense. But there's really no reason that your standard, x-y table can't be redone into a lot of smaller tables, so that each smaller table has the column header as its title, and the row indicia or names repeated in a left-most column, and the data in the next column to the right. So if you had 10 original columns, now you have 10 tables. This smaller "footprint" works fine in 90-95% of the readers out there, as a table.

I think most bookmakers are deluding themselves about the readability of imaged-tables in e-readers. This isn't directed at you, Charlie, not at all, but in truth, most of them look utter crap on a small-screen device, and zooming them certainly doesn't help. Just my $.02 on the topic. I concur that there's certainly no magic bullet solution.

Hitch