Tableless web design: What it is and how it works
Let’s say you want to write the XHTML markup for a basic web page. The design you created has four elements: a header across the top, links for navigation on the left-hand side, a main content area on the right, and a footer along the bottom. There are two ways you could code the layout.
One is to use a table-based approach. You could wrap the entire contents of the web page in a table tag (<table></table>) and then use table rows and cells to arrange the elements within the table.
Another way is to wrap each element of the page in a div tag (<div></div>) then use Cascading Style Sheets, or CSS, to position them. Creating a layout like this, without the use of tables for structure, is known as tableless web design.
Head to Head: Table-based versus tableless layouts
First, the table-based markup
The XHTML for a table-based layout of a basic web page would look something like this:
<html>
<head>
<title>Coded With A Table</title>
</head>
<body>
<table>
<tr>
<td colspan="2">Header</td>
</tr>
<tr>
<td>Navigation</td>
<td>Content</td>
</tr>
<tr>
<td colspan="2">Footer</td>
</tr>
</table>
</body>
</html>
Here’s how it works. Everything in the body tag (<body></body>), is wrapped in a table. Within the table are table rows (<tr></tr>) and within those are columns, or table data (<td></td>). Notice that the center row has two columns, one for the navigation and one for the content, but the other rows have only one. In order for these single-column rows to stretch the full width of the page, you have to include extra code (colspan="2"). This tells the browser to make the content of these cells span two columns, so every table row accounts for the same number of columns.
Keep in mind that this is a simple example. As you add more content to the layout, like images and text, you have to add more rows and columns within these rows and columns. It doesn’t take much for a table-based layout to grow too complex to keep track of. That’s why Dreamweaver and other What-You-See-Is-What-You-Get (WYSIWYG) editors were invented. They allow web designers to drag-and-drop their content and not worry about the code underneath.
Also, notice that the elements of the layout (the header, navigation, content, and footer) are placed in the order they should appear on the page. With a table-based design, the arrangement of the XHTML has to match the visual layout of the page it generates.
The same layout made tableless
Here’s the XHTML markup for the same web page using a tableless web design.
<html> <head> <title>Coded To Be Tableless</title> </head> <body> <div id="content">Content</div> <div id="nav">Navigation</div> <div id="header">Header</div> <div id="footer">Footer</div> </body> </html>
Here’s how it works. Each element is wrapped in a container, or div tag (<div></div>), then id’s are added to the containers so they can be positioned and styled with a separate, external stylesheet. Unlike the table-based markup, the arrangement of the XHTML doesn’t depend on the visual layout of the page it generates. There’s a separation of presentation from content.
In fact, the order of the containers here (content first, then the navigation followed by the header and footer) is very different from how the page would look in a browser. Because the code for positioning and styling is kept separate from the content, you can arrange the markup however you want. This is known as source ordered content and has a number of benefits, including improved search engine optimization and accessibility.
Even someone with little or no experience in XHTML can read and understand the markup for a tableless web design. And adding more content doesn’t drastically increase the complexity of the code. Any element wrapped in a tag can be selected through CSS and positioned independently. There’s no need to keep track of nested rows or columns as you would with a table-based layout. That makes it easy to code tableless layouts with nothing more than a basic text editor.
Tableless for the win
The tag line for Five Finger Coding is “Master the art of tableless web design”, so you can probably guess we’re a bit biased when it comes to how we like to code websites. But hopefully we’ve shared some good reasons for our favoritism. If you’d like to learn what else tableless layouts can do for you, check out the pros and cons of tableless web design.
About Jason Garrison
Jason is a freelance web designer and developer who has a healthy obsession with web standards. When he’s not knee-deep in code, you can find him in a meditative state communing with the universe.
