CSS Div Tables

Since I now strive and insist that we develop in the latest css and xhtml standards, I came across an issue I wasn't sure how to handle.

It started when I was developing the now uploaded new Added Tech website. Being a drainage company specialising in strom water drains and things like that, there were a considerable amount of test data that needed to be displayed. Now back in the day I would have just insterted in into a table and of we go.

So anyway I put the information in a standard html table but the code just didn't look right. The table tags almost made the code look square so the nice clean feeling was suddenly destroyed. That is when I went in search of a solution.

This is what I came up with, this example has only two columns, but on the same site I have successfully ported it to a ten column table.

div

#table {width: 100%; margin: 0; padding:0;}
div#leftcell {display: td; margin: 0; padding: 2px; width: 18%; float: left; font-weight: bold;}
div#rightcell {display: td; margin: 0; padding: 2px; width: 81%; float: left; clear: right;}

The first line emulates the <table> tag. So there is nothing to special about that. To make each div display as a table cell we needed to set display:td; for those that have become familiar with <td> you would have noticed the similarity. The only difference is of course there is no <tr> or table row tag. Instead the last cell (in this case rightcell) we set clear:right; which then makes anything after that appear underneath hence emulating <tr>.

Lets have a look at the xhtml code:

<div id="table">

<div id="leftcell"><p>First Row Left Cell Text</p></div>
<div id="rightcell"><p>Right Cell Text</p></div>

<div id="leftcell"><p>Second Row Left Cell Text</p></div>
<div id="rightcell"><p>Right Cell Text</p></div>

</div>

This is just a simple two row two column design but you can see that changing certain attributes in the css you can create a more advance form.

That is basically the new form of xhtml and css tables. Nice, clean, so what more could you want.

Tags: Content Management System, CMS, PHP, MySQL, Able Net Design, Web Design, Web-Design, CSS, XHTML, Webdesign, CSS, Press Release, PR, Sphere, seo, online marketing, search engine optimisation, search engine optimization, WebTrends, author, tour, web2.0, web 2.0, Ruby On Rails, ruby-on-rails

WebFast CMS version 2.0
Gain control of your website NOW!.