« Why Don't Scheduled Tasks Always Run As Scheduled? | Main | Migrating From HTML and Tables to XHTML/CSS: Replacing 1-Column Tables with Lists »

Migrating From HTML and Tables to XHTML/CSS: Removing 1-Column Tables

Posted by Tom Mollerus on April 24, 2007 10:11 AM | |

In my first post on migrating from HTML and tables to XHTML/CSS, I wrote that I'd try to document my experiences as I changed my code. Some of the first things I addressed were the low-hanging fruit: switching one- or two-column tables to padded divs. Read on for details.

So I started off with code similar to the following. Note the uppercase tags and the use of spacer gifs (ugh!).

<TABLE WIDTH="100%" BGCOLOR="#DCE6ED" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD ALIGN="right" COLSPAN="3"><IMG SRC="/images/column_heads/featured_faqs.gif" ALT="Featured FAQs" BORDER="0"><BR>
<IMG SRC="/images/transparent.gif" WIDTH="1" HEIGHT="8" BORDER="0"></TD>
</TR>
<TR>
<TD><IMG SRC="/images/transparent.gif" WIDTH="18" HEIGHT="1" BORDER="0"></TD>
<td class="contentSm"><A HREF="/faqs/faq.html">Headline</a><BR>
Teaser text<BR>
<IMG SRC="/images/transparent.gif" WIDTH="1" HEIGHT="7" BORDER="0"><BR>
</td>
<TD><IMG SRC="/images/transparent.gif" WIDTH="8" HEIGHT="1" BORDER="0"></TD>
</TR>
<TR>
<TD><IMG SRC="/images/transparent.gif" WIDTH="18" HEIGHT="1" BORDER="0"></TD>
<td class="contentSm"><A HREF="/faqs/faq.html">Headline</a><BR>
Teaser text<BR>
<IMG SRC="/images/transparent.gif" WIDTH="1" HEIGHT="7" BORDER="0"><BR>
</td>
<TD><IMG SRC="/images/transparent.gif" WIDTH="8" HEIGHT="1" BORDER="0"></TD>
</TR>
<TR>
<TD></TD>
<TD ALIGN="right"><img src="/images/arrowleft.gif" width="15" height="12"><A HREF="#faqs">More Related FAQs</A></TD>
<TD></TD>
</TR>
</TABLE>

The first thing that I changed was to use a div instead of a table. And do you notice that light blue background color I specify for the table? I use that all over the site, and realized that it would be very convenient to specify it as a style.

<div class="blue">
	
</div>

And the graphical header near the top and the link in the footer, both right-aligned? Those can be placed with divs as well.

<div class="blue">
	<div style="text-align: right;">
		<img src="/images/column_heads/featured_faqs.gif" alt="Featured FAQs" border="0" />
	</div>
	<div style="margin-top: 8px; text-align: right;">
		<img src="/images/arrowleft.gif" width="15" height="12"><A HREF="#faqs">More Related FAQs</A>
	</div	
</div>

Now all I need to do is to replace my table rows with an internal div that specifies the correct left and right margin. I also put each headline in its own div so that I can put 7 pixels of space above each of them. Finally, all tags are lower case and are closed, as per the XHTML specs (closed means that <br /> tags have their own slash in them since there's not another closing tag.)The final code is below.

<div class="blue">
	<div style="text-align: right;">
		<img src="/images/column_heads/featured_faqs.gif" alt="Featured FAQs" border="0" />
	</div>
	<div class="contentSm" style="margin: 0px 8px 0px 18px;">
		<div style="margin-top: 7px;">
			<A HREF="/faqs/faq.html">Headline</a><BR>
			Teaser text<br />
		</div>
		<div style="margin-top: 7px;">
			<A HREF="/faqs/faq.html">Headline</a><BR>
			Teaser text<br />
		</div>
	</div>
		<div style="margin-top: 8px; text-align: right;">
			<img src="/images/arrowleft.gif" width="15" height="12"><A HREF="#faqs">More Related FAQs</A>
		</div	
</div>

Comments (2)

viju
March 18, 2008
2:39AM | #

will you pleas post the CSS codes for the above

Tom Mollerus Author Profile Page
March 18, 2008
9:52AM | #

@Viju: Sure, here you go:

.blue {
background-color: #DCE6ED;
}

.contentSm {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10px;
line-height: 13px;
}

Post a comment