From: Ed Mullen on
I'd like to style the first column in a table differently from the other
columns. I've read a little about this online and am wondering what you
all think is the best approach to do this.

As it stands, the table is 5 columns by a couple hundred rows, simply
laid out. Specifically it's this page:

http://edmullen/abington/ahs_reunion_missing.php

What I want to do on this table is center the text in only the first column.

Any thoughts gratefully accepted.

--
Ed Mullen
http://edmullen.net
Optirectumitis - where the optic nerve gets crossed with the rectal
nerve resulting in a crappy outlook on life.
From: Jeff Thies on
Ed Mullen wrote:
> I'd like to style the first column in a table differently from the other
> columns.

tr td:first-child, or some variation

Jeff
I've read a little about this online and am wondering what you
> all think is the best approach to do this.
>
> As it stands, the table is 5 columns by a couple hundred rows, simply
> laid out. Specifically it's this page:
>
> http://edmullen/abington/ahs_reunion_missing.php
>
> What I want to do on this table is center the text in only the first
> column.
>
> Any thoughts gratefully accepted.
>
From: Ed Mullen on
Jeff Thies wrote:
> Ed Mullen wrote:
>> I'd like to style the first column in a table differently from the
>> other columns.
>
> tr td:first-child, or some variation
>
> Jeff
> I've read a little about this online and am wondering what you
>> all think is the best approach to do this.
>>
>> As it stands, the table is 5 columns by a couple hundred rows, simply
>> laid out. Specifically it's this page:
>>
>> http://edmullen/abington/ahs_reunion_missing.php
>>
>> What I want to do on this table is center the text in only the first
>> column.
>>
>> Any thoughts gratefully accepted.
>>

Perfect, Jeff! Thanks a lot. And, if you upload the style sheets to
the right folder on the server it actually works! :-D

--
Ed Mullen
http://edmullen.net
"In love the paradox occurs that two beings become one and yet remain
two." - Erich Fromm
From: Thomas 'PointedEars' Lahn on
Ed Mullen wrote:

> I'd like to style the first column in a table differently from the other
> columns. I've read a little about this online and am wondering what you
> all think is the best approach to do this.
>
> As it stands, the table is 5 columns by a couple hundred rows, simply
> laid out. Specifically it's this page:
>
> http://edmullen/abington/ahs_reunion_missing.php
>
> What I want to do on this table is center the text in only the first
> column.

If you want to style the first cell of each table row differently, it stands
to reason to assume that it serves as a row header. Therefore, you should
use the TH element instead of the TD element, whereas the element type can
serve as distinction. This would not only be more semantic, and therefore
accessible, but also the resulting CSS selector would be more compatible
than `td:first-child' and the resulting markup and CSS more maintenance-
friendly.

In order to differentiate TH elements that are row headers from TH elements
that are column headers, you can make the former descendants of a TBODY
element and the latter descendants of the THEAD element.

HTML:

<table>
<thead>
<tr>
<th>...</th>
<th>...</th>
...
</tr>
</thead>
<tbody>
<tr>
<th>...</th>
<td>...</td>
...
</tr>
</tbody>
</table>

CSS:

thead th {
text-align: left;
}

tbody th {
text-align: center;
}

Note that although the default stylesheet in several browsers declares
`text-align: center' for TH elements already, you should explicitly declare
the property value. Likewise, the default stylesheet often declares
`font-weight: bold' for TH elements, so you should declare `font-weight:
normal' (a.o.) if you do not want this. Firebug and other inspectors allow
you to view the default stylesheet property declarations.

See also <http://PointedEars.de/es-matrix> for examples.


HTH

PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f806at$ail$1$8300dec7(a)news.demon.co.uk>
From: Ed Mullen on
Thomas 'PointedEars' Lahn wrote:
> Ed Mullen wrote:
>
>> I'd like to style the first column in a table differently from the other
>> columns. I've read a little about this online and am wondering what you
>> all think is the best approach to do this.
>>
>> As it stands, the table is 5 columns by a couple hundred rows, simply
>> laid out. Specifically it's this page:
>>
>> http://edmullen/abington/ahs_reunion_missing.php
>>
>> What I want to do on this table is center the text in only the first
>> column.
>
> If you want to style the first cell of each table row differently, it stands
> to reason to assume that it serves as a row header. Therefore, you should
> use the TH element instead of the TD element, whereas the element type can
> serve as distinction. This would not only be more semantic, and therefore
> accessible, but also the resulting CSS selector would be more compatible
> than `td:first-child' and the resulting markup and CSS more maintenance-
> friendly.
>
> In order to differentiate TH elements that are row headers from TH elements
> that are column headers, you can make the former descendants of a TBODY
> element and the latter descendants of the THEAD element.
>
> HTML:
>
> <table>
> <thead>
> <tr>
> <th>...</th>
> <th>...</th>
> ...
> </tr>
> </thead>
> <tbody>
> <tr>
> <th>...</th>
> <td>...</td>
> ...
> </tr>
> </tbody>
> </table>
>
> CSS:
>
> thead th {
> text-align: left;
> }
>
> tbody th {
> text-align: center;
> }
>
> Note that although the default stylesheet in several browsers declares
> `text-align: center' for TH elements already, you should explicitly declare
> the property value. Likewise, the default stylesheet often declares
> `font-weight: bold' for TH elements, so you should declare `font-weight:
> normal' (a.o.) if you do not want this. Firebug and other inspectors allow
> you to view the default stylesheet property declarations.
>
> See also<http://PointedEars.de/es-matrix> for examples.
>
>
> HTH
>
> PointedEars

Thanks, Thomas. I'll have a more thorough look at this once I finish my
house cleaning! :-)

--
Ed Mullen
http://edmullen.net
There are a number of mechanical devices which increase sexual arousal,
particularly in women. Chief among these is the Mercedes-Benz 380SL.
 |  Next  |  Last
Pages: 1 2
Prev: IE7 and width: auto
Next: IE8 not bordering empty cell