Formatting Pages with Tables

Tables are both a saving grace for page layout and a curse of old technology. Controlling simple tables is really pretty easy, but (naturally) there are ‘traps and tricks’ that can catch you. Learning some table basics, though, will help you build interesting pages easily, using columns and ‘blocks’ of content.

Most websites and themes are designed using ‘style sheets’, so to change table behavior ‘site wide’ you need to know what you’re doing. If you aren’t comfortable changing your stylesheet, it’ll be safer for you to control table borders and space around content as you work on each individual page.

When you make a table in the WordPress editor with TinyMCE Advanced or Windows Live Writer you can set such things if you pay attention, but it’s easy to forget. (We covered these in our article ‘Immediately Productive with WordPress‘.) Quite often your work might not look the way you expect.

If you don’t have an advanced HTML / web editing program, editing tables can be frustrating!

I’ll step you through some of these issues as painlessly as I can!
What are tables good for?

You’re looking at a page formatted with tables. Without tables, the entire page would be one large column of content – kind of like this paragraph. Using tables, I’ve been able to have some areas with two wide columns, some parts with narrow side columns for art and a wide center area for text, etc.

Parts of Tables

To control table appearance you will change overall width, number of rows and columns, borders around the entire table and spacing inside and between cells. You can also change background colors or use images as backgrounds.

Using styles, you can even control the borders of individual cells.

Cell Padding The space between your content and the edges of your table is set with the ‘padding’ inside each cell.

Cell Spacing The space between cells and between cells and the outer border of the table is set with ‘cell spacing’.

Borders Border size and color as well as background colors can also be set, including for individual cells.

‘Default’ attributes for table appearance throughout the website are often set in the style sheet. Unless you read through it you won’t know how it is set up.
This table has border=3, cellspacing=5, cellpadding=8.
This table has two rows and one column.
 

Stylesheets

Stylesheets serve as preset definitions about how page elements are displayed. Perhaps easiest to grasp are font settings, such as

“font-family: Arial, sans-serif;
line-height: 20px;”
Seeing your work When you set borders to “0″, in the WordPress edit window you’ll see dashed lines instead of borders (see the circled area in the image at left).

===> What you see in the editor display is probably not exactly what you will see in the browser! You should constantly preview your work using the ‘preview changes’ button above the blue ‘update’ button.
Windows Live Writer

table-set-wlwYou can see and set table, row and individual cell properties with Windows Live Writer.

 WordPress

table-set-wpThe table controls in the TinyMCE Advanced editor include row and cell settings, but not settings for the whole table, such as cell padding or cell spacing. Clicking anywhere in the table and then clicking the ‘insert table’ button brings up those settings.

Start off easy – keep it simple

You might try simply dividing your page into two columns, here with a border so you can see the table. Your new table would have two columns, one row, a width of “100%”. This sample has a border set to “1″. So your content areas don’t look like boxes inside of boxes, set the cell spacing to “0″. Don’t let your text bump into the border by setting the cell padding, perhaps to 10.

Same thing with invisible borders

Here is the table with no border. Your new table would have two columns, one row, a width of “100%”, and border “0″. Now you can set the cell spacing instead of padding, perhaps to 10.

A little more style…

In this table I removed all the border settings from the table, and set padding and spacing only. I then set the style for each cell to have a border and background color.
Tables can be very persnickety – much more than you’d think at first glance. There is definitely an ‘art’ to getting a page to look the way you want. But here’s some good news:

Once you get a page looking good, you can use that HTML code as a ‘template’ by copy-and-pasting it into a new page and simply replacing the content. Build something once and use it many times!

See you next time!