Previous Message
Next Message

Table Styling

Sent by Craig Cook on 25 September 2005 20:08


On 9/25/05, Jeff Chastain [EMAIL-REMOVED]> wrote:

> <table ... class="tabTable">
>     .....
>     <tr>
>         <td class="tabFootCell">totals</td>
>         <td class="tabFootCell">&nbsp;</td>
>         <td class="tabFootCell">24,655</td>
>         <td class="tabFootCell">16,503</td>
>         <td class="tabFootCell">226,232</td>
[snip]
>
> What I would like to do is simply set the text alignment where the first
> cell is left justified and the last three cells are right justified.  Is
> there a way to reference these table cells differently without a specific id
> tag on them?

You can do away with the repeated classes on each cell by classing the
whole row, and since it seems your first <td> is a label for the row,
it can be marked up as a <th>:

<tr class="tabFoot">
  <th scope="row">totals</th>
  <td>24,655</td>
  <td>16,503</td>
  <td>226,232</td>
</tr>

then style thusly:

tr.tabFoot td { text-align: right; }
tr.tabFoot th { text-align: left; }

The empty spacer cell is unneccessary, since you can accomplish that
with some padding-right on the <th>. Even that tabFoot class can be
eliminated if every row in the table is going to be the same, you can
apply those styles to the entire table instead:

table.tabTable td { text-align: right; }
table.tabTable th { text-align: left; }

And if you have a proper table header which you want to style
differently from the row labels:

table.tabTable thead th { text-align: center; }

So the rule of thumb is to start with semantic markup and style as
much as you can with the elements at hand, then add IDs and classes if
necessary.

--
Craig, www.focalcurve.com
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: