View Full Version : Attempt at lists instead of tables

03-10-2005, 06:00 PM

I'm trying to redesign and not use tables. I'm converting most of the tables to lists actually - for the content I'm dealing with lists seems to work well for this.

But... I'm stuck on a section. Here is a link to the test page with the code.


Normally I would put the "times" in one <td> and the "names" in an adjacent cell. This lines up the 1st letter of each line nicely.

I'm not having much luck using an <ul> for this tho. As you can see the first letters of the "names" are staggered due to the data all being on the same line. I'm having trouble similating a table I guess.

Any thoughts or suggestions on how to straighten that out?


03-10-2005, 06:38 PM
Try something like this:







<p><strong>Monday Through Friday</strong></p>

<div id="times">
<span>12am to 5am -- </span><br>
<span>5am to 10am -- </span><br>
<span>10am to 3pm -- </span><br>
<span>2pm to 7pm -- </span><br>
<span>7pm to 12am -- </span><br>

<a href="houston.html">Jerry Houston</a><br>
<a href="billdavis.html">Bill Davis</a><br>
<a href="berry.html">Paul Berry</a><br>
<a href="fulgham.html">Mick Fulgham</a><br>
<a href="kyser.html">Paul Kyser</a><br>


03-10-2005, 06:57 PM
I have to disagree with chump2877 on this one. If CSS were disabled, it's not clear which time corresponds to which name, not to mention the lack of semantic structure. Try enclosing the time in a span and setting a width that will accomodate.

<style type="text/css">
.time { width:8em; }

<ul class="programming">
<li style="list-style: none"><strong>Monday Through Friday</strong></li>

<li><span class="time">12am to 5am</span> <a href="houston.html">Jerry Houston</a></li>

<li><span class="time">5am to 10am</span> <a href="billdavis.html">Bill Davis</a></li>

<li><span class="time">10am to 3pm</span> <a href="berry.html">Paul Berry</a></li>

<li><span class="time">2pm to 7pm</span> <a href="fulgham.html">Mick Fulgham</a></li>

<li><span class="time">7pm to 12am</span> <a href="kyser.html">Paul Kyser</a></li>

BTW, as far as semantics go, this could be appropriate for a <table>.

03-10-2005, 07:06 PM
yea, i like your way better mcdougal....and yes, when you are presenting data in tabular format, there's really no reason to avoid tables just for the sake of avoiding tables....

03-10-2005, 07:23 PM
Thanks guys! :)

But that doesn't appear to have done the trick. I've updated the page if you want to check it. The first set is with the code you offered.

I may need to use a table.

I agree that if the data is tabular a table is in order and acceptable. I just wanted to see if this could be done "tableless". ;)


03-10-2005, 08:59 PM
Add float:left; to the class rules. It does the trick in Firefox, can't test it in IE at the moment.

.times {
width: 10em; float:left;

03-10-2005, 09:14 PM
For this, I'd go either with a table, or with a definition list. Perhaps something like this:

<dt>12am to 5am</dt>
<dd>Jerry Houston</dd>
<dt>5am to 10am</dt>
<dd>Bill Davis</dd>
<dt>10am to 3pm</dt>
<dd>Paul Berry</dd>
<!-- Etc. -->