Forum Moderators: open
Web design rookie here ... Hope you can help.
Why doesn't this validate?
<table class="style2">
<tr>
<td>
<li>List item 1</li>
</td>
<td>
<li>List item 2</li>
</td>
</tr>
<tr>
<td>
<li>List item 3 </li>
</td>
<td>
<li>List item 4</li>
</td>
</tr>
<tr>
<td>
<li>List item 5</li>
</td>
<td>
<li>List item 6</li>
</td>
</tr>
</tr>
</table>
My compatability report (IE 6.0) says that in XHTML 1.0 Transitional the tag <td> may not contain the tag <li>. I get a similar report from W3C.
How can I fix this. Any help would be greatly appreciated!
<ul>
<li>List item</li>
</ul>
Ask yourself why are you using a list item inside a TD? The semantic meaning of <li> is a list item, is that relevant in your scenario? (It looks like it is by "list item 1 . . . . ")
This being the case, you should not have it in a table. Try
ul li { display: inline; }
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
<ul>
<li>List item 3 </li>
<li>List item 4</li>
</ul>
<ul>
<li>List item 5</li>
<li>List item 6</li>
</ul>
You can style the ul's and li's as you wish, but you should be able to achive the exact same effect as your table using semantic lists and style sheets.
Thanks so much for your quick response and your help :-)
I have a list item inside a TD because I have two columns next to each other. And in each column I have various list items.
Like this ...
- Text 1 - Text 2
- Text 3 - Text 4
- Text 5 - Text 6
Those two columns are surrounded by a box. I'm using CSS, but I felt a table was necessary for these two columns. Isn't it?
gs1md, I'll try to put each list in a table cell. I appreciate the help :-)
When cornered, I will use tables, but only if there's no other option. You have one.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- put your doctype ALL ON ONE LINE -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Say No to Tables</title>
<style type="text/css">
#container {
width: 20%;
margin:auto;
border: 1px solid #c0c0c0;
}
ul {
margin:0;
padding:0;
float: left;
}
ul li {
display: inline;
margin: 0;
padding: 0 6px 0 6px;
}
.clear { clear: both; }
</style>
</head>
<body>
<div id="container">
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
<div class="clear"></div>
<ul>
<li>List item 3 </li>
<li>List item 4</li>
</ul>
<div class="clear"></div>
<ul>
<li>List item 5</li>
<li>List item 6</li>
</ul>
<div class="clear"></div>
</div>
</body>
</html>
