SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    List items in table cells - bad practice?

    Hi there,

    I was wondering if it's good practice to put <li> tags inside table cells. Normally, I would just put the list items in their own div container without the table, but for specific design reasons, I need to separate the list items in their own table data cells.

    This is how I'm currently doing it:

    Code:
    <div id="container">
    <ul>
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td><h2>List Header</h2></td>
    </tr>
    <tr>
    <td height="29"><li><a href="itemone.html">Item One</a></li></td>
    </tr>
    <tr>
    <td height="29"><li><a href="itemtwo.html">Item Two</a></li></td>
    </tr>
    <tr>
    <td height="29"><li><a href="itemthree.html">Item Three</a></li></td>
    </tr>
    <tr>
    </table>
    </ul>
    </div>
    The reason I'm doing it this way is because I can't seem to re-create the hover status of my linked list items properly without using a table.

  2. #2
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,215
    Mentioned
    58 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by css-squirrel View Post
    I was wondering if it's good practice to put <li> tags inside table cells.
    no, it certainly is not

    have you validated the html?
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  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)
    A <ul> can only contain <li>, nothing else – definitely not a <table>.

    An <li> can only occur as the child of an <ol> or <ul>, nothing else – definitely not a <td>.
    Birnam wood is come to Dunsinane

  4. #4
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,266
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    The reason I'm doing it this way is because I can't seem to re-create the hover status of my linked list items properly without using a table.
    You can of course put a list inside a table cell.

    (like this:
    table blah blah... <td>
    <ul>
    <li>stuff</li>
    <li>stuff</li>
    <li>stuff</li>
    </ul>
    </td>
    etc.../table blah blah...)

    However the reason you're doing it should ring bells.

    but for specific design reasons, I need to separate the list items in their own table data cells.
    Sometimes we choose an alternate, but still valid and arguably semantic, way of writing something because of design, but in general, your markup should be pretty design-agnostic.

    Anyway, tell us what you're trying to recreate and we can likely show you a valid and semantic way to do it.


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
  •