Question

I don’t use tables a lot, but when I do get some tabular data it goes in a table. But I was wondering if there was a better, or proper, way of aligning cells other than using empty cells.

For example, I’m working with a checkout table that lists each product, price, etc in a row adding as many rows as needed. At the end, there’s the standard sub, shipping, total fields.

Now they want the last section all on the right and this is a pretty standard setup that I’ve come across. Not everyone has it that way but enough that I’ve seen it. So I’m not against it, but the only way I can see to do it is to add a lot of empty cells to get the aligning correct.

<tr>
    <td><!--This cell should be empty--></td>
    <td><!--This cell should be empty--></td>
    <td><!--This cell should be empty--></td>
    <td><!--This cell should be empty--></td>
    <td><!--This cell should be empty--></td>
    <td>Sub-Total</td>
</tr>
<tr>
    <td><!--This cell should be empty--></td>
    <td><!--This cell should be empty--></td>
    <td><!--This cell should be empty--></td>
    <td><!--This cell should be empty--></td>
    <td><!--This cell should be empty--></td>
    <td>Total</td>
</tr>

Since I normally try to follow semantics pretty closely, this doesn’t feel right. Like I’m missing something. But in other areas, some cells just aren’t filled becuase there is no particular data to put there, i.e. if one product has an option but the other products don’t. So it can’t be wrong since those fields MUST be empty. So I’m caught and don’t really know if this is right, wrong, opinion, or what.

Answer 1

You can use the colspan attribute. You will likely want to right-align the text in that column with CSS:

<tr>
    <td colspan="6">Sub-Total</td>
</tr>
<tr>
    <td colspan="6">Total</td>
</tr>