Tableless layouts by using CSS are very popular in web design nowadays. I also would like to share a simple table approach which uses CSS to render a table like output.
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<InvalidTag http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Table</title>
<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
#myTable {
display: table;
border:1px solid #567;
border-spacing: 5px; /* cellspacing */
background-color: #def;
}
.myRow {
display: table-row;
}
.myCell_200 {
display: table-cell;
width:200px;
padding:10px; /* cellpadding */
border:1px solid #abc;
background-color: #eee;
}
.myCell_150 {
display: table-cell;
width:150px;
padding:10px; /* cellpadding */
border:1px solid #abc;
background-color: #fff;
}
-->
</style>
</head>
<body>
<div id="myTable">
<div class="myRow">
<div class="myCell_200">Test 11</div>
<div class="myCell_150">Test 12</div>
<div class="myCell_150">Test 13</div>
</div>
<div class="myRow">
<div class="myCell_200">Test 21 a long content sample here in order to show how it renders.</div>
<div class="myCell_150">Test 22</div>
<div class="myCell_150">Test 23</div>
</div>
<div class="myRow">
<div class="myCell_200">Test 31</div>
<div class="myCell_150">Test 32</div>
<div class="myCell_150">Test 33</div>
</div>
</div>
</body>
</html>
May 15, 2008 at 1:26 AM Is this any better than a table with <table> and <tr> tags?
May 15, 2008 at 1:41 AM Andrew,
First of all this method is not a replacement for HTML/XHTML table model. This is just another way of rendering an output as tables that we used to. It would be useful while using in languages like XML which have no predefined table elements. The other option is also able to change the structure just by changing the CSS items instead of changing view pages for any kind of display changes. It would be helpful to create a kind of isolation.
As I said this is not a replacement. :)
May 15, 2008 at 9:46 AM I like the solution, only problem is it does not seem to render correctly in IE6 (go figure).
May 15, 2008 at 11:28 AM @Dan, I think it is related with "display: table" support in IE.
You can check out the details here: http://www.quirksmode.org/css/display.html