List items in table cells - bad practice?

HTML & CSS
1

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:

<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

no, it certainly is not :slight_smile:

have you validated the html?

3

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>.

4

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.