« Migrating From HTML and Tables to XHTML/CSS: Removing 1-Column Tables | Main | A List Apart 2007 Web Design Survey »

Migrating From HTML and Tables to XHTML/CSS: Replacing 1-Column Tables with Lists

As a part of my series on migrating from HTML and tables to XHTML/CSS, this post covers one of the hacks that I commonly relied on: using tables to create lists with images instead of bullets. Read on for details.

I'll start off with the code before I converted it. Note that I'm using table columns to keep my "bullets" (in this case, a · character) left-aligned and my content right-aligned. Yes, I know, it's shamefully hard to read in all uppercase letters.

<TABLE WIDTH="190" BGCOLOR="#DCE6ED" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD>  </TD>
<TD CLASS="content">
<HR WIDTH="100%" SIZE="1" NOSHADE COLOR="#9999CC">
<B CLASS="content"><IMG SRC="/images/sections/quiz_icon_xsm.gif" WIDTH="16" HEIGHT="16" ALT="" BORDER="0" ALIGN="left" STYLE="margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 1px;">Quizzes:<BR>
Test your smarts!</B><BR>
<IMG SRC="/images/transparent.gif" WIDTH="1" HEIGHT="2" BORDER="0"><BR>
<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="2"><CFOUTPUT QUERY="qQuiz">
<TR>
<TD>· </TD><TD><A HREF="/quiz.cfm?quiz=1" TARGET="_blank" class="contentBlue">Quiz 1</A></TD>
</TR>
<TR>
<TD>· </TD><TD><A HREF="/quiz.cfm?quiz=2" TARGET="_blank" class="contentBlue">Quiz 2</A></TD>
</TR>
</TABLE>
<BR>
<A HREF="/display/index.cfm" TARGET="_blank" class="contentBlue">Quizzes for your company!</A><BR>
<BR></TD>
<TD>  </TD>
</TR>
</TABLE>

First, I used two divs to set the color and the margins that I needed:

<div class="content blue" style="width: 190px;">

	<div style="width: 174px; margin-left: 8px; border-top: 1px solid #9999CC; padding: 8px 0px 0px 0px;">

	</div>

</div>

Next, after a little reading on Taming Lists, I just styled the quizzes as an unordered list with no bullets. I kept the &middot; inside the <li> and set the text-indent to a negative number to let it hang to the left of the rest of each entry. Note how all of the code is now lowercase, all tags are closed, and how the first div uses two classes at once.

<div class="content blue" style="width: 190px;">

	<div style="width: 174px; margin-left: 8px; border-top: 1px solid #9999CC; padding: 8px 0px 0px 0px;">
	
		<strong class="content"><img src="/images/sections/quiz_icon_xsm.gif" width="16" height="16" alt="" border="0" align="left" style="margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 1px;" />Quizzes:<br />
		Test your smarts!</strong><br />
		<ul style="list-style: none; margin: 2 3 0 0; padding-left: 1em; text-indent: -0.8em;">
		<li style="padding-top: 4px;">&middot; <a href="/quiz.cfm?quiz=1" target="_blank" class="contentBlue">#Quiz 1</a></li>
		<li style="padding-top: 4px;">&middot; <a href="/quiz.cfm?quiz=2" target="_blank" class="contentBlue">#Quiz 2</a></li>
		</ul>
		<br />
		<a href="/aboutus/index.cfm" target="_blank" class="contentBlue" STYLE="text-decoration: none;">Quizzes for your company!</A>

	</div>

</div>

Comments (1)

In our previous section, we covered some hardware upgrades for your
netbook. Glyph of Scourge Strike Your Scourge Strike has a 25% chance
to cause Blood Plague and Frost Fever. The Jinxed Hoodoo Kilt and the Jinxed
Hoodoo Skin is some of the best gear that a Moonkin or Restoration druid can hope to get.

Post a comment