Tuesday, August 26, 2003

What's the difference between using a class inside a table cell tag and using a span tag in a table cell?

In other words what is the difference between:

<td class="myClass"></td>

<td><span class="myClass"></span></td>

In the first case you are applying your class to a block level element (<td>) whereas in the latter case the <span> creates an inline element.

The first example will apply to all the content in the td (or the cell itself) whereas the second one applies only to the items wrapped in the span and does not effect the cell itself.

As to whether it matters, it depends on what you're doing with the style. If you are just setting font styles, then either is probably fine. If you're going to do a background color or underlining or padding effects, you need to consider if you want that applied to the text block or to the cell. See the example below.

There are still a few browsers which won't apply styles within a <td>, including NS4.x.
In general, unless you’re designing for these browsers, use the class in the table tag. The span is just an extra piece of code. Try to reserve using span to very discreet items. For instance: a word that receives special treatments.