Help me switch to tableless design

**BRCosmin** · Nov 22, 2007, 13:41

Hello, Robert is my name.
I am a junior designer and I am learning as I go, as most people do.
I have used only tables because they seem to render not so differently cross-browser like the div's do.

I have the example below, which shows of the kind of layout I am working with. I tried to make a div based layout like that one, but with little success. I am a total beginner with Divs and the way they are positioned, so please, if you take on this quest, give me some guidelines.

I would also be pleased to be guided into making this layout tableless, I am not trying to make anyone do my work. I am just overwhelmed of the way the divs are positioned.

So here goes, this is what I want to achieve using Doctype and ONLY Divs:

Code:

<html>
<head>
<style>
*, BODY, HTML { margin:0;padding:0;border:0 }
table {border:1px solid black;}
</style>
</head>
<body>
<table cellpadding='0' cellspacing='0' border='0' bgcolor='#e2e3ff' height='100%' width='100%'>
<tr>
<td height='150'>
<!--Header Divisons-->
<table cellpadding='0' cellspacing='0' border='0' height='100%' width='100%'>
<tr>
<td bgcolor='#ffa8b4' width='25%'>&nbsp;<td>
<td bgcolor='#fca8ff' width='50%'>&nbsp;<td>
<td bgcolor='#a8aeff' width='25%' align='right'>
<table bgcolor='#dddddd' width='200' height='50' cellpadding='0' cellspacing='0' border='0'>
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>
</table>
<td>
</tr>
</table>
</td>
<tr>
<td height="50">
<table cellpadding='0' cellspacing='0' border='0' height='100%' width='100%'>
<tr>
<!--Active Button -->
<td bgcolor='#a8fff4'>&nbsp;<td>
<td bgcolor='#55b6a9'>&nbsp;<td>
<td bgcolor='#16665c'>&nbsp;<td>
<!--Inactive Button -->
<td bgcolor='#8feb93'>&nbsp;<td>
<td bgcolor='#339537'>&nbsp;<td>
<td bgcolor='#136317'>&nbsp;<td>
</tr>
</table>
<td>
</tr>
<tr>
<td height='100%' bgcolor='#ffffff'>

<table cellpadding='0' cellspacing='0' border='0' height='100%' width='100%'>
<tr>
<td bgcolor='#d18a64' width='25%'>&nbsp;<td>
<td bgcolor='#d1c364' width='50%'>&nbsp;<td>
<td bgcolor='#73d164' width='25%'>&nbsp;<td>
</tr>
</table>

<td>
</tr>
<tr>
<!--Footer Menu -->
<td height='50'>
<table cellpadding='0' cellspacing='0' border='0' height='100%' width='100%'>
<tr>
<!--Active Button -->
<td bgcolor='#a8fff4'>&nbsp;<td>
<td bgcolor='#55b6a9'>&nbsp;<td>
<td bgcolor='#16665c'>&nbsp;<td>
<!--Inactive Button -->
<td bgcolor='#8feb93'>&nbsp;<td>
<td bgcolor='#339537'>&nbsp;<td>
<td bgcolor='#136317'>&nbsp;<td>
</tr>
</table>
<td>
</tr>
<tr>
<td height='30' align='center' valign='top' bgcolor='#e0b379'>Footer Text<td>
</tr>
</table>
</body>
</html>

I am grateful to you already, for you've read this topic so far

Thanks,
Robert.

**Dan Schulz** · Nov 22, 2007, 14:17

Hi Rob, the first thing I would do is pick a DOCTYPE and stick with it. A lot of people here prefer HTML 4.01 Strict, but I prefer to use XHTML 1.0 Strict myself (and no, not because it's "cool" or "improved" - I just prefer the syntax and I have no real intention of transferring it to proper XML later on).

I'd also remove the presentational markup (bgcolor for example) from your page and build the page structurally.

What you seem to have here is a three column layout with the header broken into three main areas (with what appears to be the logo on the left and the search form on the right). What's the middle column going to be for in the header?

Also, the menu (the area I believe is below the header) is best marked up as an unordered list, since a menu is just a list of links (that doesn't need to be followed in any given order, and does not define anything whatsoever).

The content and sidebars are going to be tricky, depending on what's in them and how familiar one is with CSS. Many people will place the sidebars before the content and then float them, but I prefer to put the content before the sidebars and use a combination of floats and negative margins instead.

You also have what appears to be a footer based menu as well, which I wouldn't do since it can confuse visitors. However, if the menu will have things like a link to the about page, contact form, and legal information, then I can see it working, but I personally like to put those after the copyright statement.

I do have an old (and I do mean old) example of how something like this COULD look, but the search form would have to be moved up a bit. I'll post the example here, but if you're really interested in making clean, semantic and valid HTML/CSS layouts, I strongly recommend you read "HTML Utopia" by Rachel Andrews (available here on SitePoint). Please note that the example does not match your design 100% (since it was developed independently of yours) and that some modification will be required. Also, some of the CSS code I would no longer recommend as well, but it should serve as a starting point (despite being an advanced example).

Here's the old example (unmodiified) of what I'm talking about.

Code XHTML 1.0 Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Three Column Layout with Horizontal Main Menu Site Template</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta http-equiv="imagetoolbar" content="no" />
	<meta name="keywords" content="Keywords go here" />
	<meta name="description" content="A description of this page goes here." />
	<style type="text/css" media="screen,projection">
 
	* {
		margin:0;
		padding:0;
	}
 
	html, body {
		height: 100%;
	}
 
	body {
		background: #EEE;
		color: #000;
		font: normal 85%/140% tahoma, verdana, arial, helvetica, sans-serif;
	}
 
	#container {
		min-height:100%;							/* squashes an IE 7 bug */
	}
 
	* html #container {
		height:100%;								/* IE 5.x and 6 treat height as min-height */
	}
		#header {
			background: #FCF;
			color: inherit;
			height: 80px;
		}
 
		#wrapper {
			float: left;
			padding-bottom: 32px;
			width: 100%;
		}
			#search-form div {
				background: #CCC;
				color: inherit;
				float: right;
				height: 2em;
			}
				* html #search-form div {
					position: relative;
						right: 3px;
				}
 
				#search-form input {
					float: left;
					margin: 0.25em;
					padding: 0 0.4em;
				}
 
				* html #search-form .submit {
					margin: 1px 0 -1px 0;
					padding: 0;
				}
 
				*:first-child+html #search-form .submit {
					margin-top: 1px;
					padding: 0;
				}
 
			#main-menu {
				background: #CCC;
				color: inherit;
				height: 2em;								/* IE Haslayout - fix double margin */
				line-height: 2em;
				list-style: none;
			}
				#main-menu li {
					display: inline;
					white-space: nowrap;
				}
					#main-menu a {
						background: #0E0;
						color: inherit;
						float: left;
						height: 2em;
						margin-right: 1px;
						padding: 0 0.5em;
						text-decoration: none;
					}
 
					#main-menu a:active,
					#main-menu a:focus,
					#main-menu a:hover {
						background: #FF8;
						color: #000;
					}
 
			h1 {
				background: #FFF;
				clear: both;
				color: inherit;
				font-size: 1.75em;
				line-height: 1.8em;
			}
 
			#content {
				float: left;
				margin-bottom: 0.5em;
				width: 100%;
			}
				#content .section {
					background: #CCF;
					color: inherit;
					font-size: 1em;
					height: 1%;								/* triggers hasLayout in IE 5/6; ignored by other browsers due to lack of height definition in #content */
					margin: 0 14.5em 0 9.85em;
					padding: 0.5em;
				}
					#content h2 {
						background: #CCF;
						border-bottom: 1px solid #000;
						color: inherit;
						margin-bottom: 0.2em;
						padding-bottom: 0.25em;
					}
 
			#sidebar {
				background: #FFD;
				color: inherit;
				float: left;
				margin: 0 0 0.5em -14em;
				padding: 0.5em 0;
				width: 14em;
			}
				#sidebar h2 {
					background: #FFD;
					border-bottom: 1px solid #000;
					color: inherit;
					margin-bottom: 0.2em;
					padding-bottom: 0.25em;
					text-align: center;
				}
 
				#sidebar p {
					padding: 0 0.5em;
				}
 
			#secondary-menu {
				float: left;
				list-style: none;
				margin: 0 0 0.5em -100%;
				width: 9.75em;
			}
				#secondary-menu li {
					float: left;
					padding-bottom: 1px;
				}
					#secondary-menu a {
						background: #FCC;
						color: inherit;
						display: block;
						padding: 0.25em 0.5em;
						text-decoration: none;
						width: 8.25em;					/* IE will mouseover highlight but not let you click link in 'non-text' area unless you set width */
					}
 
					#secondary-menu a:active,
					#secondary-menu a:focus,
					#secondary-menu a:hover {
						background: #FF0;
						color: #000;
					}
 
	#footer {
		background: #8EF;
		color: inherit;
		float: left;
		font: normal 12px/16px tahoma, verdana, arial, helvetica, sans-serif;
		margin-top: -32px;
		padding: 8px 0;
		text-align: center;
		width: 100%;
	}
 
	</style>
</head>
<body>
<div id="container">
	<div id="header">
		<img src="#" width="300" height="80" alt="Web Site Title" />
	</div>
	<div id="wrapper">
		<form action="#" id="search-form" method="get">
			<div>
				<input type="text" id="search" name="search" size="25" /> 
				<input type="submit" class="submit" value="Search" />
			</div>
		</form>
		<ul id="main-menu">
			<li><a href="#">Menu Item</a></li>
			<li><a href="#">Menu Item</a></li>
			<li><a href="#">Menu Item</a></li>
			<li><a href="#">Menu Item</a></li>
			<li><a href="#">Menu Item</a></li>
			<li><a href="#">Menu Item</a></li>
		</ul>
		<h1>Top Level Heading</h1>
		<div id="content">
			<div class="section">
				<h2>Second Level Heading</h2>
				<p>
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla
					auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut,
					lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula,
					eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in
					metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in,
					egestas vel, commodo bibendum, est.
				</p>
			</div>
			<div class="section">
				<h2>Second Level Heading</h2>
				<p>
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla
					auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut,
					lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula,
					eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in
					metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in,
					egestas vel, commodo bibendum, est.
				</p>
			</div>
		</div>
		<div id="sidebar">
			<h2>Sidebar Heading</h2>
			<p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor
				consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla
				scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget
				pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus.
				Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas
				vel, commodo bibendum, est.
			</p>
		</div>
		<ul id="secondary-menu">
			<li><a href="#">Menu Item</a></li>
			<li><a href="#">Menu Item</a></li>
			<li><a href="#">Menu Item</a></li>
			<li><a href="#">Menu Item</a></li>
			<li><a href="#">Menu Item</a></li>
			<li><a href="#">Menu Item</a></li>
			<li><a href="#">Menu Item</a></li>
		</ul>
	</div>
</div>
<div id="footer">
	<p>
		Copyright &copy; 2006-2007, The Monster Under the Bed. All Rights to Scare
		Unsuspecting Children Reserved.
	</p>
</div>
</body>
</html>

**markbrown4** · Nov 22, 2007, 18:10

Hi Robert,

That is one Crazy Layout!

I don't even know where you would put the content in.

Because there's no content yet - it's impossible to say how to mark it up. But as all those colours seem to be purely presentational - they shouldn't have HTML at all associatied for each of the blocks. The HTML doesn't define the style the CSS does.

You'd be Much Better starting with something simpler than that, Can you suggest another site that you like the design of and we'll have a go at explaining how you can reproduce that with div's and CSS. As your current design is extremely table-ee and there's more to be learnt from other designs.

**Dan Schulz** · Nov 22, 2007, 19:31

Mark, I (think I) recognized it right away. It's a wireframe mockup, with each colored block representing a section of content or a menu item. Which (if I'm right anyway) is why I suggested the solution that I offered.

**computerprof** · Nov 22, 2007, 21:52

Hello Robert

We looked for a new textbook this quarter and sampled probably 18. The one we felt best offered CSS-centric design along with XHTML was Ian Lloyd's Build Your Own Web Site The Right Way Using HTML & CSS. It is available at sitepoint or Amazon.

In our classes we have gone with XHTML 1.0 Strict because it forces the students to stay clear of deprecated elements. We require the students to validate their web pages after the first few assignments.

I suggest Ian's book if you are looking for a written reference.

Pete

**Dan Schulz** · Nov 22, 2007, 22:01

Pete, HTML 4.01 Strict will do the same thing as XHTML 1.0 Strict in that regard (forcing students to avoid deprecated obsolete code). While it is best for those who are completely new to HTML and CSS, it can be a bit overbearing for those who come from a table-based design background, which is why I recommended HTML Utopia instead.

And by the way, welcome to SitePoint!

**BRCosmin** · Nov 27, 2007, 05:28

Thanks for the support, it worked out fine.

User Tag List

Thread: Help me switch to tableless design

Thread Tools

Display

Help me switch to tableless design

Bookmarks

Bookmarks

Posting Permissions