[Turtle91]

Here's a real quick regex to change most of the table to <p> in one pass for a glossary type index. You would need to remove any <table>or <tfoot>/<thead> tags with a different S/R.

search: <tr.*?>\s*<td.*?><b.*?>(.*?)</b></td>\s*<td.*?>(.*?)</td>\s*</tr>
replace: <p><strong>\1</strong> — \2</p>

...and then I style like this:

div.hang p      {padding-left:2em; text-indent:-1.8em; margin-top:1em}

<div class="hang">
<p><strong>Dion</strong> — The Narrator</p>
<p><strong>Dion</strong> — The Publisher</p>
<p><strong>Dion</strong> — The Editor</p>
...etc.
</div>

If you want to clean up the table you really don't need all of those classes in each and every column/row. You can style the whole table with a simple table class. Such as:

table.test          {margin:0 auto; width:90%; border-collapse:collapse}
table.test td       {vertical-align:top; padding:5px}
table.test thead    {text-align:center; font-weight:bold}
table.test tfoot    {font-size:.8em}
table.test tbody td {border:1px solid}


<table class="test">
<tr>
   <td><strong>Dion</strong></td>
   <td>The Narrator</td>
</tr>
<tr>
   <td><strong>Dion</strong></td>
   <td>The Publisher</td>
</tr>
...etc.
</table>

If you need a specific <td> to stretch across multiple columns then you would just add the colspan to that specific <td> (eg. <td colspan="2">) I haven't been able to find a reliable way to define the colspan or column width using CSS. If anyone else knows I'd be interested.

That seems to work well. But there is always the caveat that you need to test on your particular device!

Cheers,