Color Cube
Anti-aliasing
GIF Compression
Image Tools
GIF Animation
Jpeg Compression
Eyeballing the Palette
Single-pixel GIF
Invisible Table Trick
Reduce Colors
Hand Retouching Images

CKWS Core Page
Example Sites
PDF Tips
css resources
Tools
Bibliography
Book Sales
Master Links
Feedback


Invisible Table Trick
 
The use of tables to control the layout of page elements is another workaround that designers must use to obtain the results they want. By pouring text and images inside tables with borders turned off, you can better control where everything is on your page. Look at the sites below to get a feel for how to use tables to control the layout of your site. Each example has table borders turned on so you can better recognize the structure going on behind the scenes. Be sure to examine the source code of each page by using the "view source" feature on your browser.
NEW! We've added a tables tutorial with lots of tips, tricks, and sample code. This comprehensive tutorial will take the mystery out of using tables to control the layout of your pages.
 
Dine with Dave
The Dine with Dave page is a good example of how to display a lot of information inside a table. Rather than listing the information, this page makes use of cells to hold the information. With borders turned off, the content is presented cleanly, without the chartjunk.


David Siegel's Journal
David Siegel's Journal uses tables to create margins. Setting the left-hand column to a width of 160 pixels prevents the text from smashing into the edge of the browser window. This makes it easier for the reader to pick up the text as he scans the page.


High Five Past Winners Gallery
The High Five Past Winners Gallery makes use of tables to align the data with a tiled background. The table cells are arranged so that the two columns of text match up perfectly to where the gray and white portions of the background meet.
 
 

Buy Creating Killer Web Sites from Amazon.com
Follow the Fish!
Core | Top | Feedback