Styling a table column
in [CSS]
|
Prev: IE7 and width: auto
Next: IE8 not bordering empty cell
From: Ed Mullen on 18 Jul 2010 13:36 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. Finished my house cleaning and time to ponder this some more. It makes perfect and elegant sense for this table: http://edmullen.net/mozilla/moz_compare.php where the first column does indeed serve as a row header. However, on the table in my original post: http://edmullen.net/abington/ahs_reunion_missing.php the first column is not really a header per-se but, rather, simply more data in the table (i.e., the record number of the data in the row). Thanks to all for your input. I'll be saving all the info in this thread for future reference! -- Ed Mullen http://edmullen.net If you had everything, where would you keep it?
From: Stanimir Stamenkov on 18 Jul 2010 14:32 Sun, 18 Jul 2010 12:19:01 +0200, /Thomas 'PointedEars' Lahn/: > 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, Not necessarily. TD given a 'scope' behaves like a header <http://www.w3.org/TR/html401/struct/tables.html#non-visual-rendering>: > ... Note that it's not always possible to make a clean division of > cells into headers or data. You should use the TD element for such > cells together with the id or scope attributes as appropriate. > (...) > Note the use of the scope attribute with the "row" value. > Although the first cell in each row contains data, not header > information, the scope attribute makes the data cell behave like a > row header cell... Sun, 18 Jul 2010 12:19:01 +0200, /Thomas 'PointedEars' Lahn/: > but also the resulting CSS selector would be more compatible > than `td:first-child' and the resulting markup and CSS more maintenance- > friendly. Not a complete solution in number of cases (one may not want to apply the styles on THs in the first column, for example), but for IE compatibility one could use: td:first-child, col.first-col { font-style: italic; ... } <table> <col class="first-col"><col>... .... <tr> <td>...</td> <td>...</td> ... </tr> .... </table> -- Stanimir
From: Andy Dingley on 18 Jul 2010 18:05 On 18 July, 04:34, Ed Mullen <e...(a)edmullen.net> 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 Styling columns is dead easy _except_ that only a handful of CSS properties can be applied this way. Don't try and use the others, as browser support for them is flakey (and the "correct" behaviour isn't what you thought). Hixie has a good explanation of what and why. http://ln.hixie.ch/?start=1070385285&count=1
From: Dr J R Stockton on 19 Jul 2010 14:51 In comp.infosystems.www.authoring.stylesheets message <3tqi8k.q3m.17.1@n ews.alt.net>, Sat, 17 Jul 2010 23:34:11, Ed Mullen <ed(a)edmullen.net> posted: >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. Using HTML, COL and maybe COLGROUP will do it - consult the Flamingo book. -- (c) John Stockton, nr London, UK. ?@merlyn.demon.co.uk Turnpike v6.05. Web <URL:http://www.merlyn.demon.co.uk/> - w. FAQish topics, links, acronyms PAS EXE etc : <URL:http://www.merlyn.demon.co.uk/programs/> - see 00index.htm Dates - miscdate.htm estrdate.htm js-dates.htm pas-time.htm critdate.htm etc.
From: David Stone on 20 Jul 2010 12:22
In article <Fi2gO3Gg6JRMFwRd(a)invalid.uk.co.demon.merlyn.invalid>, Dr J R Stockton <reply1029(a)merlyn.demon.co.uk> wrote: > In comp.infosystems.www.authoring.stylesheets message <3tqi8k.q3m.17.1@n > ews.alt.net>, Sat, 17 Jul 2010 23:34:11, Ed Mullen <ed(a)edmullen.net> > posted: > > >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. > > Using HTML, COL and maybe COLGROUP will do it - consult the Flamingo > book. Depending on what exactly you want to style, and which browsers you want it to work in, col and colgroup may not be the way to go... http://www.chem.utoronto.ca/~dstone/html/col-align.html In particular, you can set width and background colour, but not things like text alignment. If you specifically want to style the first column differently, you can try using the first-child pseudo-selector. |