В заголовке таблицы с двумя картинками

[mstdmstd]

Всем привет,
Подскажите пожалуйста мне нужно в каждом заголовке таблицы отобразить имя поля и две картинки для указания сортировки справа от лейбла
Если делаю так :

...
<th >

<table>
<tr>
<td>
SKU&nbsp;&nbsp;
</td>
<td>
<a onclick="javascript:runSort('SKU', 'asc');" >
<img src="/images/asc.gif" >
</a>
</td>

</tr>
<tr>
<td>&nbsp;
</td>
<td>
<a onclick="javascript:runSort('SKU', 'desc');" >
<img src="/images/desc.gif" >
</a>
</td>
</tr>
</table>

</th>
...

То у меня разваливается вся таблица - я так и не понял почему, так как внутренний <table></table> валиден и нигде не разрывает внешную таблицу

Если делаю так:

<th >
<span style="position: relative; top : 11px;">
SKU&nbsp;&nbsp;
</span>
<span style="position: relative; top : -1px; left: 2px; cursor:pointer; ">
<a onclick="javascript:runSort('SKU', 'desc');" >
<img src="/images/desc.gif" >
</a>
</span>
<span style="position: relative; top : 3px; left: -1px; cursor:pointer; ">
<a onclick="javascript:runSort('SKU', 'asc');" >
<img src="/images/asc.gif" >
</a>
</span>
</th >

То картинки начинают гулять и их положение сложно отследить и к тому же в зависимости от содержимого таблицы ширина колонок различна.
Подскажите лучшее решение ?