Formatting a table's text

[Griff]

I want to have a table based on the following html:

<table>

<colgroup>
<col class="tableColumnText"/>
<col class="tableColumnText"/>
<col class="tableColumnNumeric"/>
</colgroup>

<tr class="rowHeader">
<td>name</td>
<td>address</td>
<td>cost (£)</td>
</tr>
<tr class="rowOdd">
<td>me</td>
<td>here</td>
<td>500</td>
</tr>
<tr class="rowEven">
<td>you</td>
<td>there</td>
<td>50</td>
</tr>
<tr class="rowOdd">
<td>him</td>
<td>somewhere</td>
<td>80</td>
</tr>

</table>

I'd like to use the class="tableColumnNumeric" to align all text in
that column to be right aligned.

..tableColumnNumeric
{
text-align: right;
}

I'd like to use the class="tableColumnText" to align all text in that
column to be left aligned

..tableColumnText
{
text-align: left;
}

This is great, except I don't want these to affect column headings (in
<tr class="rowHeader">) - I want these to be CENTER aligned.

..rowHeader
{
text-align: center;
}

However...I can't get it to work...it's as if the column over-rides the
row.

Any suggestions? (IE6 main browser client)

Thanks in advance

Griff

[bugbear]

Griff wrote:

I want to have a table based on the following html:

<table>

<colgroup>
<col class="tableColumnText"/>
<col class="tableColumnText"/>
<col class="tableColumnNumeric"/>
</colgroup>

<tr class="rowHeader">
<td>name</td>
<td>address</td>
<td>cost (£)</td>
</tr>
<tr class="rowOdd">
<td>me</td>
<td>here</td>
<td>500</td>
</tr>
<tr class="rowEven">
<td>you</td>
<td>there</td>
<td>50</td>
</tr>
<tr class="rowOdd">
<td>him</td>
<td>somewhere</td>
<td>80</td>
</tr>

</table>

I'd like to use the class="tableColumnNumeric" to align all text in
that column to be right aligned.

.tableColumnNumeric
{
text-align: right;
}

I'd like to use the class="tableColumnText" to align all text in that
column to be left aligned

.tableColumnText
{
text-align: left;
}

This is great, except I don't want these to affect column headings (in
<tr class="rowHeader">) - I want these to be CENTER aligned.

.rowHeader
{
text-align: center;
}

However...I can't get it to work...it's as if the column over-rides the
row.

Any suggestions? (IE6 main browser client)

Yep. Assuming no bugs (I'm ignorant) review "cascading order",
especially selector specifity.

http://www.w3.org/TR/REC-CSS2/cascad...ascading-order
http://www.w3.org/TR/REC-CSS2/cascade.html#specificity

BugBear

[David Dorward]

Griff wrote:

I want to have a table based on the following html: <table>
<colgroup>
<col class="tableColumnText"/>
HTML compatible XHTML needs a space before the slash in empty elements.
<tr class="rowHeader">
<td>name</td>
<td>address</td>
<td>cost (£)</td>
</tr>
<thead>
<tr>
<th scope="col">Name</th>
etc.

might be better.
This is great, except I don't want these to affect column headings (in
<tr class="rowHeader">) - I want these to be CENTER aligned.

th { text-align: center; } will probably do the trick if you improve your
markup as suggested.
--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

[Christoph Päper]

Griff (wrote something like this):

<table>
<col><col><col class="numeric">
<thead>
<tr><th>name <th>address <th>cost (£) </tr>
</thead><tbody>
<tr class="o"><td>me <td>here <td>500 </tr>
<tr class="e"><td>you <td>there <td> 50 </tr>
<tr class="o"><td>him <td>somewhere <td> 80 </tr>
</tbody>
</table>

I'd like to use the class="tableColumnNumeric" to align all text in
that column to be right aligned.

Put equal specific rulesets in the order you want or use better mark-up
and selectors.

th, td {text-align: left;}
thead th {text-align: center;}
col.numeric {text-align: right; /*should not work, but does in IE*/}
td:first-child+td+td {text-align: right; /*for CSS2 browsers*/}

Instead of "thead th" one could also use "tr:first-child th" (with a
single 'tbody' and no 'thead') or "th[scope='col']" (supported worse,
add attribute). CSS3 Selectors gives us "td:last-child" or
"td:nth-child(3)" and if the first cell in every row is actually a row
header ("scope='row'") one could use "th+td+td" and variations thereof.
With 'nth-child' you could also get rid of classes for odd and even rows
(actually only one is needed right now) without resorting to endless '+'
selectors.

Actually one would most likely want to use "text-align: '.'" (or ',')
for numeric/currency cells, but AFAIK still no browser supports that and
it has therefore been removed for CSS 2.1. It shouldn't harm to set it,
though:

td:first-child+td+td {text-align: right; text-align: '.'}

PS: Why would one use "tableColumnNumeric" as a class name?

[rarunms]

Here the problem is the <tr> style class is over rided by the td style
class.

if you apply the style class for the individual td you can get proper
out put as you expect.
<style>
.rowHeader
{
text-align:center;
}

.tableColumnText
{
text-align: left;
}
.tableColumnNumeric
{
text-align: right;
}
</style>
<table border="1" width="100%">
<colgroup>
<!--<col class="tableColumnText"/>
<col class="tableColumnText"/>
<col class="tableColumnNumeric"/>-->
</colgroup>

<tr class="rowHeader">
<td>name</td>
<td>address</td>
<td>cost (£)</td>
</tr>
<tr class="rowOdd">
<td class="tableColumnText">me</td>
<td class="tableColumnText">here</td>
<td class="tableColumnNumeric">500</td>
</tr>
<tr class="rowEven">
<td class="tableColumnText">you</td>
<td class="tableColumnText">there</td>
<td class="tableColumnNumeric">50</td>
</tr>
<tr class="rowOdd">
<td class="tableColumnText">him</td>
<td class="tableColumnText">somewhere</td>
<td class="tableColumnNumeric">80</td>
</tr>

</table>
--
rarunms
------------------------------------------------------------------------
rarunms's Profile: http://www.highdots.com/forums/member.php?userid=270
View this thread: http://www.highdots.com/forums/showthread.php?t=1519437