alamin ahmed: a typical geek 2.0

Why CSS and not TABLE.
Honestly, I have no good answer or explanation for you.  In fact I don't think any one does.  There are equal weight of advantage and disadvantage on both approaches.  Many people have tried to be strict and only show CSS benefit, and others did exactly same vice verse.

In this new "Web 2.0" era, CSS is becoming primary tool for designing and shaping web pages.  This is a good thing. CSS is really the best thing that happened to web designing.  Now designers can separate "data" from "presentation".  CSS also gives designers much more flexibilities and controls.  In terms of web standards and future, CSS certainly looks brighter.  So any attempt to migrate your any part of your web site to CSS, is a step toward right direction.  But if you taking your time then you can feel comfort knowing that tech giant like Google still uses TABLEs all over the place.  There is no sign of TABLE being deprecated from HTML, at least not any time soon.

Migrating HTML TABLE to CSS-P
Traditionally, you would use TABLE tag as follows:

  <table>
      <thead>

          <tr>

              <td>Header Column 1</td>

              <td>Header Column 2</td>

          </tr>

      </thead>

      <tbody>

          <tr>

              <td>Body column 1</td>

              <td>body column 2</td>

          </tr>

      </tbody>

  </table>

output:

Header Column 1	Header Column 2
Body Column 1	Body Column 2

My goal is to bring the same structure and coding layout using CSS.  To be precise, here is an example:

  <div class="table">

      <div class="row header">

         <div class="cell">Header Column 1</div>

         <div class="cell">Header Column 2</div>

      </div>

      <div class="row body">

          <div class="cell">Body Column 1</div>

          <div class="cell">Body Column 2</div>

      </div>

  </div>

Looks good right? But we are far from being done.  Let's look at the output first:
output:

As you can see,  It is not at all what we expected.  Everything is showing in a single column in separate rows.  This needs to be fixed in CSS section.

CSS, time to play
If you noted, you know that we have used several classes inside our "div", for example -'table', 'row', 'cell'.  Our next step is to define those classes in css.  In "perfect world" (which basically means geniuses at Redmond complying with W3C web standard), creating table using CSS is extremely easy.  We can be done with the following lines of CSS codes:

  .table {

      display: table; }

  .table .row {

      display: table-row; }

  .table row .cell {

      display: table-cell; }

that's it. Simple right? Unfortunately, above styles are not supported by most browsers including Internet Explorer 6 and 7.  So it's basically useless for now.

CROSS BROWSER APPROACH:
alternative approach is to use 'inline-block' to define 'cell'.  In this case we additionally need to specify width of every cell in HTML code.  It is tedious depending on your table size and structure.  However, this is the only "good" solution we have.  Here is how:

Your CSS code is simple.  All we have to do is declare cell to be 'inline-block'.  This allows you to re-size your cell to any width/height you want.

.table { }

  .table .row { }

  .table .row .cell { display: inline-block; }

now in HTML add additional style to specify width of each column.

<div class="table">

      <div class="row header">

         <span class="cell" style='width:50px;'>Header Column 1</span>

         <span class="cell" style='width:50px;'>Header Column 2</span>

      </div>

      <div class="row body">

          <span class="cell" style='width:50px;'>Body Column 1</span>

          <span class="cell" style='width:50px;'>Body Column 2</span>

      </div>

</div>

This approach works for most browsers.  For IE 6 to work, you have to use "span" instead of "div" for the columns.  Don't ask me why.  This breaks W3C regulation since you are making "span" as a block element.

ANOTHER APPROACH:
Another approach is to use 'float'ing columns.

  .table { }

  .table .row { clear: left; }

  .table .row .column { float: left; }

We still have to specify width of every cell.  In additional, we have to clear the the floating after the last row.  For example:

<div class="table">

      <div class="row header">

         <span class="cell" style='width:50px;'>Header Column 1</span>

         <span class="cell" style='width:50px;'>Header Column 2</span>

      </div>

      <div class="row body">

          <span class="cell" style='width:50px;'>Body Column 1</span>

          <span class="cell" style='width:50px;'>Body Column 2</span>

      </div>

<div style='clear:left;'></div>

</div>

This approach is most widely compatible among browsers.  Your best bet is to chose between 'floating' cell or 'inline-block' cell.


FORMATTING TABLE
power of CSS comes when it's time to format - "presentation".  For example, we can format our headers and table in following css properties:

  .header {

      font-size:18px;

      font-weight:bold; }

  .header .cell {

      line-height:24px; }

  

  .table {

      border:2px solid #ccc; }

  .table .row .cell {

      padding:3px;

      margin:2px; }

EXTENDING TABLE USING MULTIPLE CSS CLASSES:
another power of css is the ability to have multiple classes for an element.  We have already done this on row '<div class='row header'> so 'row' is one class and 'header' is another class.  Browser will join these two classes (append their properties) to render the element.

This technique comes in handy when using different types of tables, such as - table for creating form, table for listing items and so on.  For example:

  <div class='table form'>

      <div class='row'>

         <div class='cell label'>Enter your name:</div>

         <div class='cell input'><input type='text' /></div>

      </div>

  </div>

and css codes

  .form {

      width:500px; }

  .form .row .label {

      width:150px;

      font-weight:bold;

      text-align:right; }

As you can see we have added 'form' class with table and additional 'lable' and 'input' classes with cells.  You can imagine the possibilities when you start working with may different kinds of tables.

Mapping some of table's attributes to CSS properties: