Question

I have a simple two column table; I want a way to align the data in the first column to the right and to be able to style the two elements separately. Perhaps a table is not the best solution here, but I don’t know what else to try. I tried with column groups, but it isn’t working. Even when I try applying text-align: right to the ‘label’ element.

<table>
<colgroup>
<col class="label" />
<col class="price" />
</colgroup>
<tr>
<td><label>Subtotal:</label></td>
<td>$135.00</td>
</tr>
<tr>
<td><label>Taxes:</label></td>
<td>$11.23</td>
</tr>
</table>

Answer 1

Since you’re probably talking about heading cells, I’d go for a different approach:

<style type="text/css">
  table th { text-align: right; }
  table td { text-align: left; }
</style>

<table>
  <tr>
    <th>Right aligned</th>
    <td>Left aligned</td>
  </tr>
</table>