It’s hard to imagine that some web developers are still using table tags for web page layouts. But there are still some out there that do. This article will guide you through how to upgrade a web page that uses table tags and improve it through CSS.
I was recently asked by the Principal Consultant of the firm that I work at to take a recently developed online tool and “make it look better.” These projects are always fun, because making it look better can mean a myriad of different things to different people. I undertook the project with an open mind and was careful not to step on the original developer’s toes. Here’s how it looked when I originally received it.
Looking at the code, the first thing that I noticed was that the entire page was coded in table tags. I reworked the code so that instead of table tags, it used div tags in the CSS. This reduced the amount of code considerably as I will discuss later in this article.
Here’s the code in tables for the row of logos along the bottom of the page, which were ultimately moved to the top:
<table cellspacing=’0′ cellpadding=’0′ border=’0′ align=’center’ style=’padding-top:50px’ width=’900′>
<tr>
<th><a href=’http://www.fscgroup.com’ target=’fsc’><img src=’fsclogo.jpg’ alt=’Freeman, Sullivan’></a></th>
<th><a href=’http://www.lbl.gov’ target=’bkl’><img src=’berkeleylabslogo.jpg’ alt=’Berkeley Labs’></a></th>
<th><a href=’http://www.oe.energy.gov’ target=’doe’><img src=’doelogo.jpg’ alt=’US Department of Energy’></a></th>
</tr>
</table>
</th>
</tr>
</table>
I reworked the table tags into div tags. Here’s the new code for the HTML:
<div id=”logos”>
<a href=’http://www.lbl.gov’ target=’bkl’><img src=’berkeleylabslogo.jpg’ alt=’Berkeley Labs’ align=”left”></a>
<a href=’http://www.oe.energy.gov’ target=’doe’><img src=’doelogo.jpg’ alt=’US Department of Energy’ align=”left” </a>
<a href=’http://www.fscgroup.com’ target=’fsc’><img src=’fsclogo.jpg’ alt=’Freeman, Sullivan’ align=”right”></a>
</div>
Here’s the CSS code:
#logos {
width: 900px;
}
The amount of written code went from 447 characters to 361. That’s a difference of 86 characters, which can add up in the long run as you’ll see later in the article.
The new code for the header was designed in a similar fashion but I used nested div tags to help with the spacing. Here is the HTML for the header that appears below the logos in the final version:
<div id=”header”>
<a href=’http://www.icecalculator.com/’><img src=’powerlines.jpg’ align=”left”></a>
<div id=”text1″>
<h1 align=”left”> <strong>ICE</strong>Calculator.com</h1>
</div>
<div id=”text2″>
<h2 align=”left”> <strong>I</strong>nterruption <strong>C</strong>ost <strong>E</strong>stimate </br> Calculator</h2>
</div>
</div>
Yes, I admit I used hard space code to center the word ‘Calculator,’ but at the time I was under deadline and I had to work quickly. And the end result works.
And here’s the CSS:
#header {
background-color: #3399FF;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 2px solid #0033FF;
padding: 0px;
width: 900px;
float: left;
}
#header #text1 {
width: 440px;
float: left;
}
#header #text2 {
width: 310px;
float: right;
text-align: left;
vertical-align: middle;
}
You’ll notice in the first div there’s vendor-specific code, which means the rounded corners will not appear in Internet Explorer.
The original HTML code for the Main Menu consisted of over 3,000 characters using table tags. In the interest of saving space, I won’t repeat the code here. Instead, I’ll provide the HTML and CSS for the rewritten code. Here’s the HTML for both the side menu and the main window:
<div id=”sidemenu”>
Home</br></br>
<a href=”about.htm”>About the Calculator</a></br></br>
<a href=”disclaimer.htm”>Disclaimer</a></br></br>
<a href=”relevant-reports.htm”>Relevant Reports</a></br></br>
<a href=’mailto:webmaster@fscgroup.com’>Contact Us</a>
</div>
<div id=”mainwindow”>
<a href=”1″>Estimate Interruption Costs</a></br>
Estimate the cost per event, cost per average kW, cost per unserved kWh and the total cost of
unreliability. </br></br>
<a href=”2″>Estimate Value of Reliability Improvement in a Static Environment</a></br>
Estimate the value associated with a given reliability improvement. The environment is “static” because the expected reliability with and without the improvement does not change over time.</br></br>
<a href=”3″>Estimate Value of Reliability Improvement in a Dynamic Environment</a></br>
Estimates the value associated with a given reliability improvement. The environment is “dynamic” because the expected reliability with and without the improvement changes over time based on forecasts of SAIFI, SAIDI and CAIDI.
</div>
And the CSS for the side menu and the main window:
#sidemenu {
background-color: #ffffff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 4px solid #6495ed;
padding: 20px;
width: 160px;
height: 250px;
float: left;
text-align:left;
}
#mainwindow {
background-color: #ffffff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 4px solid #556b2f;
padding: 20px;
width: 630px;
height: 250px;
float: right;
text-align:left;
}
Between the HTML and the CSS, the total character count comes to a little over 1,100. The difference between using tables and div tags here comes close to 2,000 characters, which is a world of difference.
And here’s the final output:
I hope this article provides a useful lesson–using CSS and not table tags will great reduce the amount of code that you have to write. Using CSS also allows you to design your page in a much more modern sense.
