Suppose I have a key,value list containing 6 keys and 6 values. I wish to render these key, value pairs in HTML in a tabular-like fashion (presentation), though they are not necessarily tabular data. So the HTML <table> tag is not recommended for two reasons:
- There should be a separation of presentation from data.
- The
<table>tag should not be used for presentational purposes, only for tabular data.
Anyways, the basic idea is to present these values very simply such as the following:
This is very easily achieved with HTML/CSS and the <table> tag. Sample code is provided:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test 1</title>
<style type="text/css">
table {
width: 300px;
border: solid 1px black;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr><td>Key 1</td><td>Val 1</td><td>Key 4</td><td>Val 4</td></tr>
<tr><td>Key 2</td><td>Val 2</td><td>Key 5</td><td>Val 5</td></tr>
<tr><td>Key 3</td><td>Val 3</td><td>Key 6</td><td>Val 6</td></tr>
</table>
</body>
</html>
Moreover, when the ZOOM, a common feature in many browsers, is set higher, all rows remain intact as the user would intuitively expect:
A common table-less design for such a structure is through the CSS float style and a combination of <ul> and <li> elements.
Sample code is given for this approach:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test 1</title>
<style type="text/css">
.table {
width: 300px;
border: solid 1px black;
}
.table ul {
float: left;
list-style: none;
padding-left: 0px;
}
.table ul li {
width: 75px;
text-align: center;
margin: auto;
}
.clear {
clear: both;
}
/* For modern browsers */
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:1;
}
</style>
</head>
<body>
<div class="table cf">
<ul>
<li>Key 1</li>
<li>Key 2</li>
<li>Key 3</li>
</ul>
<ul>
<li>Val 1</li>
<li>Val 2</li>
<li>Val 3</li>
</ul>
<ul>
<li>Key 4</li>
<li>Key 5</li>
<li>Key 6</li>
</ul>
<ul>
<li>Val 4</li>
<li>Val 5</li>
<li>Val 6</li>
</ul>
</div>
</body>
</html>
It works as prescribed, and in current browsers the ZOOM works, too. (Unless in IE6, the text zooming pushes everything around, it’s a mess).
There are a number of things that make it unintuitive to me:
- More CSS is required, especially for the clearfix
- Ideally for accessibility you would want each Key to be presented in order followed by each Value, here you get 3 keys, 3 values, 3 keys, 3 values. Which makes rendering this option without CSS look pretty strange, whereas the table one without CSS still makes sense.
So basically, the question boils down to: since tables play so well presenting information in a tabular style why try to use <ul> and complicated floats and other CSS trickery to mimic the same style when presenting non-tabular data in a tabular-like fashion? What exactly is the major benefit here from striving to rid <table> from all HTML?
EDIT
I know this is getting a bit off the original question, several answers suggested the use of <dl> to make it more semantically accurate. I agree. So example code for that approach follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test 1</title>
<style type="text/css">
.table {
width: 300px;
border: solid 1px black;
}
.table dl {
float: left;
padding-left: 0px;
width: 150px;
}
.table dl dt, .table dl dd {
width: 75px;
text-align: center;
float: left;
margin: 0px;
}
/* clear fix is below */
/* For modern browsers */
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:1;
}
</style>
</head>
<body>
<div class="table cf">
<dl>
<dt>Key1</dt>
<dd>Value1</dd>
<dt>Key2</dt>
<dd>Value2</dd>
<dt>Key3</dt>
<dd>Value3</dd>
</dl>
<dl>
<dt>Key4</dt>
<dd>Value4</dd>
<dt>Key5</dt>
<dd>Value5</dd>
<dt>Key6</dt>
<dd>Value6</dd>
</dl>
</div>
</body>
</html>
This still gets the same visual effect:
However, what is bothersome is that in order to achieve this two separate definition lists are created. When in reality, it is suppose to just be one list:
<dl>
<dt>Key1</dt>
<dd>Value1</dd>
<dt>Key2</dt>
<dd>Value2</dd>
<dt>Key3</dt>
<dd>Value3</dd>
<dt>Key4</dt>
<dd>Value4</dd>
<dt>Key5</dt>
<dd>Value5</dd>
<dt>Key6</dt>
<dd>Value6</dd>
</dl>
The only reason to include the split was for presentational purposes. How would you get around this one?
Sounds like a prime example of where you should use a
<dl>tag. It’s like<ul>but allows key,value pairs.https://developer.mozilla.org/en/HTML/Element/dl
For example: