SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sematic difference of a table and dl

    Basically, which one should I use in this use case?

    I have a 'members profile' page in which I want to display data about the user like 'name', 'description', 'number of posts' and everything like that.

    I've three different designs for this and I'm wondering which one is best, both from a semantic and a usability perspective.
    Code:
    <table>
        <thead>
              <tr>
                    <td>Name</td>
                    <td>Description</td>
                    <td>Posts</td>
              </tr>
        </thead>
        <tbody>
              <tr>
                    <td>phyrex1an</td>
                    <td>I love cookies</td>
                    <td>32</td>
              </tr>
        </tbody>
    </table>
    Code:
    <table>
        <tbody>
              <tr>
                    <th>Name</th>
                    <td>phyrex1an</td>
              </tr>
              <tr>
                    <th>Description</th>
                    <td>I love cookies</td>
              </tr>
              <tr>
                    <th>Posts</th>
                    <td>32</td>
              </tr>
        </tbody>
    </table>
    Code:
    <dl>
        <dt>Name</dt>
        <dd>phyrex1an</dd>
        <dt>Description</dt>
        <dd>I love cookies</dd>
        <dt>Posts</dt>
        <dd>32</dd>
    </dl>

    In addition I also wonder if I just can replace the 'phyrex1an', 'description' and '32' with form fields and have a label around 'Name', 'Description' and 'Posts' to have a good form?
    I've heard that some text to speech user agents have problem with tables and forms and if thats true is the dl a better solution here?

    Thanks for reading.
    phyrex1an

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In your first example, go into your THEAD section and replace the TD elements with TH. Then use that modified example instead.

    And since it appears that the data you want to use is tabular in nature, I'd stick to the table for this (though a valid arguement could be made either way).

  3. #3
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree with Dan.

    As for using a form, the second example would probably be better (assuming of course that you use appropriate label elements).
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  4. #4
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you just have one person (one row + th), the second example would probably be a better solution because it cenerates less code and are easier to read for screenreaders (not all support th) and seach enginers.
    Things should be done as simple as possible, but not any simpler.
    Web Hosting Tips

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    >If you just have one person (one row + th)
    Yes, that's the case. Sorry for being unclear.

    Thanks for the help, I'm happy that I don't have to think about this any longer.


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
  •