[Tex2002ans]

Originally Posted by jonesyb

What is your method? Can you offer any improvements to what I have here? I would love to hear your insights as I want to make sure I am building them in the best way possible so they can be viewed properly on as many devices as possible.

Use HTML tables (<table>, <tr>, <th>, <td>):

<table>
	<tr>
		<th>Name</th>
		<th>Age</th>
	</tr>
	<tr>
		<td>Tex</td>
		<td>999</td>
	</tr>
	<tr>
		<td>Example</td>
		<td>123</td>
	</tr>
</table>

Avoid images of tables.

Using HTML allows font + size + color to be changed, read by Text-to-Speech, etc. etc. (Everything that makes ebooks great.)

For more details, see my posts:

• 2019: "Tables: what is the best way to render them on ebooks?" (Post #12+)
• 2013: "Tables in an epub?"

If you want to go further, you can introduce a <thead> along with your <tbody> + add scope= to your rows/column headings:

<table>
<thead>
	<tr>
		<th scope="col">Name</th>
		<th scope="col">Age</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>Tex</td>
		<td>999</td>
	</tr>
	<tr>
		<td>Example</td>
		<td>123</td>
	</tr>
</tbody>
</table>

<thead> will allow headings to duplicate after page breaks + help Text-to-Speech.

See:

• MDN: "<table>: The Table element"
• WebAIM: "Creating Accessible Tables"

And if you want your tables properly designed (so many tables are AWFUL)...

This GIF sums it up nicely:

"How to make your tables less terrible"

Pretty much:

• Text = Left-aligned, Numbers = Right-aligned
• Make headings match alignment of data
• No vertical lines
• Use spacing to organize rows/columns

If you want more technical details on that, I highly recommend the absolutely fantastic book: "The Visual Display of Quantitative Information" by Edward Tufte.