horizontally center table in mobi7?

[lumpynose]

I'm using the following css which works for epub but when I look at the dual mobi (converted with kindlegen) in the Mobipocket Reader the tables are at the left.

PHP Code:

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


I tried changing the html from just table to table align="center" but that didn't help and as I expected it then failed with epubcheck.

[RbnJrg]

Originally Posted by lumpynose

I'm using the following css which works for epub but when I look at the dual mobi (converted with kindlegen) in the Mobipocket Reader the tables are at the left.

PHP Code:

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


I tried changing the html from just table to table align="center" but that didn't help and as I expected it then failed with epubcheck.

You can't use "margin-left: auto" and "margin-right: auto". Instead, you must enclose the table between <blockquote> tags. For example:

table.YourTable {
     margin-top: 1em;
     border-collapse: collapse;
}

blockquote.MyTable {
     text-align: center;
}

and the .xhtml code would be something like:

<blockquote class="MyTable">
  <table class="YourTable" border="1">
    <thead>
      <tr>
        <th>First column</th>

        <th>Second Column</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Some text here</td>

        <td>And more text here too</td>
      </tr>

      <tr>
        <td>This for ending</td>

        <td>And this too</td>
      </tr>
    </tbody>
  </table>
</blockquote>

IIRC, that could work for mobi7. If that doesn't work, then your best bet is to use a (.gif) image instead of the table. The mobi7 format is very limited and there are not many things you can do with it and with tables, less yet.


EDIT: Also you could try to enclose the table inside a <div> block. For example:

<div class="MyTable>
    <table>
      ...
      ...
    </table>
</div>

with

div.MyTable {
   text-align: center;
}

but now I don't remember why it was preferable to use <blockquote> tags (all this, of course, is for mobi7; for .kf8 and .KFX things are tottally different).

[Hitch]

Originally Posted by lumpynose

I'm using the following css which works for epub but when I look at the dual mobi (converted with kindlegen) in the Mobipocket Reader the tables are at the left.

PHP Code:

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


I tried changing the html from just table to table align="center" but that didn't help and as I expected it then failed with epubcheck.

KF7 has no CSS whatsoever. You need to do whatever you want to do, in HTML only, inline.

If memory serves, using embedded blockquotes or even a single blockquote will indent it, but not center it. You can't put a table inside a paragraph, so...try centering a div and putting the table inside that. Yes, never mind, I see that Ruben already suggested that.

Hitch

[lumpynose]

Ah, ok; thanks guys. I'll have to think about how ugly I want to make my html in order to make the mobi output nice.

Is there a way to have conditional html? For example, in my css I have the following; is there anything equivalent for html?

PHP Code:

@media amzn-mobi {
...
} 


[lumpynose]

Unless kindlegen has something I guess there isn't any conditional HTML, although I did forget about the stuff that IE used.

PHP Code:

<!--[if IE6]>
    Things here!
<![endif]--> 


[Hitch]

Originally Posted by lumpynose

Ah, ok; thanks guys. I'll have to think about how ugly I want to make my html in order to make the mobi output nice.

Is there a way to have conditional html? For example, in my css I have the following; is there anything equivalent for html?

PHP Code:

@media amzn-mobi {
...
} 


NOT for HTML in KF7, because....no CSS. Righty?

Hitch

[RbnJrg]

Originally Posted by lumpynose

Is there a way to have conditional html? For example, in my css I have the following; is there anything equivalent for html?

PHP Code:

@media amzn-mobi {
...
} 


No. But you can do a bit of cheat You can employ something like:

@media amzn-mobi {
   .kf7 {
        display: normal;
   }

   .kf8 {
       display: none;
   }
}

@media not amzn-mobi {
   .kf7 {
        display: none;
   }

   .kf8 {
       display: normal;
   }
}

And to employ html code like the following:

<div class="kf7">
  <blockquote class="MyTable">
    <table class="YourTable" border="1">
      <thead>
        <tr>
          <th>First column</th>

          <th>Second Column</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>Some text here</td>

          <td>And more text here too</td>
        </tr>

        <tr>
          <td>This for ending</td>

          <td>And this too</td>
        </tr>
      </tbody>
    </table>
  </blockquote>
</div>

<div class="kf8">
  <table>
    <thead>
      <tr>
        <th>First column</th>

        <th>Second Column</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Some text here</td>

        <td>And more text here too</td>
      </tr>

      <tr>
        <td>This for ending</td>

        <td>And this too</td>
      </tr>
    </tbody>
  </table>
</div>

Of that way, you duplicate the html code but the kf8 class won't be displayed on mobi7 and the kf7 class won't be displayed on kf8/KFX.

[lumpynose]

Originally Posted by RbnJrg

No. But you can do a bit of cheat You can employ something like:
...
Of that way, you duplicate the html code but the kf8 class won't be displayed on mobi7 and the kf7 class won't be displayed on kf8/KFX.

Yeah, that certainly would work, but I can't bring myself to have duplicated stuff in the file; it goes against the DRY principle (Don't Repeat Yourself).

Although I could use that to put a big warning at the top of each chapter saying something like "Upgrade your derned Kindle already!"