Remembering How to Write Tables for HTML Emails

Tabled Layouts.. what are those? Oh Right! That ancient practice that is now shunned. But, I mean tables have their purpose to display data, so we all are still styling them right?

After recently being thrown into the old, unsophisticated world of HTML Emails for my work, I've learned a thing or two, and had to remember how in the world I used to do the things I did with tables to create layouts. *sigh* HTML Emails are very picky, complex css confuses email programs, and linked css is sketchy. Why, hello html style tags and inline css, where have you been all these years? Oh yes, those skills that you perfected years and years ago and then discarded carelessly into a closet when something newer and shinier came out still has a use!

As I have said, tables still have their purpose outside of layouts, but I've found I've done very little designing with tables, other than making sure they look pretty if used somewhere on a page. I haven't hand coded a table other than for basic info in a while.

If you're like me, and need a refresher in tables, here we go...

Basic Table Structure

Just like in an HTML page, we have our global tag <table> head <thead>, body <tbody>, with the inclusion of a <tfoot> (footer).

<table>
	<thead></thead>
	<tbody></tbody>
	<tfoot></tfoot>
</table>

In order to display data in tables, you need a few further tags. Tables work on rows and columns, just like an excel spreadsheet. You need to first define a row <tr> and then the TableData: <td>.

	<tbody><tr><td>Kittens</td></tr></tbody>

Spanning Multiple Columns

If your columns need to expand multiple columns use colspan="#" to define the number of columns to expand across.

Putting it all together

<table>
<h2>A List of Kittens</h2>
<thead>
	<tr>
	<th>Name</th>
	<th>Colour</th>
	<th>Breed</th>
	</tr>
</thead>
<tbody>
	<tr>
	<td>Mr. Bubbles</td>
	<td>Ruddy</td>
	<td>Abyssinian</td>
	</tr>
	<tr>
	<td>Charles</td>
	<td>White</td>
	<td>Persian</td>
	</tr>
	<tr>
	<td>Simon</td>
	<td colspan="2">No data For this entry yet</td>
	</tr>
</tbody>
<tfoot></tfoot>
</table>

A List of Kittens

Name	Colour	Breed
Mr. Bubbles	Ruddy	Abyssinian
Charles	White	Persian
Simon	No data For this entry yet

There! A simple table. Sigh, now that wasn't so bad :)

You can further use html style tags such as valign (vertical align), bgcolor, width/height, nowrap to help create a nice simple layout.

Happy emailing :)