A couple of days ago I was working on a portion of my project here at work, and noticed that I could not align a table cell without using inline CSS. This was frustrating because I wanted to be able to globally have a “caption” for all the HTML forms I was working on. Here is the code for inline styles:

<td style="text-align: right; vertical-align: middle;">

What I found was that when I took the style out of inline and into the style sheet, it breaks.

<td class="caption">

/* CSS code */
.caption {
text-align: right;
vertical-align: middle;
}

Now, if I were to make it an ID selector, it still breaks:
<td id="column_caption">

/* CSS code */
#column_caption {
text-align: right;
vertical-align: middle;
}

This doesn’t work, even though I am explicit in the element in which I want to align. After Googling for the answer I came across something that got me thinking. Maybe I needed to add context to the CSS. The following works:

<td id="column_caption">

/* CSS code */
table td#column_caption {
text-align: right;
vertical-align: middle;
}

You can now notice that adding “table td” in front of the ID selector gives it context. I’m not sure why, but this was the only solution that worked, allowing me to put my style information into the CSS file instead of inline. Now, there is a HUGE (IMHO) drawback: since I am using the ID selector I now have to explicitly reference every cell I want to have these attributes. Thus, I could have something like this:

<table>
<tr>
<td id="column_caption"> </td>
<td> </td>
</tr>
<tr>
<td id="column2_caption"> </td>
<td> </td>
</tr>
... more rows here
</table>


/* CSS code */
table td#column_caption,
table td#column2_caption,
... more columns referenced here {
text-align: right;
vertical-align: middle;
}

Therefore, I can use CSS to make it easier to edit the style, but it is still tedious to have to ID every cell.

Does anyone else have a workaround better than this?

Sean