Gokul's Blog

Tabless design (HTML)

Leave a comment

Here is an example of using tables. This is the output from photoshop after slicing up an image. Below it will be the same thing after I converted to tableless design.

Code:

<table id="Table_01" width="248" height="355" border="0" cellpadding="0" cellspacing="0">
   <tr>
      <td colspan="6">
         <img src="images/calcTables_01.jpg" width="248" height="22" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="images/calcTables_02.jpg" width="20" height="50" alt=""></td>
      <td colspan="4">
         <img src="images/calcTables_03.jpg" width="205" height="50" alt=""></td>
      <td>
         <img src="images/calcTables_04.jpg" width="23" height="50" alt=""></td>
   </tr>
   <tr>
      <td colspan="6">
         <img src="images/calcTables_05.jpg" width="248" height="22" alt=""></td>
   </tr>
   <tr>
      <td colspan="2">
         <img src="images/calcTables_06.jpg" width="30" height="68" alt=""></td>
      <td>
         <img src="images/calcTables_07.jpg" width="184" height="68" alt=""></td>
      <td>
         <img src="images/calcTables_08.jpg" width="1" height="68" alt=""></td>
      <td colspan="2">
         <img src="images/calcTables_09.jpg" width="33" height="68" alt=""></td>
   </tr>
   <tr>
      <td colspan="2">
         <img src="images/calcTables_10.jpg" width="30" height="64" alt=""></td>
      <td colspan="2">
         <img src="images/calcTables_11.jpg" width="185" height="64" alt=""></td>
      <td colspan="2">
         <img src="images/calcTables_12.jpg" width="33" height="64" alt=""></td>
   </tr>
   <tr>
      <td colspan="2">
         <img src="images/calcTables_13.jpg" width="30" height="74" alt=""></td>
      <td colspan="2">
         <img src="images/calcTables_14.jpg" width="185" height="74" alt=""></td>
      <td colspan="2">
         <img src="images/calcTables_15.jpg" width="33" height="74" alt=""></td>
   </tr>
   <tr>
      <td colspan="6">
         <img src="images/calcTables_16.jpg" width="248" height="54" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="images/spacer.gif" width="20" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="10" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="184" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="1" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="10" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="23" height="1" alt=""></td>
   </tr>
</table>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

Going tableless means less code in your html. It is easier for text based browsers to understand and puts all the definitions in an external style sheet. This means removing the need to edit your html later on. Using this method allows you to edit your style sheet instead.

Code:

<div id="calculatorWrapper">
   <div id="calcTop"></div>
    <div id="calc02"></div><div id="calc03"></div><div id="calc04"></div>
    <div id="calc05"></div>
   <div class="calcBtn1"></div><div class="calcBtn2"></div><div class="calcBtn3"></div>
    <div class="calcBtn1"></div><div class="calcBtn2"></div><div class="calcBtn3"></div>
    <div class="calcBtn1"></div><div class="calcBtn2"></div><div class="calcBtn3"></div>
   <div id="calcBottom"></div>
</div>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Now isn’t that much nicer.

Here is the css required.

Code:

#calculatorWrapper {
   width:248px;
   height:319px;
   display:block;
   position:relative;
   margin-left:auto;
   margin-right:auto;
   }
#calcTop {
   background-image:url(../images/calculator_01.jpg);
   width:248px;
   height:22px;
   }
#calc02 {
   background-image:url(../images/calculator_02.jpg);
   width:20px;
   height:50px;
   float:left;
   }
#calc03 {
   background-image:url(../images/calculator_03.jpg);
   width:205px;
   height:50px;
   float:left;
   }
#calc04 {
   background-image:url(../images/calculator_04.jpg);
   width:23px;
   height:50px;
   float:left;
   }
#calc05 {
   clear:left;
   background-image:url(../images/calculator_05.jpg);
   width:248px;
   height:22px;
   }
.calcBtn1 {
   float:left;
   background-image:url(../images/calculator_10.jpg);
   width:30px;
   height:64px;
   }
.calcBtn2 {
   float:left;
   background-image:url(../images/calculator_11.jpg);
   width:185px;
   height:64px;
   }
.calcBtn3 {
   float:left;
   background-image:url(../images/calculator_12.jpg);
   width:33px;
   height:64px;
   }
#calcBottom {
   clear:left;
   background-image:url(../images/calculator_16.jpg);
   width:248px;
   height:54px;
   }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

You can see this code live in action here. I’ve used it to for designing a form. And inserted form elements in between the div tags.

http://laweightlosssurgery.com/bmic.html

Article Source

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

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