I've had two recent encounters regarding the topic of divs and tables. One was about the matter of which was better, divs or tables, and the other about a more esoteric need to have a grid of UI widgets that both horizontally and vertically move in a proportional way to the browser window.
So I figured to do a little catch up and one of the notable things encountered was that there are incredibly useful examples on the net. The second observation I had was that it was next to impossible to avoid the temptation of throwing in some Javascript for the exact behavior that I wanted. But being more interested in wondering what basic xhtml could do in conjunction with CSS led me to need basic or naive examples for experimentation.
So here are two tables I managed to get working that might serve use as input for more detailed examination of what is going on with the markup, styles and browsers. There are some interesting places to go.
Please don't complain about MSIE not working with this. :-)
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style>
html, body
{
margin: 0px;
padding: 0px;
height: 100%;
}
/* global */
.a
{
background-color:#7F7049;
}
.b
{
background-color:#CCA338;
}
.cellContent
{
text-align: center;
background-color:#A9D6B9;
}
/* first table */
.cell1
{
float: left;
width: 25%;
height:25%;
}
/* second table */
.table2
{
width:100%;
display: table
}
.row2
{
display: table-row;
}
.cell2
{
display:table-cell;
padding: 10px;
}
</style>
</head>
<body>
<p>Table using float and clear properties; demonstrates vertical browser resize.</p>
<div class="cell1 a">
<div class="cellContent">CellContent</div>
</div>
<div class="cell1 b">
<div class="cellContent">CellContent</div>
</div>
<div class="cell1 a">
<div class="cellContent">CellContent</div>
</div>
<div class="cell1 b">
<div class="cellContent">CellContent</div>
</div>
<br style="clear:both;"/>
<div class="cell1 b">
<div class="cellContent">CellContent</div>
</div>
<div class="cell1 a">
<div class="cellContent">CellContent</div>
</div>
<div class="cell1 b">
<div class="cellContent">CellContent</div>
</div>
<div class="cell1 a">
<div class="cellContent">CellContent</div>
</div>
<br style="clear:both;"/>
<div class="cell1 a">
<div class="cellContent">CellContent</div>
</div>
<div class="cell1 b">
<div class="cellContent">CellContent</div>
</div>
<div class="cell1 a">
<div class="cellContent">CellContent</div>
</div>
<div class="cell1 b">
<div class="cellContent">CellContent</div>
</div>
<br style="clear:both"/>
<div class="cell1 b">
<div class="cellContent">CellContent</div>
</div>
<div class="cell1 a">
<div class="cellContent">CellContent</div>
</div>
<div class="cell1 b">
<div class="cellContent">CellContent</div>
</div>
<div class="cell1 a">
<div class="cellContent">CellContent</div>
</div>
<br style="clear:both"/>
<p>Table using display property; does not demonstrate vertical browser resize.</p>
<div class="table2">
<div class="row2">
<div class="cell2 a">
<div class="cellContent">CellContent</div>
</div>
<div class="cell2 b">
<div class="cellContent">CellContent</div>
</div>
<div class="cell2 a">
<div class="cellContent">CellContent</div>
</div>
<div class="cell2 b">
<div class="cellContent">CellContent</div>
</div>
</div>
<div class="row2">
<div class="cell2 b">
<div class="cellContent">CellContent</div>
</div>
<div class="cell2 a">
<div class="cellContent">CellContent</div>
</div>
<div class="cell2 b">
<div class="cellContent">CellContent</div>
</div>
<div class="cell2 a">
<div class="cellContent">CellContent</div>
</div>
</div>
<div class="row2">
<div class="cell2 a">
<div class="cellContent">CellContent</div>
</div>
<div class="cell2 b">
<div class="cellContent">CellContent</div>
</div>
<div class="cell2 a">
<div class="cellContent">CellContent</div>
</div>
<div class="cell2 b">
<div class="cellContent">CellContent</div>
</div>
</div>
<div class="row2">
<div class="cell2 b">
<div class="cellContent">CellContent</div>
</div>
<div class="cell2 a">
<div class="cellContent">CellContent</div>
</div>
<div class="cell2 b">
<div class="cellContent">CellContent</div>
</div>
<div class="cell2 a">
<div class="cellContent">CellContent</div>
</div>
</div>
</div>
</body>
</html>
Posts
