1. Home
  2. Forums Index
  3. Browser Side / CSS 1:08 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

veteran needs help updating old school skills

I have to dive in to CSS and divs after all..

         

SpiralDreams

7:39 pm on Jan 5, 2012 (gmt 0)

10+ Year Member



Hello,
I rarely use forums like this, but have had luck with this one in the past. I was glad to see it still around. Anyway, I have been in web design and graphic design for a LONG time now. I knew my skills were getting outdated. I have recently started developing mainly for WordPress and have been hacking other peoples CSS & PHP. I have no real issues with that. But I develop mainly in shtml utilizing SSI, nested tables for accurate layout and CSS for the look and feel of text, mainly. I will also use CSS snippets for effects, menus, positioning, etc. Plus, whatever code (PHP, DHTML, CGI - etc.) I may need for a function.

BUT, yesterday, the PHP guy had my client convinced that nested tables would ruin his chances of being found by search engines (bull hockey that has been thoroughly debunked) and would cause his site to load slower (microseconds if anything I assured the client). I KNOW these are myths, but the client has concerns. Then I got the "can't you lay everything out in CSS and divs?

That's the problem. I wouldn't know how to put everything where it goes, reliably, with only one or NO tables/cells.

Considering the complexity of the sites I normally develop (visually anyway) wouldn't it take forever to code each div, style it and then test it rather than just laying out the tables and tweaking the code? FYI this site is a fixed width, three-column layout with a header and footer.

Anyway, please enlighten me as to how you might lay out this type of site using pure CSS and DIV's? I would actually love to learn how to do that, but I just don't see where to start.

[edited by: alt131 at 8:16 pm (utc) on Jan 6, 2012]
[edit reason] Thread Tidy [/edit]

SpiralDreams

9:17 pm on Jan 6, 2012 (gmt 0)

10+ Year Member



By the way, the above post was very kindly edited by the moderator to bring me up to speed on forum rules I was unaware of. I had posted a link to an example but will instead post some representative code of the page I am working on.

FYI - I am NOT looking for anyone to critique or rewrite my code. I am simply wondering, in very general terms, how you might approach a page like this. I am using the nested tables to hold expandable graphic tables in place and control where everything lies, perfectly. From the code below, how might I, in theory, achieve the same results? Oh, and I cannot change the layout more than a smidge due to the clients wishes.
Thanks in advance for any insight. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<!--- LINK TO STYLESHEET - CSS --->
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body topmargin="11" leftmargin="0" rightmargin="0" bottommargin="0" background="images/image.jpg">

<!--- MAIN TABLE - WHOLE PAGE ---->
<div align="center">
<!--- SUN GUARANTEE GRAPHIC - LAYERED DIV --->
<div id="containbadge">
<div id="badge" style="top: 10px;">
<img src="images/resources/image.png" width="277" height="276" alt="alt text" />
</div>
</div>
<!--- END SUN GRAPHIC --->
<table border="0" width="813" cellspacing="0" cellpadding="0">
<!--- BEGIN TOPNAVBAR--->
<tr>
<!---TOPNAV GRAPHIC--->
<td background="images/main_tables/main_top.png" width="813">
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="43">
<tr>
<!---BEGIN EDITABLE AREA - TOPNAV---->
<td width="21">&nbsp;</td>
<td width="381">
<p align="left">HOME </p>
</td>
<td>
<p align="right">LOGIN </p>
</td>
<td width="18">&nbsp;</td>
<!----END EDITABLE AREA--->
</tr>
</table>
</div>
</td>
</tr>
<!--- End TOPNAVBAR--->
<!---LOGO DISPLAY AREA--->
<tr>
<td>
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0" background="images/main_tables/main_fill.png">
<tr>
<td>
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="113">
<tr>
<td width="22">&nbsp;</td>
<td>
<!----LOGO GRAPHIC--->
<!---TO CHANGE LOGO GRAPHIC - UPLOAD A NEW IMAGE TO IMAGES FOLDER AND CHANGE NAME BELOW BETWEEN QUOTE MARKS FOR src--->&nbsp;<!---END LOGO GRAPHIC--->LOGO 
HERE</td>
<td>&nbsp;</td>
<td width="25">&nbsp;</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
<!---END LOGO DISPLAY AREA--->
<!---BEGIN MIDNAVBAR--->
<tr>
<td background="images/main_tables/main_bar.png" height="44">
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="43">
<tr>
<td width="20" rowspan="2">&nbsp;</td>
<!---BEGIN EDITABLE AREA--->
<td width="190" valign="bottom" height="32">
<p class="small">I am an:
<!--- DROPDOWN 1 --->
<select size="1" name="D1" style="font-size: 10pt">
<!--- BEGIN DROPDOWN OPTIONS - TO ADD MORE JUST COPY AND PASTE BELOW LINE AND CHANGE WORDING BETWEEN OPTION TAGS AS DESIRED --->
<option>TEST</option>
<option>Other</option>
<!--- END DROPDOWN OPTIONS ---></select></p>
</td>
<td width="190" valign="bottom" height="32">
<p class="small">Licensed in:
<!---DROPDOWN 2---->
<select size="1" name="D2" style="font-size: 10pt">
<!--- BEGIN DROPDOWN OPTIONS - TO ADD MORE JUST COPY AND PASTE BELOW LINE AND CHANGE WORDING BETWEEN OPTION TAGS AS DESIRED --->
<option>TEST</option>
<!--- END DROPDOWN OPTIONS ---></select></p>
</td>
<!---END EDITABLE AREA--->
<td valign="middle" rowspan="2">&nbsp;</td>
<td width="19" rowspan="2">&nbsp;</td>
</tr>
<tr>
<td width="380" colspan="2"></td>
</tr>
</table>
</div>
</td>
</tr>
<!---END MIDNAVBAR--->
<tr>
<td>
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0" background="images/main_tables/main_fill.png">
<tr>
<td>
<div align="center">
<!--- BEGIN SALES BANNER --->
<table border="0" width="780" cellspacing="0" cellpadding="0" background="images/sales_banner/banner.png" height="152">
<tr>
<td>
<div align="center">
<table border="0" width="747" cellspacing="0" cellpadding="0" height="120">
<tr>
<td width="210">&nbsp;</td>
<td width="331">
<!--- ENGINEERING ETHICS COPY --->
<p align="center">
<font color="#C96532"><b>
<font face="Times New Roman" size="4">
TEST</font></b></font></p>
<p align="center"><b>
<font face="Times New Roman" size="4" color="#C96532">
TEST</font></b></p>
<p align="center"><b>
<font face="Times New Roman" size="4" color="#C96532">
TEST</font></b><a href="page.shtml">
</a></p>
</td>
<td>&nbsp;</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<!--- END SALES BANNER ---></div>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0" background="images/main_tables/main_fill.png">
<tr>
<td>
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="188" valign="top">
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="19" valign="top">&nbsp;</td>
<td valign="top">
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td background="images/main_tables/SUBTOP.png" width="171" height="46">
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="46">
<tr>
<td width="41" rowspan="2">&nbsp;</td>
<td valign="middle">
<p class="smallmenu">
<!--- TITLE - FEATURED --->
TITLE</p>
</td>
</tr>
<tr>
<td valign="middle" height="4">
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td background="images/main_tables/SUBFILL.png">
<div align="center" id="menulist">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="19">&nbsp;</td>
<td>
<ul>
<!--- BEGIN LINK LISTING --->
<li>
<a href="http://www.example.com">
LINK</a></li>
<li>
LINK</li>
<li>
LINK</li>
<li>
LINK</li>
<li>
LINK</li>
<!--- END LINK LISTING --->
</li>
</ul>
</td>
<td width="18">&nbsp;</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td width="171" height="46" background="images/main_tables/SUBMID.png">
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="46">
<tr>
<td width="40" rowspan="2">&nbsp;</td>
<td>
<p class="smallmenu">
<!--- TITLE - GUARANTEED --->
TITLE
<!--- END TITLE --->
</p>
</td>
</tr>
<tr>
<td height="4">
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td background="images/main_tables/SUBFILL.png">
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="19">&nbsp;</td>
<td>
<p>LORUM 
IPSUM DOLOR.
<!--- END COPY --->
</p>
</td>
<td width="19">&nbsp;</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td background="images/main_tables/SUBMID.png" width="171" height="46">
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="46">
<tr>
<td width="39" rowspan="2">&nbsp;</td>
<td height="38">
<p class="smallmenu">
<!--- TITLE - COMING SOON --->
TITLE
<!--- END TITLE --->
</p>
</td>
</tr>
<tr>
<td height="4">
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td background="images/main_tables/SUBFILL.png">
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="19">&nbsp;</td>
<td>
<p>
<!--- BEGIN COMING SOON COPY --->
THINGY
</p>
</td>
<td width="19">&nbsp;</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<img border="0" src="images/main_tables/SUBBOT.png" width="171" height="13"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</td>
<td valign="top">
<div align="center">
<table border="0" width="433" cellspacing="0" cellpadding="0">
<tr>
<!--- TOP OF MIDDLE TABLE --->
<td align="center" background="images/main_tables/midtop.png" width="433" height="17">
</td>
<!--- END TOP --->
</tr>
<tr>
<!--- MIDDLE OF MIDDLE TABLE --->
<td align="center" background="images/main_tables/midfill.png">
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="13">&nbsp;</td>
<td>
<!---Paragraph One IMAGE--->
<img border="0" src="images/resources/image.png" width="92" height="147" align="left">
<!---End Paragraph One IMAGE--->
<!---Paragraph One - Main body--->
<p>Sed ut perspiciatis
</p>
<!---End Paragraph One--->
<!---Paragraph two IMAGE--->
<img border="0" src="images/resources/image.png" width="150" height="123" align="left">
<!---End Paragraph two IMAGE--->
<!--Paragraph two - Main body--->
<p>Sed ut perspiciatis 
  </p>
<!---End Paragraph Two--->
</td>
<td width="17">&nbsp;</td>
</tr>
</table>
</div>
</td>
</tr>
<!--- END MIDDLE OF MIDDLE TABLE --->
<tr>
<!--- BOTTOM OF MIDDLE TABLE --->
<td align="center" background="images/main_tables/midbot.png" width="433" height="22">
</td>
<!--- END BOTTOM --->
</tr>
</table>
</div>
</td>
<td width="184" valign="top">
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td background="images/main_tables/SUBTOP.png" width="171" height="46">
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="46">
<tr>
<td width="39" rowspan="2">&nbsp;</td>
<td>
<p class="smallmenu">
<!--- TITLE - TEACH AND EARN --->
TITLE
<!--- END TITLE --->
</p>
</td>
</tr>
<tr>
<td height="4">
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td background="images/main_tables/SUBFILL.png">
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="18">&nbsp;</td>
<td>
<p>
<!--- BEGIN TEACH AND EARN COPY --->
Text</p>
</td>
<td width="19">&nbsp;</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td width="171" height="46" background="images/main_tables/SUBMID.png">
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="46">
<tr>
<td width="38" rowspan="2">&nbsp;</td>
<td>
<p class="smallmenu">
TITLE
<!--- END TITLE --->
</p>
</td>
</tr>
<tr>
<td height="4">
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td background="images/main_tables/SUBFILL.png">
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="18">&nbsp;</td>
<td>
<p align="center">
<!--- BEGIN SOCIAL MEDIA IMAGES AND LINKS --->
<img border="0" src="images/Social_icons/googleplus.png" width="25" height="25">
<img border="0" src="images/Social_icons/linkdin.png" width="25" height="25">
<img border="0" src="images/Social_icons/twitter.png" width="25" height="25">
<img border="0" src="images/Social_icons/facebook.png" width="25" height="25">
<!--- END SOCIAL MEDIA CONTENT --->
</p>
</td>
<td width="19">&nbsp;</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td background="images/main_tables/SUBMID.png" width="171" height="46">
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="46">
<tr>
<td width="38" rowspan="2">&nbsp;</td>
<td>
<p class="smallmenu">
<!--- TITLE - STATES --->
TITLE</p>
</td>
</tr>
<tr>
<td height="4">
</td>
</tr>
</table>
</div>
</td>
</tr>
<!---BEGIN STATES BOX--->
<tr>
<td background="images/main_tables/SUBFILL.png">
<div align="center">
<table border="0" width="100%" cellspacing="1" cellpadding="0">
<tr>
<td width="14">&nbsp;</td>
<td>
<!---STATE DROPDOWN - YOU WILL HAVE TO CHANGE THE FORM CODING--->
<form>
<p align="center">
<select size="10" name="STATES">
<option>
Alabama
</option>
</select></p>
</form>
</td>
<td width="16">&nbsp;</td>
</tr>
</table>
</div>
</td>
</tr>
<!---END STATES BOX--->
<tr>
<td>
<img border="0" src="images/main_tables/SUBBOT.png" width="171" height="13"></td>
</tr>
</table>
</td>
<td width="16">&nbsp;</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td background="images/main_tables/main_footer.png" height="95">
<table border="0" width="100%" cellspacing="10" cellpadding="0" height="100%">
<tr>
<td valign="top" style="height: 37px">
<p align="center" class="footer1">
<!--- BEGIN TOP FOOTER TEXT - COPYRIGHT NOTICE --->ŠANONYMOUS</p>
<p align="center" class="footerlink">
<!--- BEGIN FOOTER LINKS ---><a href="index.shtml">HOME </a>&nbsp;&nbsp; 
CONTACT US&nbsp;&nbsp;&nbsp; ABOUT US&nbsp;&nbsp;&nbsp; PRIVACY 
POLICY <br>
FAQ&nbsp;&nbsp;&nbsp; TERMS OF USE&nbsp;&nbsp;&nbsp; LICENSE 
REQUIREMENTS&nbsp;&nbsp;
<!--- END FOOTER LINKS ---></p>
</font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
</div>

</body>

</html>

[edited by: SpiralDreams at 9:25 pm (utc) on Jan 6, 2012]

SpiralDreams

9:19 pm on Jan 6, 2012 (gmt 0)

10+ Year Member



Oh, and I am aware the the form elements do not work and so on. This is merely a dummy page.

koan

11:16 pm on Jan 6, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I had to do that transition years ago and it can get a bit frustrating at first but it's necessary and I'm glad I did. You just learn as you go.. maybe don't charge clients for all that time while you're learning. One fundamental concept if you're used to thinking in terms of columns (with tables) is using floats for divs. Say you have a 3 columns layout with a table. You can replace it with a 3 columns layout with div like this:

<div style="float: left; width: 200px">COLUMN #1</div>
<div style="float: left; width: 400px">COLUMN #2</div>
<div style="float: left; width: 200px">COLUMN #3</div>

You also need to add a "clearer" so that anything after those 3 columns are added in the normal flow of elements on the page.

<div style="clear: both;"></div>

Of course, all this CSS code should use classes and IDs in your CSS file instead for easier management and cleaner html page. You can use percentages also instead of fixed pixel width.

lucy24

2:22 am on Jan 7, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



If you want to venture into CSS one toe at a time, why not start with your existing code? Lines like this

<table border="0" width="433" cellspacing="0" cellpadding="0">
or
<table border="0" width="100%" cellspacing="0" cellpadding="0">

can be expressed as

(in CSS)

table {border: none; border-collapse: collapse; margin: 0;}
td {padding: 0;}
img {border: none; text-decoration: none; margin: 0; padding: 0;}

(in HTML)

<table>
<tr>
<td>
<img src = "blahblah" width = "number" height = "number" alt = "blahblah">
</td>
</tr>
</table>

See how much cleaner it looks? And you haven't even changed anything yet :)

rocknbil

4:04 pm on Jan 7, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



in very general terms, how you might approach a page like this. I am using the nested tables to hold expandable graphic tables in place and control where everything lies, perfectly.


Lies perfectly - visually. The second step in moving forward is that "visually" is only part of the puzzle. Details on that and part one below . . .

That being said,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Start by using a full valid doctype [webmasterworld.com] and validating your code [validator.w3.org]. This is critical to making CSS and table-less layouts cross browser compatible. If you stick to this, it will cut out at least 90% of your cross browser problems.

Visualize your "outer table cells" as containers, without tables. Example, this conversion is equivalent

<table>
<tr>
<td width="33%">33% on the left</td>
<td width="66%">66% on the right</td>
</tr>
</table>

<div id="container">
<div id="left-section"> 33% on the left</div>
<div id="right-section"> 66% on the right</div>
</div>

One solution would be to float both the inner sections left and assign them widths. That's really the rub - there are MANY ways to solve the above, the float is my preferred way because I seem to be able to do it reliably and with the least amount of code.

In practical application your TOPNAV table could be as simple as

<div id="topnav">
<p id="home-top">HOME </p>
<p id="login-top">LOGIN</p>
</div>

#topnav { width: 100%; }
#topnav p { margin:0; padding:0; }
#home-top {float:left; width: 381px; }
#home-top {float:right; width: 600px; } /* or whatever */

Some tools to get you started,

Don't get "div-itis". Part of the whole idea lies in semantics (described a little more below). Divs (AND spans) are generic containers to divide page sections and should be used only when you don't want to assign semantics to the container itself. Before typing "<div>" one more time, ask yourself: is there a semantic container that describes this content better? Paragraph, head, list? Using my previous example, let's say the left part is a side navigation: 


<div id="container"> 
 <ul id="left-section"> <!-- 33% --> 
 <li>Item one</li> 
 <li>Item two</li> 
 <li>Item three</li> 
 </ul> 
 <div id="right-section"> 
 <h1>I am the main page heading</h1> 
 <p>I am a paragraph, and the p tag announces to the  
 reading devices that is what I am</p> 
 </div> <!-- 66% --> 
</div>


I see so many layouts that are terminal cases of div-itis - and the good part is, if you stick to this principle, it becomes easier to debug. Look how much easier it is to find </p> instead of a sea of </div>'s.

Work inward. Look at each outer section first, then look at your inner sections on their own. Using nested tables as an example, you can extract one of those nested tables, put it in a document by itself, convert it to semantic containers, experiment with the CSS, then add it to your parent layout.

Don't give up, and don't try to do it all at once. Apply a little bit every day. I didn't look at your layout long because you said you don't want it critiqued or solved, but begin with one question:

How can I eliminate THIS table today?

On days you're sick of slaying tables, you can expand your skillset in other ways:

Today's task: eliminate invalid attributes, like background in table cells, valign, align, in table cells and images, <center>, and other invalid HTML 4 code, and make sure I'm using the required alt in images.

Just one. You can't do it all in a day or two. Work on a site and eliminate one table at a time, see work inward above. Begin with the outer table.

Eliminate page markup used to represent spacing. &nbsp; and <br> are going to change if your visitor has different text size settings. They aren't even needed and can be emulated using margins and padding.

Take the time to experiment. I know, we need to get this thing done, pay the bills, answer to clients who want it yesterday, not to mention eating and sleeping at some point, but you can't do something like this on the fly and wing it on a client project. This can absolutely kill your reputation. You need to dedicate at least an hour a day (which you KNOW will grow into two or three) to just EXPERIMENTING. Maybe you tried to eliminate a table today and couldn't figure it out - use this learning time to beat that problem into submission. :-)

One last advice - this one may smart a bit but is the best advice, if you can hear it - get past what you know, and look at every criticism as an opportunity to grow. Too often we (I, included, used to do this a lot) address criticism defensively. When you do this, you've already dismissed the "attack" in your mind and are closed to developing your skill set, which is going to make this even harder on you. Recognize these as opportunities, and really listen - many people are glad to share with you and help you along. For example,

and would cause his site to load slower (microseconds if anything I assured the client). I KNOW these are myths, but the client has concerns.


Sorry, they are not. The search engine claim is indeed is false, but it does affect how well a page can index. The first step to moving forward is admitting the possibility that what you know has changed. :-)

A page will load slower in tables because the entire table has to render before it begins displaying content inside it. Second, what does affect S.E.'s and site accessibility is that the semantic meaning of a table is "Here is tabular data" in the same way a <p> means "here is a paragraph." These semantics tell reading devices - including SE's - the nature of the content. Tables are perfectly valid - for tabular data, an intersection of rows and columns. Try "listening" to one of your sites using a screen reader for the blind, it is extremely enlightening.

This conversion will help your sites in ways you may never have thought of - accessibility, usability, page speed, template interchangeability, cross platform compatibility - the list goes on.

And . . .when you reach what you think is the end of the road, still not done. Enter mobile apps. Tables will rarely work well on mobile apps. Table-less layout will get you much closer to that.

If I speak like a recovering table layout addict, it's because I am, thanks to the generosity of the minds on this board. :-)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 1:08 pm May 1, 2026