Replace HTML tables with CSS DIV

Using HTML tables for layout is not advised by top desigers. However the use of HTML table for presenting tabular tables is ok, but some CSS purists that only want to use DIV commands prefer to replace all HTML tables with CSS DIV.

If you want a simple way to eliminate HTML tables in favor of CSS DIV try something like this:

<div style="float: left; width: 20%;">01</div>
<div style="float: left; width: 20%;">02</div>
<div style="float: left; width: 20%;">03</div>
<div style="float: left; width: 20%;">04</div>
<div style="float: left; width: 20%;">05</div>
<div style="float: left; width: 20%;">06</div>
<div style="float: left; width: 20%;">07</div>
<div style="float: left; width: 20%;">08</div>
<div style="float: left; width: 20%;">09</div>
<div style="float: left; width: 20%;">10</div>
<div style="float: left; width: 20%;">11</div>
<div style="float: left; width: 20%;">12</div>
<div style="float: left; width: 20%;">13</div>
<div style="float: left; width: 20%;">14</div>
<div style="float: left; width: 20%;">15</div>

So if you want five columns simply put the following after every fifth column:

<div style="clear: both"></div>

It should look something like this:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
  • Facebook
  • TwitThis
  • StumbleUpon
  • Digg
  • del.icio.us

, ,