SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Left hand side table headers <th>

    Hi there, if <th> is supposed to go inside the <thead> section.

    What happens if you want to have left hand side headings as well?

    Does this also have to go inside a <thead>?

  2. #2
    SitePoint Addict Aarem's Avatar
    Join Date
    Aug 2008
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't worry about <thead>.
    Enclose the table within the <table></table> tags.
    For the first row (say with three cells) have
    <tr>
    <th scope="col">Col 1</th>
    <th scope="col">Col 2</th>
    <th scope="col">Col 3</th>
    </tr>

    If you want headings down the side, set up each <tr> like this:
    <tr>
    <th scope="row">Row 1</th>
    <td>Some text</td>
    <td>Some text</td>
    </tr>

    Does that help? The scope things are to healp screen readers understand the table layout.

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,813
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The thead just defines the column headings so that if you print the web page and it goes over several actual pages that the thead content can be printed at the top of every page instead of only at the top of the table. It also allows you to have a fixed heading section and scrollable table content.

    At least that's what it is for - browsers still don't support it all properly.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    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 unchartedtravel View Post
    Hi there, if <th> is supposed to go inside the <thead> section.

    What happens if you want to have left hand side headings as well?
    Then you use <th> in <tbody> as well.

    Your first statement is a bit strange, because it sounds as if you think that <th> can only be used within <thead>. Perhaps you misunderstood someone saying that <thead> should only contain <th>?

    Quote Originally Posted by Aarem View Post
    Don't worry about <thead>.
    Why not? If you have a table header (column headings), then you should mark it up with <thead>.

    Quote Originally Posted by Aarem View Post
    The scope things are to healp screen readers understand the table layout.
    Sorry, but screen readers don't support scope. You can use headers to explicitly match header cells and data cells, but in a simple column that's usually not necessary.

    Quote Originally Posted by felgall View Post
    The thead just defines the column headings so that if you print the web page and it goes over several actual pages that the thead content can be printed at the top of every page instead of only at the top of the table. It also allows you to have a fixed heading section and scrollable table content.
    Those are merely presentational matters, and are not really a concern for HTML. The thead element type marks up a table header, that's all. What user agents choose to do with it is mainly up to them. The features you describe are what W3C seems to have had in mind, but there's no requirement that UAs do this.
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Addict Aarem's Avatar
    Join Date
    Aug 2008
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @AutisticCuckoo: thanks for setting me straight. Jeesh, I gotta get back to studying tables. Have been ignoring them a bit.

    I was put off <thead> &co. because they are said to be poorly supported. But has that changed now?

    And now that I'm trying to improve my understanding, I can't find the point of using scope at all. I was told that it was for screen readers, but clearly not. So what use DOES it have?

  6. #6
    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 Aarem View Post
    I was put off <thead> &co. because they are said to be poorly supported. But has that changed now?
    That depends on what you mean by 'support'?
    All modern browsers support thead, tfoot and tbody to the extent that they will render them in the right order. They also support those element types in CSS selectors, so you can have different rules for column headings and row headings:
    Code CSS:
    /* Column headings */
    thead th {font-weight:bold; text-align:center}
     
    /* Row headings */
    tbody th {font-weight:normal; text-align:left}

    They don't support table headers and footers to the extent that they print them on each page of a multi-page table, though. That's not a W3C requirement; only a suggestion.

    Quote Originally Posted by Aarem View Post
    And now that I'm trying to improve my understanding, I can't find the point of using scope at all. I was told that it was for screen readers, but clearly not. So what use DOES it have?
    It doesn't seem to have any practical use right now. On the other hand, there's always the question whether we should design according to the standards or for broken applications. The scope attribute is far easier to use than the headers attribute. It shouldn't be an insurmountable task for screen readers to support header scope.
    Birnam wood is come to Dunsinane

  7. #7
    SitePoint Addict Aarem's Avatar
    Join Date
    Aug 2008
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that informative reply. Much appreciated.


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
  •