Formatting a table question

[holdit]

I have an epub which is styled, passed validation and ready to go. However I need to add a page at the end of the book which is a table with images text and links on it. The original is a .docx which I converted to html and then imported the images and the html for the table. I assigned the stylesheet from the original and I have one problem. The table needs to be centered to line up with the rest of the book. How do I center the table and it's contents?

[mrmikel]

http://www.pigsgourdsandwikis.com/20...-ereaders.html

describes some ways to attempt this. The results are uneven depending on the reader.

I succeeded in doing it with my Sony, but it knocked out some of the lines in the table, in a table that needed them.

Be sure to check in the target reader whatever you do.

[Toxaris]

Keep the tables simple. They can be a hit-or-miss and are unpredictable.

[Elfwreck]

A 6" screen doesn't allow much in the way of tables; consider if there's any way to rearrange your data.

Tables display poorly on most ereaders. If the contents of the full width of the table won't fit on the screen, different readers do odd things with them; if a cell won't fit on the screen, same problem. Some might allow scrolling, or set them on the next page, or delete them entirely from view.

Test tables on a couple of devices if you're making them for commercial ebooks.

[RbnJrg]

Originally Posted by holdit

...How do I center the table and it's contents?

Try using the following styles in your css stylesheet:

div.tab {
   display: block;
   width: 60%; /* here use the width you want */
   height: auto; /* Important: don't forget this property */
   margin-left: 20%;
}

table {
   width: 100%;
   text-align: center;
   border: 5px solid black;
}

td {
   margin: 0;
   padding: 0;
   text-indent: 0;
   text-align: center;
}

And in your .html sheet write:

<div class="tab">
    <table>
      <thead>
        <tr>
          <th>Lorem ipsum dolor sit amet</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>Nulla ac tellus nunc</td>
        </tr>

        <tr>
          <td>Phasellus imperdiet leo metus</td>
        </tr>

        <tr>
          <td>Donec metus ligula</td>
        </tr>

        <tr>
          <td>Etiam lobortis, massa ac aliquam auctor</td>
        </tr>
      </tbody>
    </table>
  </div>

This is a workaround for ADE and readers based on ADE, otherwise is not neccesary to include the table inside a "div" block. As you can see, the trick is not to center the table but the "div block" Once centered the "div block", we can fill it with the table.

To center the "div block" we need to fix a width for it (what you want) and after that to set a margin-left according to the width. This left margin must be equal to:

(100% - block width %) / 2

In the above example we have:

(100% - 60%) / 2 = 20%

Regards
Rubén

[exaltedwombat]

Originally Posted by holdit

I have an epub which is styled, passed validation and ready to go. However I need to add a page at the end of the book which is a table with images text and links on it. The original is a .docx which I converted to html and then imported the images and the html for the table. I assigned the stylesheet from the original and I have one problem. The table needs to be centered to line up with the rest of the book. How do I center the table and it's contents?

Is this for an eBook that you hope to publish and will be read on a range of different devices? If this layout is absolutely essential, create a whole-page graphic. Preferably, re-think the layout with the limitations of eBook in mind.