[Tex2002ans]

Originally Posted by Karellen

I thought I did. Did you spot something wrong in my code snippet in my first post?

Well, read through the other <table> formatting best practices / Accessibility threads. I went into all the details there.

For tables, I think the most important things are:

• Never use images-of-tables. Always try to use actual HTML.
• Use proper markup!
  
  • <th> for headings. <td> for cells.
    
  • (Optional) If you want to be extra fancy, you can separate out the top headings into a <thead> + everything else into <tbody>.
    

This means Text-to-Speech can read the cells correctly + the tables will follow all user preferences (font size, color, background, ...).

Then, you can do some visual upgrades:

• Align your cells!
  
  • Text = left-aligned.
    
  • Numbers = right-aligned.
    
  • This means visually pleasing + everything lines up as it should (decimals on decimals, etc.).
    
• Remove those lines + add some whitespace!
  
  • Simple whitespace in a table can do wonders for readability.

That's the important points for any and all formats.

And that would get you like 98%+ of the way there.

Then, and only then, would I begin worrying about further HTML(5) markup like <figcaption>, etc.

- - -

Side Note: Also, I'm not sure if you were aware...

MobileRead has a [CODE] tag. You accidentally shoved your code inside of a [PHP] tag.

- - -

Originally Posted by Karellen

Its for my own personal use. I am not creating ebooks for distribution.

Ahh, okay. Then you can get away with a little more stuff.

If you are putting it up for sale in an actual store (Amazon, B&N, etc.), you have to be a lot more careful.

Originally Posted by Karellen

I am happy to be educated if there is an error there (apart from the caption)

It's fine. It's a very simple table + you already used <th> for your headings, so that should be good enough.

One tweak I would do though is... I tend keep my <th> + <td> bare, making it WAY easier to read.

(Plus, you don't need to do all that <p class="noindent"> shenanigans.)

Before:

<th><p class="noindent">NO.</p></th>
<th><p class="noindent">TIME/EST</p></th>
<th><p class="noindent">LOC</p></th>
<th><p class="noindent">READING</p></th>

After:

<th>NO.</th>
<th>TIME/EST</th>
<th>LOC</th>
<th>READING</th>

WAY easier to read the code + spot issues.