Tables?

Discussion in 'CSS' started by gobbly2100, Oct 30, 2007.

0
  1. #1
    Hey,

    I want to display a table to display tabular information but I don't know the correct way to style this correctly including CSS, what attributes do I specify in the HTML and what attributes do I specify in the style sheet?

    Here is the actual table I want to use here

    Thanks in advance for any help!
     
    gobbly2100, Oct 30, 2007 IP
  2. simonpeterong

    simonpeterong Peon

    Messages:
    62
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    simonpeterong, Oct 30, 2007 IP
  3. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #3
    NOOOOOOOOOOOO! Avoid w3schools.

    I'm pretty sure you know how a table works, so I'll explain some attributes and elements that are not commonly used.

    You can use the summary attribute of the table element to explain whatever is going to be inside your table.

    Add a caption, which is like a header element that gets displayed above the table by default

    Most people put EVERYTHING in table cells (tds) but you should use the table header element (th) to markup your (surprise!) table headers. By default they're styled as bold and screen readers may read them louder, because the <th> signifies emphasis like <strong>. Remember that both <th>s and <td>s go inside <tr>s.

    The <thead>, <tfoot> and <tbody> elements are there so you can divide your sections up, which later will be helpful when styling (more hookons).

    Remember that the <thead> and <tfoot> appear above the <tbody>. If you have a very, very long table and you'd like to print it out, then it would be best if you copied your <thead> as a <tfoot> so that you could see the headers at the bottom and top of the page.. instead of looking all the way at the top.

    By default <table> elements look pretty ugly.. and thats mostly because the borders aren't collapsed (spaced out) and you probably used the border attribute which gives some ugly outset borders. Just don't use the border attribute. Do this instead.

    If you want a border around the table, just add a line of code to the existing rules for your table..

    You may want to give borders to both your <th> and <td> elements, and cells that are adjacent to one another (am I using the right term?) will have their borders joined ( better looking ). It's also better if you add some padding to the <th> and <td>s...


    To assist screen readers, you can go one step further with the headers and scope attributes. For more information, avoid w3schools and go directly to the source... which is

    http://www.w3.org/TR/html401/struct/tables.html
     
    soulscratch, Oct 30, 2007 IP