SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using <table> not css, for charts

    Hi - to create a multiple-column table (e.g. comparing products) is it only <table><tr><td> in the xhtml and everything else is in the css? I'm looking at http://www.w3schools.com/css/css_table.asp

    Problem is that page says Safari doesn't support css tables - "Browser support: M: Mac IE only".

    I need to copy my old site with html <table>'s (I mean tables comparing products not the tables used for layout) into my new xhtml/css, but when I copy a <table> over, it freaks the validator out. The moment I copy a full <table> into the xhtml, that lovely green msg at validator turns into the ugly red one.

    Is there a URL that teaches how to do multiple-column tables in xhtml/css? w3schools' info is very sparse.

    thank you - Val

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry that header should read "using css tables for charts"

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It sounds like tabular information, in which case <table> is the way to go.

    Here's an example of a table with three columns:
    Code HTML4Strict:
    <table>
      <thead>
        <tr>
          <th id="h-name">Name</th>
          <th id="h-age">Age</th>
          <th id="h-hair">Hair Colour</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td headers="h-name">Anne</td>
          <td headers="h-age">26</td>
          <td headers="h-hair">blond</td>
        </tr>
        <tr>
          <td headers="h-name">Beth</td>
          <td headers="h-age">31</td>
          <td headers="h-hair">brown</td>
        </tr>
        <tr>
          <td headers="h-name">Carolyn</td>
          <td headers="h-age">24</td>
          <td headers="h-hair">red</td>
        </tr>
        <tr>
          <td headers="h-name">Diane</td>
          <td headers="h-age">29</td>
          <td headers="h-hair">black</td>
        </tr>
      </tbody>
    </table>
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi - thank you! Pls can you recommend a good URL that will teach me how to do the css - how to define width of each column, bordercolor, fonts for thead + tbody, etc.

    I've searched Paul's (sitepoint's) css reference but can't find a tutorial - e.g. border-color seems to apply only to boxes, I can't find it anywhere for tables.

    best, Val

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Border properties apply to table objects (tables and cells; and also rows, row groups, columns and column groups in the collapsing borders model).

    Defining width for columns is not entirely straightforward. Unless you use the fixed layout algorithm (table-layout:fixed) you only specify minimum widths.

    Here's one example of how to specify widths and borders for a 3-column table:
    Code HTML4Strict:
    <table id="mytable">
      <col>
      <col class="age">
      <col class="hair">
      <thead>
        ...
    Code CSS:
    #mytable {
      table-layout:fixed;
      width:30em;
      border-collapse:collapse;
    }
     
    #mytable th, #mytable td {
      border:1px solid #999;
    }
     
    .age {
      width:2em;
    }
     
    .hair {
      width:5em;
    }

    Specifying fonts is no different than for any other element:
    Code CSS:
    #mytable thead {
      font:100&#37; Georgia,serif;
    }
     
    #mytable tbody {
      font:100% Verdana,sans-serif;
    }
    Birnam wood is come to Dunsinane

  6. #6
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  7. #7
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi - I can't find in Opera or anywhere how to define column specs. I'm trying to define a column as text-align:left (when th,td is center).

    I see above you give -
    <table>
    <col>
    <col class="age">
    <thead>

    So I tried -
    <table>
    <col>
    <col class="col1">
    <thead>
    <tr>
    <td></td> etc, and

    .col1 {text-align: left}

    but now I don't know how to tell the html that the first td in every tr is col1.

    I know I could do - td.lft {text-align: left}
    and - <td class="lft">

    But I'd rather define the entire column than every single td in the col.

    thanks! - Val

  8. #8
    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 valarcher View Post
    Hi - I can't find in Opera or anywhere how to define column specs. I'm trying to define a column as text-align:left (when th,td is center).
    You can't. Only a few CSS properties can be applied to table columns and column groups, and text-align is not one of them.

    See Table formatting in the CSS reference for details.

    You'll have to assign this class to each cell (td or th) instead of to the col.
    Birnam wood is come to Dunsinane

  9. #9
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi - the electricity keeps on going off in South Africa so I forgot to send this after it came back on yesterday. I read the css ref, thank you! It works well for me, being able to change col-width of first col, then other cols are automatic width.

    Table's working beautifully - I think I have it now. Your

    <col>
    <col class="age">
    <col class="hair">
    <thead>

    really helped me! I didn't see that anywhere on web. Tho' I got a bit confused at validator, so finally I just changed it to <col></col> etc.

    Am I correct in thinking I don't need this (for my simple tables where there are no col-groups):

    <th id="h-age">Age</th>
    <td headers="h-age">26</td>

    Instead this is ok -

    <th scope="col"></th>

    thanks! - Val

  10. #10
    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 valarcher View Post
    Tho' I got a bit confused at validator, so finally I just changed it to <col></col> etc.
    The col element doesn't have an end tag in HTML (it's forbidden). If you're using pretend-XHTML, use <col /> instead of <col></col>.

    Quote Originally Posted by valarcher View Post
    Am I correct in thinking I don't need this (for my simple tables where there are no col-groups):

    <th id="h-age">Age</th>
    <td headers="h-age">26</td>

    Instead this is ok -

    <th scope="col"></th>
    In theory, yes. In practice, no. This is for accessibility, main for screen readers. But today's screen readers don't support the scope attribute. They need id and headers.
    Birnam wood is come to Dunsinane

  11. #11
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi - thank you for col />.

    Is this also only for screen readers?

    <th id="h-age">Age</th>
    <td headers="h-age">26</td>

    If so, I think I'd rather use "scope" trusting that next gen screen readers will recognize it, and meanwhile I can keep code tighter for the many cell phone users who outweigh scr. reader users.

    thanks! - Val

  12. #12
    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 valarcher View Post
    Is this also only for screen readers?
    What do you mean 'only'? If you're depending on a screen reader to access the Web, there's nothing 'only' about it.

    The headers attribute marks up the semantic relationship between a data cell and one or more header cells. Today it's probably mainly beneficial for screen readers, but who knows?

    If your table is simple enough (no colspans or rowspans), most screen readers can figure out the relationships anyway. But I see no harm in marking up the relationships explicitly, unless you're in a very big hurry.
    Birnam wood is come to Dunsinane

  13. #13
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you! By "only" I just meant, is there any other purpose for it besides readers? I understand from your answer it's just for readers. I'm not in a hurry but I'm trying to keep my code tight so there's less bytes for mobiles to download. I do have col+row spans but anyway, I think I'll take my chances that screen readers will soon understand "scope."

    thanks for the in-depth info!

  14. #14
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Scope is not entirely trivial when you mix colspans and rowspans into the equation. I wrote an article about HTML5 tables on Search-This, where I tried to decipher the proposed algorithm for associating header cells with data cells. It's quite complex.

    I wouldn't rely on screen reader support for the scope attribute. Especially since screen readers are very expensive and many users simply can't afford to upgrade.
    Birnam wood is come to Dunsinane


Tags for this Thread

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
  •