Styling Tables

[pjcarlos]

Hi all,

Can somebody help please? Have I styled this table correctly with CSS (top one on page)?

http://www.cdonotts.co.uk/classes/no...-classes.shtml

#nottingham_classes {
width: 100%;
font-size:95%;
border-collapse:collapse;
}

#nottingham_classes th {
	font-weight: bold;
	color: #FFFFFF;
	background-color: #009933;
	padding:0.5em;
	border: 2px solid #FFFFFF;

}

#nottingham_classes td {
	padding:0.5em;
	border: 2px solid #FFFFFF;
}

.left_table-col {
	font-weight: bold;
	color: #009933;
	background-color:#BBEECC;
}

.main_table-col {
background-color:#FFFFCC;
}

[DaveWoods]

I put together a bit of information about styling and marking up tables a few weeks ago which you might find useful.

http://www.dave-woods.co.uk/?p=72

The CSS that you've created and applied looks fine but there's a couple of things I'd do.

1 - removing all styling information from the table and apply it using css
2 - add a scope="col" for your headings and a scope="row for your row headings
3 - add a table summary

4 - i'd probably apply the styles that you've got setup for your main_table-col to all the td's so that i didn't have to include all those classes and then just override them where i needed to.

5 - unless it's important, i probably wouldn't apply width's to the cells either as a table column will adjust to it's content if no width is applied which I tend to find best in catering for content, especially when it can be dynamic.

6 - The first cell of each column should also be a <th> as they're headings for the row.


Some of those are very picky points but I'd also run your page through http://validator.w3.org as you've got a lot of errors. Most are because you need to replace & with &amp; in URL's and there are a few other issues in there that you could easily fix.

Hope that helps.

[pjcarlos]

Thanks very much Dave - this is very helpful.

Just wanted to ask something about point 6:

6 - The first cell of each column should also be a <th> as they're headings for the row.

How would I use CSS to style the row headings differently from the column headings, since they will both have <th> tags?

[markbrown4]

I would add a class to the first row:

<tr class="col_headings">

Then you can target

.col_heading th {}
th {}

separately

Actually - looking at Dave's code - he's got a thead element in there already so you don't need the class

thead th {}
th {}

[markbrown4]

The CSS selelctor for :first-child should be able to do the job- but it doesn't have great enough support yet to use.

[DaveWoods]

I would add a class to the first row:

That would work fine for the first row. I was advising that the first cell of every row should also be a header (i.e. the first column) so I think the easiest solution would be to apply a class to that individual <th>. Sorry, probably didn't explain that bit clear enough.

Thanks very much Dave - this is very helpful.

Just wanted to ask something about point 6:

How would I use CSS to style the row headings differently from the column headings, since they will both have <th> tags?

Considering you've already got a class called left_table-col I'd probably use that in those table row headings to style the <th>, all you should need to add to it is a text-align: left; so that these headings aren't centered.

[AutisticCuckoo]

How would I use CSS to style the row headings differently from the column headings, since they will both have <th> tags?

If you take advantage of what HTML offers, it becomes easy.

Use THEAD to mark up the column header row, and TBODY to mark up the table body.

<table summary="…">
  <thead>
    <tr>
      … column header THs …
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>… row header TH …</th>
      … data TDs …
    </tr>
    …
  </tbody>
</table>

Then you can style the header cells differently with CSS:

thead th {
 ... styles for column headers ...
}
 
tbody th {
  ... styles for row headers ...
}

[pjcarlos]

Thanks everyone! Your help is invaluable - I understand things so much more now.