Styling a table column
in [CSS]
|
Prev: IE7 and width: auto
Next: IE8 not bordering empty cell
From: Ed Mullen on 17 Jul 2010 23:34 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 18 Jul 2010 00:11 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 18 Jul 2010 00:33 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 18 Jul 2010 06:19 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 18 Jul 2010 12:02
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. |