Transforming a Div into a Table
I've seen a lot of people debating about tables and divs. Some of them are saying to use tables and not divs and vice-versa.
Now, I'm showing you an example of how you can transform a div into a table.
Note that this example doesn't work in IE7 (IE7 is messing it badly), but it works in Firefox just great.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Transforming a Div into a Table</title>
<style type="text/css" media="screen">
div.table { display: table;}
div.row { display: table-row; }
div.cell { display: table-cell; width: 100px; }
div.caption { display: table-caption; caption-side: top; text-align: right; }
div.c1 { text-align: right; background-color: #eeeeee; }
div.c2 { text-align: center; }
div.TableHeaderGroup { display: table-header-group; color: Red; }
div.TableRowGroup { display: table-row-group; font-style: italic; }
div.TableFooterGroup { display: table-footer-group; color: Blue; }
</style>
</head>
<body>
<div class="table">
<div class="caption">Table caption</div>
<div class="TableHeaderGroup">
<div class="row">
<div class="cell c1">Cell 1</div>
<div class="cell c2">Cell 2</div>
</div>
</div>
<div class="TableRowGroup ">
<div class="row">
<div class="cell c1">Cell 1</div>
<div class="cell c2">Cell 2</div>
</div>
</div>
<div class="TableFooterGroup">
<div class="row">
<div class="cell c1">Cell 1</div>
<div class="cell c2">Cell 2</div>
</div>
</div>
</div>
</body>
</html>
No comments:
Post a Comment