SITEMAP

Design > Sitemapping : Navigation : Screen Resolution : Spliced Sites : Info Architecture : Site Standards : Storyboarding : Tables Intro : Frames Are Evil : Table Tips : Proportionate vs Absolute : View Source : Consistency

introduction to tables

Tables are the basic building blocks of works-on-any-browser kind of sites like mine.

They don't have any of the disadvantages of layers or frames (I'll rant in more detail about those horrid things later).

The most fundamental thing to remember about tables in that they're rectangular, so everything has to fit into boxes. You can nest tables within tables in order to achieve the layout you're after, and tables can be invisible (as they are here) so your layouts don't have to look like chunky 1990's sites - the placement of your content can be quite sophisticated with a little ingenuity.

Tables consist of columns (vertical) and rows (horizontal). You can apply characteristics such as padding and coloured fills appropriately, depending on your content.

Usually if there's text in a table, you use padding. This stops the text from butting right up against whatever's in the neighbouring cell (eg, a picture or more text). In the case of adjoining columns of text, you might have more padding that if it were text next to a picture.

Column width is an important factor, especially when designing a site to be appropriate for a variety of screen resolutions (see Screen Resolution page). I'll often have columns containing pictures or navigational elements a fixed width (number of pixels), and set a variable width (percentage of screen) for the whole table. That's what I've done here, and as you'll see if you drag the size of your browser in and out you'll see that this means that any extra width you have available gets used up by the content (in this case, my text in this column).

If I need a long layout with columns of varying width, especially when I want my text to keep with an appropriate picture, I might put a series of one-row, two-column tables underneath each other. eg: www.fork-you.com/forkhow1.htm

If you want padding only on one small section of your layout, then just pop a 100% width one-column one-row table into the spot where you want the padding, and keep all of the other tables in the layout with zero padding.

I think it's quite a good idea when you're first starting out with web design to keep your table border widths visible (say, one pixel) and different colours until you get your layout sorted out - then make them all zero width (invisible) once it's all sorted out.

A natty little trick to select the right table when working in Dreamweaver is to click in a cell and then look down the bottom in the grey bar. The innermost table will appear on the right, the outermost on the left. You can click on the appropriate word <table> to select that level of table (this can be quite difficult to do by clicking on the table itself, especially when you have many nested tables with a border width of zero). Hopefully that will make sense when you actually try it in Dreamweaver.

I'll add some examples of table layouts soon!