SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: Styling Tables

  1. #1
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Styling Tables

    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

    Code:
    #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;
    }

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    I would add a class to the first row:
    Code:
    <tr class="col_headings">
    Then you can target
    Code:
    .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
    Code:
    thead th {}
    th {}

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    The CSS selelctor for :first-child should be able to do the job- but it doesn't have great enough support yet to use.

  6. #6
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4
    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.

    Quote Originally Posted by pjcarlos View Post
    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.

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pjcarlos View Post
    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.
    Code HTML4Strict:
    <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:
    Code CSS:
    thead th {
     ... styles for column headers ...
    }
     
    tbody th {
      ... styles for row headers ...
    }
    Birnam wood is come to Dunsinane

  8. #8
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks everyone! Your help is invaluable - I understand things so much more now.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •