I tried to obtain a table with many rows and two columns without html <table> tag. If you execute this html file with firefox it goes good as expected, but if you runs it with explorer the final result is completely wrong and unexpected.
In what way I can obtain something like the following both for ff and ie?
And also since I want to obtain a full-compatible page I don’t want to use the css2 display:table bacause various versions of ie and safari don’t support completely this function (see http://www.quirksmode.org/css/display.html).
And if possible I don’t want to change the doctype.
So this is the source html with css code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title></title>
<style>
.list_tab_style {
margin: 0;
padding: 0;
}
.list_tab_style, .list_tab_style li ul {
list-style: none !important;
list-style-type: none !important;
padding: 0;
margin: 0;
}
.list_tab_style li {
padding-top: 1px;
padding-bottom: 1px;
}
* html .list_tab_style li {
margin: 0;
padding: 0;
}
* html .list_tab_style li ul {
margin-top: -7px;
}
.pair {
background-color: #EAF2D3;
border-bottom: 1px solid #D7D7D7;
}
.left {
float: left;
padding: 0;
margin: 0;
display: block;
}
.left a{
font-weight: bold;
}
.right a{
display: block;
padding: 0;
margin: 0;
margin-left: 85px;
}
</style>
</head>
<body>
<ul class="list_tab_style">
<li>
<ul class="pair">
<li class="left">
<a href="#">row 0 col 0</a>
</li>
<li class="right">
<a href="#">row 0 col 1 : this is a long text for obtain word wrap mnbvcxzlkjhgtfrdesaèpoiuytrewq : 1234567890'ìqwertyuiopasdfghjklzxcvbnm,.-</a>
</li>
</ul>
</li>
<li>
<ul class="odd">
<li class="left">
<a href="#">row 1 col 0</a>
</li>
<li class="right">
<a href="#">row 1 col 1 : this is a long text for obtain word wrap mnbvcxzlkjhgtfrdesaèpoiuytrewq : 1234567890'ìqwertyuiopasdfghjklzxcvbnm,.-</a>
</li>
</ul>
</li>
<li>
<ul class="pair">
<li class="left">
<a href="#">row 2 col 0</a>
</li>
<li class="right">
<a href="#">row 2 col 1 : this is a long text for obtain word wrap mnbvcxzlkjhgtfrdesaèpoiuytrewq : 1234567890'ìqwertyuiopasdfghjklzxcvbnm,.-</a>
</li>
</ul>
</li>
<li>
<ul class="odd">
<li class="left">
<a href="#">row 3 col 0</a>
</li>
<li class="right">
<a href="#">row 3 col 1 : this is a long text for obtain word wrap mnbvcxzlkjhgtfrdesaèpoiuytrewq : 1234567890'ìqwertyuiopasdfghjklzxcvbnm,.-</a>
</li>
</ul>
</li>
</ul>
</body>
</html>
What code produces the behaviour seen in your second image ?
I don’t see that effect in the code I gave you as it wraps just like your first image.
So now, the question is:
Is it less laborious for a browser to load all that rows using a html table, or using this last method or also nested divs or other ways?
I think that html tables are more labourious. What do you think about it?
Table are slower on the automatic table layout algorithm because they have to do two passes of the data. You could try the fixed layout algorithm which lays out the table in one pass but for tables with auto widths the UA doesn’t have to use the fixed layout algorithm although I guess it probably will (but don’t know for sure).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
table.test {
[B]table-layout:fixed;[/B]
width:100%;
}
.test th {
width:85px;
}
.test th, .test td {
padding:5px 10px 5px;
}
.test tr {
background:#fcc
}
.test tr.odd {
background:#ffffcc
}
</style>
</head>
<body>
<table class="test" cellspacing="0" cellpadding="0">
<tr>
<th scope="row">row 0 col 0</th>
<td><a href="#">row 0 col 1 : this is a long text for obtain word wrap mnbvcxzlkjhgtfrdesaèpoiuytrewq : 1234567890'ìqwertyuiopasdfghjklzxcvbnm,.-</a></td>
</tr>
<tr class="odd">
<th scope="row">row 0 col 0</th>
<td><a href="#">row 0 col 1 : this is a long text for obtain word wrap mnbvcxzlkjhgtfrdesaèpoiuytrewq : 1234567890'ìqwertyuiopasdfghjklzxcvbnm,.-</a></td>
</tr>
<tr>
<th scope="row">row 0 col 0</th>
<td><a href="#">row 0 col 1 : this is a long text for obtain word wrap mnbvcxzlkjhgtfrdesaèpoiuytrewq : 1234567890'ìqwertyuiopasdfghjklzxcvbnm,.-</a></td>
</tr>
<tr class="odd">
<th scope="row">row 0 col 0</th>
<td><a href="#">row 0 col 1 : this is a long text for obtain word wrap mnbvcxzlkjhgtfrdesaèpoiuytrewq : 1234567890'ìqwertyuiopasdfghjklzxcvbnm,.-</a></td>
</tr>
<tr>
<th scope="row">row 0 col 0</th>
<td><a href="#">row 0 col 1 : this is a long text for obtain word wrap mnbvcxzlkjhgtfrdesaèpoiuytrewq : 1234567890'ìqwertyuiopasdfghjklzxcvbnm,.-</a></td>
</tr>
<tr class="odd">
<th scope="row">row 0 col 0</th>
<td><a href="#">row 0 col 1 : this is a long text for obtain word wrap mnbvcxzlkjhgtfrdesaèpoiuytrewq : 1234567890'ìqwertyuiopasdfghjklzxcvbnm,.-</a></td>
</tr>
<tr>
<th scope="row">row 0 col 0</th>
<td><a href="#">row 0 col 1 : this is a long text for obtain word wrap mnbvcxzlkjhgtfrdesaèpoiuytrewq : 1234567890'ìqwertyuiopasdfghjklzxcvbnm,.-</a></td>
</tr>
<tr class="odd">
<th scope="row">row 0 col 0</th>
<td><a href="#">row 0 col 1 : this is a long text for obtain word wrap mnbvcxzlkjhgtfrdesaèpoiuytrewq : 1234567890'ìqwertyuiopasdfghjklzxcvbnm,.-</a></td>
</tr>
<tr>
<th scope="row">row 0 col 0</th>
<td><a href="#">row 0 col 1 : this is a long text for obtain word wrap mnbvcxzlkjhgtfrdesaèpoiuytrewq : 1234567890'ìqwertyuiopasdfghjklzxcvbnm,.-</a></td>
</tr>
<tr class="odd">
<th scope="row">row 0 col 0</th>
<td><a href="#">row 0 col 1 : this is a long text for obtain word wrap mnbvcxzlkjhgtfrdesaèpoiuytrewq : 1234567890'ìqwertyuiopasdfghjklzxcvbnm,.-</a></td>
</tr>
</table>
</body>
</html>
If it’s a big issue for you and you have time then you could test either method out on your server using your 6000 rows and time the results for each.
many thanks for your suggestions! Yes I use a table, but I have 6000 rows with two columns.
Note that I use table for only this following reason:
I don’t want the long text, contained at the second column, goes to the first column when occurs a new line caused by a word wrap.
(see attachments)
in the first image there’s the ideal situation that I obtained with an html table;
in the second there’s a unexpected and unwanted situation I obtain trying to emulate the html table behaviour.
So now, the question is:
Is it less laborious for a browser to load all that rows using a html table, or using this last method or also nested divs or other ways?
I think that html tables are more labourious. What do you think about it?
The first thing I must get out of the way is that if this data is tabular then you must use a table. No other element is semantically correct for this job.
Therefore assuming this is not tabular data the first thing you need is a valid doctype with uri so that quirks mode isn’t triggered in ie6/7.
Then I would remove the IE specific code and do something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.list_tab_style, .list_tab_style li ul {
list-style: none;
padding: 0;
margin: 0;
}
.list_tab_style li ul{
float:left;
width:100%;
clear:both;
}
.list_tab_style li {
padding-top: 1px;
padding-bottom: 1px;
}
.pair {
background-color: #EAF2D3;
border-bottom: 1px solid #D7D7D7;
}
.left {
float: left;
width:85px;
}
.left a {
font-weight: bold;
}
.right{
margin-left: 85px;
min-height:0;
}
* html .right{height:1%;}
.right a {
display: block;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<ul class="list_tab_style">
<li>
<ul class="pair">
<li class="left"> <a href="#">row 0 col 0</a> </li>
<li class="right"> <a href="#">row 0 col 1 : this is a long text for obtain word wrap mnbvcxzlkjhgtfrdesaèpoiuytrewq : 1234567890'ìqwertyuiopasdfghjklzxcvbnm,.-</a> </li>
</ul>
</li>
<li>
<ul class="odd">
<li class="left"> <a href="#">row 1 col 0</a> </li>
<li class="right"> <a href="#">row 1 col 1 : this is a long text for obtain word wrap mnbvcxzlkjhgtfrdesaèpoiuytrewq : 1234567890'ìqwertyuiopasdfghjklzxcvbnm,.-</a> </li>
</ul>
</li>
<li>
<ul class="pair">
<li class="left"> <a href="#">row 2 col 0</a> </li>
<li class="right"> <a href="#">row 2 col 1 : this is a long text for obtain word wrap mnbvcxzlkjhgtfrdesaèpoiuytrewq : 1234567890'ìqwertyuiopasdfghjklzxcvbnm,.-</a> </li>
</ul>
</li>
<li>
<ul class="odd">
<li class="left"> <a href="#">row 3 col 0</a> </li>
<li class="right"> <a href="#">row 3 col 1 : this is a long text for obtain word wrap mnbvcxzlkjhgtfrdesaèpoiuytrewq : 1234567890'ìqwertyuiopasdfghjklzxcvbnm,.-</a> </li>
</ul>
</li>
</ul>
</body>
</html>
The uls are floated so that they contain the children nicely and the left float needs a width or it will just spread wide.
Yeah, I too would question why you’re trying to re-invent the wheel…? If the data fits a tabular format, then by all means use a table.
There has been a huge misunderstanding for some developers who hear about the movement away from tables. The movement was away from tables as a site layout tool. Tables were never meant to be a ‘design/layout’ feature. A table is basically a grid of data. So… if you have some data you want to put in a grid or tabular format a table is for you!!
Would a definition list be a suitable alternative markup for this particular data?
You’d use the <dt> tag for the first column and the <dd> tag for the second. float the <dt> tags to the left and give them a width and give the <dd> tag a left margin so that it stays to the right of the <dt>s.
