Tables problems

[Ti-Ron]

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:

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;

1) Why the infos is not in the table (and cells)?
2) How can I have the cell expand depends the size of the font choosed by the reader?

Again, thanks a lot!

[mzmm]

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.

[Ti-Ron]

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!

[Toxaris]

You can use tables for this, but I think your problem is in the HTML, not CSS.

[Ti-Ron]

Here's my html code for the table:

<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>

I know this one is a little bit funky with a list in a cell, but I hope I did it correctly.

[Toxaris]

The table itself is not a problem. It is the rest. Can you post the complete HTML as an attachment?

[Ti-Ron]

Sure thing!
Here's the files from that chapter.

Seriously guyz, you rock!

[GMcG]

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 (!).

[Ti-Ron]

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!

[GMcG]

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