johnllao

June 17, 2010

Creating a Table using DIV elements

Filed under: Uncategorized — johnllao @ 6:12 pm

Thanks to the Fluid Grid it gave me an idea on how to create a table using DIV elements in HTML.

First we have to define the following CSS style.

.table {position:relative;}
div.table div.row {display:table; width:100%; border-collapse:collapse;}
div.table div.row div.cell {display: table-cell;}

div.table div.row div.cell {border-left:1px solid #a1b04a; border-bottom:1px solid #a1b04a; background:#f8f9f4;}
div.table div.row div.cell.last {border-right:1px solid #a1b04a;}

div.table div.row.head div.cell {border-top:1px solid #a1b04a; background:#0000ff; color:#ffffff;}
div.table div.row.first div.cell {border-top:1px solid #a1b04a;}
div.table div.row.even div.cell {background:#ffff00;}

To create a table we have to define nested DIVs, similar to the HTML table a parent DIV has to be defined with CSS class “table”

<div class="table" style="width:700px;">
...
</div>

To define a header row child DIV has to be created with CSS class “row head”

<div class="table" style="width:700px;">
  <div class="row head">
  ...
  </div>
</div>

Then for the header cells define another child DIV inside the head DIV with CSS class “cell” and “cell last”.

<div class="table" style="width:700px;">
  <div class="row head">
    <div class="cell" style="width:300px;">
      <strong>Name</strong>
    </div>
    <div class="cell last" style="width:300px;">
      <strong>Team</strong>
    </div>
  </div>
</div

For the content rows simply define a DIV row with a CSS class “row” or “row even” if you wish to have an alternating row colors.

...
<div class="row">
  <div class="cell" style="width:300px;">
    Eric Foo
  </div>
  <div class="cell last" style="width:300px;">
    Red Team
  </div>
 </div>
<div class="row even">
  <div class="cell" style="width:300px;">
    John Smith
  </div>
  <div class="cell last" style="width:300px;">
     Red Team
  </div>
</div>
...

That’s it!

Please check the full example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Grid System</title>
  <style type="text/css">
  .table {position:relative;}
    div.table div.row {display:table; width:100%; border-collapse:collapse;}
    div.table div.row div.cell {display: table-cell;}

    div.table div.row div.cell {border-left:1px solid #a1b04a; border-bottom:1px solid #a1b04a; background:#f8f9f4;}
    div.table div.row div.cell.last {border-right:1px solid #a1b04a;}

    div.table div.row.head div.cell {border-top:1px solid #a1b04a; background:#0000ff; color:#ffffff;}
    div.table div.row.first div.cell {border-top:1px solid #a1b04a;}
    div.table div.row.even div.cell {background:#ffff00;}
  </style>
</head>

<body>
    <div class="table" style="width:700px;">
        <div class="row head">
        <div class="cell" style="width:300px;">
          <strong>Name</strong>
        </div>
        <div class="cell last" style="width:300px;">
          <strong>Team</strong>
        </div>
      </div>
        <div class="row">
        <div class="cell" style="width:300px;">
            Eric Foo
        </div>
        <div class="cell last" style="width:300px;">
            Red Team
        </div>
      </div>
      <div class="row even">
        <div class="cell" style="width:300px;">
            John Smith
        </div>
        <div class="cell last" style="width:300px;">
            Red Team
        </div>
      </div>
      <div class="row">
        <div class="cell" style="width:300px;">
            Fred Stone
        </div>
        <div class="cell last" style="width:300px;">
            Blue Team
        </div>
      </div>
      <div class="row even">
        <div class="cell" style="width:300px;">
            Joey McTire
        </div>
        <div class="cell last" style="width:300px;">
            Green Team
        </div>
      </div>
      <div class="row">
        <div class="cell" style="width:300px;">
            Debbie Alba
        </div>
        <div class="cell last" style="width:300px;">
            Yellow Team
        </div>
      </div>
    </div>
</body>
</html>
About these ads

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

The Shocking Blue Green Theme Blog at WordPress.com.

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: