Search

Website Design: HTML Tables vs CSS DIV Layout

Older HTML tables are defined with the <table> tag, and subdivided into rows (with the <tr> tag). Each row may also be divided into data cells (with the <td> tag) which may conceptually represent a column. The tagged cell(s) may contain text, links, images, forms, and even other nested tables. Older HTML tables may additionally be styled using newer CSS as well as embedded formatting.

Newer design philosophy uses CSS styles and DIV formatting to accomplish the same general layout as the older <table> HTML tags. Search Engine Optimization (SEO) ratings are generally enhanced when using the newer CSS/DIV layouts.

Here is an example of a basic three row, four column layout using first <table> and then CSS/DIV layouts: (You may cut & paste the following code into an .html file to see the results.) Please be aware that this is very basic layout and there are many additional options and techniques to add to the functionality presented here.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">;
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>CSS DIV:  3 rows x 4 columns</title>
       <style type="text/css">
          .col1 , .col2 , .col3 , .col4 {float:left; width:25%;}
       </style>
  </head>
  <body>

     <p> Cells formatted using a Table: </p>
<table border="0" width="100%">
  <tr>  
      <td>r1c1</td>   
      <td>r1c2</td>   
      <td>r1c3</td>   
      <td>r1c4</td>
  </tr>
  <tr>   
      <td>r2c1</td>  
      <td>r2c2</td>  
      <td>r2c3</td>   
      <td>r2c4</td>
  </tr>
  <tr>   
      <td>r3c1</td>
     <td>r3c2</td>   
     <td>r3c3</td>   
     <td>r3c4</td>
  </tr>
</table>

<p> Cells formatted using CSS and DIV:</p>

<!-- row #1 -->
            <div class="col1">r1c1</div>
            <div class="col2">r1c2</div>
            <div class="col3">r1c3</div>
            <div class="col4">r1c4</div>
<div style="clear:both;"></div>

<!-- row #2 -->
            <div class="col1">r2c1</div>
            <div class="col2">r2c2</div>
            <div class="col3">r2c3</div>
            <div class="col4">r2c4</div>
<div style="clear:both;"></div>

<!-- row #3 -->
            <div class="col1">r3c1</div>
            <div class="col2">r3c2</div>
            <div class="col3">r3c3</div>
            <div class="col4">r3c4</div>
<div style="clear:both;"></div>

</body>

</html>

$60p/h

Vincent R.

Friendly, Results Oriented, Experienced Learning Coach

20+ hours
if (isMyPost) { }