PDA

Click to See Complete Forum and Search --> : how to make this with LIST?

ofir
10-27-2005, 08:19 AM
i have this html:


<table border='' cellspacing='0' cellpadding='3' style="width: 100%; color: black;">
<tr style="background-color: #CAE6FE">
<td style="width: 5%">Choose</td>
<td>Name</td>
<td>City</td>
<td>Zip</td>
</tr>
<tr align="center" >
<td align="center"><input type="radio" name="id"/></td>
<td align="left"><a href='#'>namenamename</a></td>
<td align="left"><a href='#'>klok</a></td>
<td align="left"><a href='#'>85002</a></td>
</tr>
<tr align="center" style='background-color: #E3E3E3'>
<td align="center"><input type="radio" name="id"/></td>
<td align="left"><a href='#'>blahblahblahblah</a></td>
<td align="left"><a href='#'>lipol</a></td>
<td align="left"><a href='#'>80028</a></td>
</tr>
<tr align="center" >
<td align="center"><input type="radio" name="id"/></td>
<td align="left"><a href='#'>namenamename</a></td>
<td align="left"><a href='#'>klok</a></td>
<td align="left"><a href='#'>85002</a></td>
</tr>
</table>


is it possible to do it with LISTS?
say every row is a UL?
djbrink
10-27-2005, 08:36 AM
Can you maybe explain why you want to specifically use <ul> lists. how would you like to present the table information? The only reason I can think of is maybe the table borders bother you.

D Brink
ofir
10-27-2005, 08:58 AM
hey djbrink.. no offence but you should look into the new standarts.
<table> is dead !!
The Little Guy
10-27-2005, 09:48 AM
<ul>
<li>Name<input type="radio" name="id"/></li>
<li>City<a href="linkhere.html">balaaha</a></li>
<li>Zip</li>
</ul>

I think this is what your looking for
ray326
10-27-2005, 04:55 PM
hey djbrink.. no offence but you should look into the new standarts.
<table> is dead !!No offence but you're presenting tabular data and a table is the right way to do it. The main thing I see semantically wrong with what you have is the first row is header info so it should have <th> cells instead of <td> cells.
Siddan
10-27-2005, 05:23 PM
well for fun I made this code....
There is 1 bug that I know of... or 1˝ hehe

(1: the Name field doesn´t expand so you have to set the ul´s and li´s to an exakt fixed width so it won´t collapse if the window is smaller.

(1˝: too big css code for this simple table

perhaps someone else could make it better with some effort

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<style type="text/css">
ul {
margin:0;
padding:0;
width:435px;
display:block;
clear:both;
list-style:none;
}
li {
float:left;
margin:0 auto;
height:30px;
line-height:150%;
border-top:1px solid black;
border-left:1px solid black;
padding-left:5px
}

li input {margin:4px 0 0 12px}
li.first, li.choose {width:50px;}
li.second, li.name {width:208px}
li.third, li.city {width:62px}
li.fourth, li.zip{width:90px}

li.end {border-right:1px solid black}
li.botend {border-bottom:1px solid black;}

ul.last {margin-bottom:30px;}

li.choose, li.name, li.city, li.zip {background:#CAE6FE;}
li.even {background:#E3E3E3}

</style>
</head>

<body>
<ul id="head">
<li class="choose">Choose</li>
<li class="name">Name</li>
<li class="city">City</li>
<li class="zip end">Zip</li>
</ul>
<ul class="column">
<li class="first"><input type="radio" name="id"></li>
<li class="second"><a href='#'>namenamename</a></li>
<li class="third"><a href='#'>klok</a></li>
<li class="fourth end"><a href='#'>85002</a></li>
</ul>
<ul class="column">
<li class="first even"><input type="radio" name="id"></li>
<li class="second even"><a href='#'>blahblahblahblah</a></li>
<li class="third even"><a href='#'>lipol</a></li>
<li class="fourth end even"><a href='#'>80028</a></li>
</ul>
<ul class="column last">
<li class="first botend"><input type="radio" name="id"></li>
<li class="second botend"><a href='#'>namenamename</a></li>
<li class="third botend"><a href='#'>klok</a></li>
<li class="fourth botend end"><a href='#'>85002</a></li>
</ul>

</body>
</html>