09-26-2012, 10:28 AM | #1 |
Connoisseur
Posts: 80
Karma: 1023042
Join Date: Nov 2011
Device: Kobo Touch, iPad
|
Tables problems
Hi everyone!
First of all, thanks for all the help, widsom and other great advices. In the last 6 months I learn alot of stuff hangin' here! I have a very frustrating problem with an ePub I'm creating right now. The ePub is full of tables and I can't find a way to display them properly. Here's an exemple: As you can see there's two layer of text. One layer is the normal paragraph (that is supposed to before and after the table!) and the other is the infos that is supposed to be in a table (shown in a little sqared box). Here's my CSS: Code:
table, th, td { font-size:1em; border:1px solid #98bf21; padding:2px 5px 2px 5px; line-height: 120%; } table { table-layout:fixed; width:90%; height:90%; margin-left:5%; margin-right:5%; } th{ font-size:1em; text-align:center; padding-top:5px; padding-bottom:4px; background-color:#A7C942; color:#ffffff; } td{ text-align:left; height:50px; vertical-align:middle; padding:15px; 2) How can I have the cell expand depends the size of the font choosed by the reader? Again, thanks a lot! |
09-26-2012, 01:58 PM | #2 |
Groupie
Posts: 171
Karma: 86271
Join Date: Feb 2012
Device: iPad, Kindle Touch, Sony PRS-T1
|
hi Ti-Ron - i think you should get rid of the tables altogether, especially if they're being used for layout purposes rather than to display tabular data. retailers' publication guidelines usually strongly recommend use of tables in this way as well.
re-structuring the layout so that your content is in paragraph, div, or list tags as appropriate is probably going to be much less frustrating than trying to get the tables to display properly across devices with minimal screen real-estate. if a lot of the book's content is in tables then it may seem daunting to parse it all, but i honestly think it will save you time and energy in the end, and you'll come out with a much better ebook. Last edited by mzmm; 09-26-2012 at 02:06 PM. Reason: run-on sentence |
09-26-2012, 02:12 PM | #3 |
Connoisseur
Posts: 80
Karma: 1023042
Join Date: Nov 2011
Device: Kobo Touch, iPad
|
Thanks for the answer and the tips. Do you have any exemples of <div> used as table to organize the information? That would be nice to see.
Thanks a lot! |
09-26-2012, 02:27 PM | #4 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
You can use tables for this, but I think your problem is in the HTML, not CSS.
|
09-26-2012, 02:50 PM | #5 |
Connoisseur
Posts: 80
Karma: 1023042
Join Date: Nov 2011
Device: Kobo Touch, iPad
|
Here's my html code for the table:
Code:
<table> <tr> <th>Nourrisseur Miller ou Chaudière inversée</th> <th>Baril</th> </tr> <tr> <td> <ul> <li>Le nourrisseur est intégré à la ruche</li> <li>Peu d’efforts requis de la part des abeilles pour récolter le sirop</li> <li>Température du sirop plus stable et accessible sous toutes conditions météorologiques</li> <li>Possibilité d’évaluer la consommation de sirop par ruche</li> <li>Volume de sirop adéquat; demande plus de main-d’œuvre pour le nourrissement</li> <li>Plus approprié pour les traitements antibiotiques</li> <li>A peu d’influence sur le pillage et la propagation de maladies</li> </ul> </td> <td> <ul> <li>Le nourrissement se fait à l’extérieur de la ruche</li> <li>Effort important de l’abeille pour récolter le sirop</li> <li>Température du sirop variable selon les conditions météorologiques</li> <li>Difficulté d’évaluer la consommation du sirop par ruche</li> <li>Grand volume de sirop; demande moins de main-d’œuvre pour le nourrissement</li> <li>Approvisionnement de sirop disponible pour les insectes et les ruchers extérieurs près du site</li> <li>Moins propice aux traitements antibiotiques</li> <li>Augmente les risques de pillage et de propagation de maladies</li> </ul> </td> </tr> </table> |
09-27-2012, 01:03 AM | #6 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
The table itself is not a problem. It is the rest. Can you post the complete HTML as an attachment?
|
09-27-2012, 08:38 AM | #7 |
Connoisseur
Posts: 80
Karma: 1023042
Join Date: Nov 2011
Device: Kobo Touch, iPad
|
Sure thing!
Here's the files from that chapter. Seriously guyz, you rock! |
09-27-2012, 09:06 AM | #8 |
Writer
Posts: 101
Karma: 590630
Join Date: Mar 2011
Location: Munich, Germany
Device: none
|
It seems to be the height in
td{ text-align:left; height:50px; vertical-align:middle; padding:15px; height:50px; } I have checked it in an old Internet Browser (Version 5) which is not so tolerant as new browsers. The first version shows your original, the second is without the height. I suppose that the height is meant as a maximum. So there is too much content for this cell and the text is shown in layers. By the way: Calibre will create a new stylesheet when converting. It is completely different from yours. See example 3. George Edit: In Chapter 6 there are some sentences closing without a point at the end (!). Last edited by GMcG; 09-27-2012 at 09:52 AM. |
09-27-2012, 10:16 AM | #9 |
Connoisseur
Posts: 80
Karma: 1023042
Join Date: Nov 2011
Device: Kobo Touch, iPad
|
Thanks a lot for the tips! Height seems to be the problem!
Points at the end of snetences are over rated! Thanks for the head up! |
09-27-2012, 01:30 PM | #10 |
Writer
Posts: 101
Karma: 590630
Join Date: Mar 2011
Location: Munich, Germany
Device: none
|
Chapter 6 looks quite normal, in the browser as well as in the viewer. The stylesheet ist without td height.
The table would be centered, if it were without height:90%. When validating the html-file, the validator said your apostrophe is the forbidden character #146. Use ’ (8217) instead. And those little dots at the beginning of ... et inspection à chaque occasion are forbidden too. George |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Blank tables | xenoglaux | Kobo Reader | 1 | 02-14-2012 10:15 AM |
TABLES: How do you think I should do this layout? | wannabee | Workshop | 19 | 05-29-2011 10:16 PM |
Resizing tables in window | meme | Development | 6 | 03-09-2011 10:00 AM |
tables or svg? | bobcdy | ePub | 18 | 12-06-2010 02:24 PM |
Need help with tables | Daithi | Amazon Kindle | 2 | 12-09-2008 02:10 PM |