I always struggled to find a nice, clean way to style columns in tables with CSS; mainly I wanted to make the left column’s text align to the right, and the right column’s text align to the left. I knew I could create classes and just paste that class into every td – but that gets bulky… and I’d rather not have to put a bunch of class=”align-left” into a zillion td tags, etc. I prefer to write my CSS in a semi-conditional way (I presume this is my scripting side coming into play) so that it’ll style based on the tags and their placement/usage instead of classes (where applicable of course). I can show you how I managed to accomplish this and the benefits, and downsides, to my method.

Alright – so what I’m going to show you is formatting a table so that its left column’s text is aligned to the right and its right column’s text is aligned to the left. To start – we need a table so let’s build that real quick.

<table border="1">
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

So as you can see we’ve created a very simple table that has two rows and two columns. Nothing too fancy. If you were to put it in to a blank XHTML document it should display like this:

Now that we have our basic table let’s take a moment to reflect on how we might accomplish styling our table. We understand that in order to make columns in a row we add more td’s to our tr group, and that with CSS we can style those td’s using a simple td { text-align: right; } for example. This doesn’t work, however, because it targets all td’s – no matter the table, their placement, or the structure of the table. So, maybe we can use something a little more specific with descendant selectors by using tr td { text-align: right; }. That still doesn’t work correctly, however, as it selects all td’s that are descendants of a tr – which if we code our table correctly they will all be.

So we need to find a more specific method. You may never have heard of it, but you can use adjacent sibling selectors to accomplish a similar task as the decendant selectors, only more specific, which is what we need. If you’ve never seen adjacent sibling selectors, they look like td + td { text-align: right; }. What it is saying is to select the td that immediately follows another td tag, and to apply text-align: right; to it.

A note about adjacent sibling selectors: both selectors must have the same parent. So like, if we tried to do tr + td {text-align: right; }, though it would essentially be easier – it doesn’t work because tr’s parent is table and td’s parent is tr; so we need to tweak our styles a little bit to compensate for that.

<style type="text/css">
td {
  text-align: right;
}
td + td {
  background: #888;
  text-align: left;
}
</style>

Now – I added a background color to the column so that we can very easily see which column is being targeted. This is what you should have once you add that CSS to the header of your page:

It’s kind of hard to see the text-align having any effect because of the size of our table, so let’s modify our CSS real quick and add a style at the top to compensate for that, and allow us to see the text align working.

table {
  width: 350px;
}

Now that we added that style to the top of our CSS let’s see how it affected our table.

Now we can see the text-align is working properly, making our left column text align to the right and the right column to align to the left; problem solved, right? Well – not quite. What if our table has three columns, or eight, or even more? Well, let’s take a look.

Here’s where there’s a slight problem with our CSS. Say we needed column 3 to have the same style as column 1, well now we have to add another style to compensate for that – say making every third td reflect that of the first one, but remember that the style will cascade out as you add more columns. For the most part this is fairly sufficient for our needs, but keep in mind that when you use td + td, the second column in the table, and all subsequent columns will be affected. This is because column 1 plus column 2 selects column 2, then column 2 plus column 3 selects column 3, and it continues on down the line.

Hopefully that was helpful to you in some way! If you have a better way or any other comments/opinions please feel free to join in the discussion! You can find my complete example at http://www.coryreid.com/examples/styling-table-columns-with-css/.

This entry was posted on Wednesday, November 18th, 2009 at 8:40 PM and is filed under CSS Development, XHTML Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.