Help with CSS for ePub3/HTML5 Tables?

[enuddleyarbl]

I'm reformatting an old book in ePub3/HTML5. It has 6 tables that are defined with HTML using cellpadding and cellspacing (which are deprecated in HTML5). I'd like to get that into some CSS styles. Four of the 6 tables use:
- cellpadding="1" and
- cellspacing="0".

So, I guess those would be the default styles. One table uses:
- cellpadding="4" and
- cellspacing="0"

and the last table uses:
- cellpadding="5" and
- cellspacing="5"

I'm brand new to tables in css/html. But, I think for the "default" cellpadding="1", cellspacing="0" style, I'll need to set:

table {
border-spacing: 0px;
}

table,
td,
th {
border-collapse: separate;
}

td,
th {
padding: 1px;
}

For the cellpadding="4", cellspacing="0" style, I think I'd need a style for setting td and th padding: 4px

and for cellpadding="5", cellspacing="5" style, I'd need styles changing table border-spacing=5px and td, th padding:5px.

Does that sound reasonable?

And for my more basic question, how do I set up CSS classes/styles to handle the different versions? If I just needed to change the defaults, I could just list those things as above. But, how do I get them into multiple, separate, non-default classes/styles?

[enuddleyarbl]

Just a follow-up. After doing more research, I found that I could assign IDs to the tables and use those with # to apply the styles/classes to particular tables. I think I've got it working. The HTML for the table definitions used to look like:

    <table cellpadding="4" cellspacing="0" style="width:100%" class="calibre18">
        <colgroup class="calibre19">
            <col style="width:50%" class="calibre20"/>
            <col style="width:50%" class="calibre20"/>
        </colgroup>
        <tbody class="calibre21">
            <tr class="calibre22">
                <td class="calibre23">
...

Now, they look like this:

    <table id="an3819">
      <colgroup>
        <col/>
        <col/>
      </colgroup>
      <tbody>
        <tr>
          <td>
...

My table classes in stylesheet.css look like:

table#an1111, table#an2315, table#an3477, table#an3819, table#an3988 {
  table-layout: fixed;
  width: 100%;
  border-spacing: 0;
  border: 1px black solid;
}
td {
  border-collapse: collapse;
}
table#an1111 td, table#an3477 td, table#an3988 td {
  width: 50%;
  border: 0;
  padding: 1px;
  vertical-align: top;
}
table#an2315 td {
  width: 50%;
  border: 0;
  padding: 0;
  vertical-align: top;
}
table#an3017 {
  table-layout: fixed;
  width: 100%;
  border-spacing: 5px;
  border: 1px black solid;
}
table#an3017 td {
  width: 50%;
  border: 0;
  padding: 5px;
  vertical-align: top;
}
td {
  border-collapse: separate;
}
table#an3819 td {
  width: 50%;
  border: 0;
  padding: 4px;
  vertical-align: top;
}

Personally, since the difference between cellpadding/cellspacing of 1/0, 4/0 and 5/5 are so minor, I'm heavily considering just making all the classes the same. Also, with these settings (much of which I grabbed from the classes that used to be associated with the table elements), I don't see any difference between border-collapse: separate and collapse.

[Turtle91]

Set your default table settings first, then set specific styles with a class:

Css:
table {
margin:….;
border:….;
etc.
}

table.pad1 {
margin:….;
padding:….;
}

table.pad2 {
margin:….;
padding:….;
}

Html:
<table class="pad1">
Yadda, yadda
</table>

<table class="pad2">
Yadda, yadda
</table>

Edit: Ninja’d by the OP!! Lol

IDs work too, but each ID has to be unique; you would have to give the CSS styling for EACH ID on your style sheet. With classes you can have multiples with the same styling … streamlined you CSS sheet.

[RbnJrg]

Originally Posted by DaveLessnau

...
and for cellpadding="5", cellspacing="5" style, I'd need styles changing table border-spacing=5px and td, th padding:5px.

Does that sound reasonable?

That's right. The css property for cellspacing is "border-spacing" and the property for cellpadding is "padding".
In epub2 is allowed to use for example:

<table cellpadding="5" cellspacing="5" border="1">
    <tbody>
      <tr>
        <td>Hi,</td>

        <td>how are you?</td>
      </tr>
    </tbody>
</table>

Under epub3, the above code will give you errors with epubcheck. So, to mimic under epub3 that table layout, you should employ:

<table class="padspace" border="1">
    <tbody>
      <tr>
        <td>Hi,</td>

        <td>how are you?</td>
      </tr>
    </tbody>
</table>

and in your .css stylesheet:

.padspace {
    border-spacing: 5px;
    border-collapse: separate;
}

.padspace td {
    padding: 5px;
}

Of course, in order that the property "border-spacing" will work, "border-collapse" must take the value "separate". With "border-collapse: collapse", the property "border-spacing" won't have any effect. And you also could use:

<table class="padspace">
    <tbody>
      <tr>
        <td>Hi,</td>

        <td>how are you?</td>
      </tr>
    </tbody>
</table>

and in your .css stylesheet:

.padspace {
    border: 3px solid black;
    border-spacing: 5px;
    border-collapse: separate;
}

.padspace td {
    border: 1px solid black;
    padding: 5px;
}

to have control over the borders.

[enuddleyarbl]

After playing around with the css formatting for those tables, I just set them all to the same settings. I don't know why the author/publisher made them slightly different from each other -- it really made no difference. In my stylesheet.css, I ended up with:

table#an1111, table#an2315, table#an3477, table#an3819, table#an3988, table#an3017 {
  table-layout: fixed;
  width: 100%;
  border-collapse: separate;
  border-spacing: 5px;
  border: 1px black solid;
}
table#an1111 td, table#an3477 td, table#an3988 td, table#an2315 td, table#an3017 td, table#an3819 td {
  width: 50%;
  border: 0;
  padding: 2px;
}

And, since these were all the tables in the book, I could have gotten away without the IDs at all and just gone with changing the default table and td settings (or at least started there as Turtle91 said). But, this is fine.

EDIT: After reading through RbnJrg's post, I noticed I had my border-collapse line in the td class instead of the table class. I moved it and changed my post, to reflect its new location.

[RbnJrg]

Originally Posted by DaveLessnau

After playing around with the css formatting for those tables, I just set them all to the same settings. I don't know why the author/publisher made them slightly different from each other -- it really made no difference. In my stylesheet.css, I ended up with:

table#an1111, table#an2315, table#an3477, table#an3819, table#an3988, table#an3017 {
  table-layout: fixed;
  width: 100%;
  border-spacing: 5px;
  border: 1px black solid;
}
td {
  border-collapse: separate;
}
table#an1111 td, table#an3477 td, table#an3988 td, table#an2315 td, table#an3017 td, table#an3819 td {
  width: 50%;
  border: 0;
  padding: 2px;
}

And, since these were all the tables in the book, I could have gotten away without the IDs at all and just gone with changing the default table and td settings (or at least started there as Turtle91 said). But, this is fine.

Don't use ID, just define a class, apply the padding to cells and border-spacing to tables (see my previous post):

.tabspace {
  table-layout: fixed;
  width: 100%;
  border-spacing: 5px;
  border-collapse: separate;
  border: 1px black solid;
}

.tabspace td {
  width: 50%;
  border: 0;
  padding: 2px;
}

And now, where you had for example <table id="an1111"> now write <table class="tabspace">. Do the same with your others tables.

[Tex2002ans]

Originally Posted by DaveLessnau

I'm brand new to tables in css/html.

KISS. Keep It Simple, Stupid.

All you really need is:

• <table>
• <th>
• <td>
• <thead> (Optional)
  
  • This allows the headings to "repeat" if page-break occurs in middle of table.
• <tbody> (Optional)

For more info, see my posts in:

• 2021: "Formatting tables best practices"
• 2021: "Tables in ePub"

Originally Posted by DaveLessnau

And for my more basic question, how do I set up CSS classes/styles to handle the different versions?

Use the defaults, they're there for a reason.

Then, tentatively, you can add more CSS on top of that if needed.

Anyway, if you share an example image+HTML of your actual tables, we could make better judgements.

- - -

Side Note: If you want to make your tables more readable, you should also follow these basic rules:

• Left-Align Text
• Right-Align Numbers

If you want more info, I highly recommend reading my Posts #4, #9, and #11 in "Formatting tables best practices".

Originally Posted by DaveLessnau

After playing around with the css formatting for those tables, I just set them all to the same settings. I don't know why the author/publisher made them slightly different from each other -- it really made no difference.

Yes, good idea.

Originally Posted by DaveLessnau

If I just needed to change the defaults, I could just list those things as above. But, how do I get them into multiple, separate, non-default classes/styles?

I'd be very careful with lots of padding in your tables.

Remember, ebooks can be read on very skinny/tall screens (like cellphones) with very large fonts.

Personally, I minimize bloat as much as possible.

Stick with the defaults, with very minor adjustments here and there.

The most important thing is the proper HTML markup. That gets you 90% of the way there. This final 10% is niggling over smaller details.

[JSWolf]

iBooks/Books is terrible on a small cell phone screen such as an iPhone with a 4.7" screen. The margins are way too large for the size of the screen. That eats a good chunk of the screen for no reason at all.