Very Basic TABLES

Ahhh ..... You've completed your basic web page, successfully uploaded it, and all the links work. You can sit back and relax, right? Trust me, it won't be long before you start thinking of changes and additions you want to make to your first effort. As your pages become more complex, you will look for more ways to control both your text layout and your page design.

One answer is tables. This page layout uses one large TABLE, with smaller tables nested inside for examples. For more suggestions on using tables for page design, see Rod Neep's Web Page Design.

The Basic Table

While tables are a basic tool for page design, they are probably the most difficult to understand and use of the basic tags. TABLE tags follow the same rules we've already discussed in VERY Basic HTML. But they can still be confusing because of the way they the code is arranged. Tables consist of rows <tr>; which in turn contain one or more compartments called data cells <td>. While the cells in a row appear horizontally on a web page, the code lines are written vertically.

The code for a simple, two row, two column TABLE looks like this:

Begin table	`<table>`
Begin 1st row	`<tr>`
Cell 1 (Row 1, Column 1)		`<td>Row 1, Column 1</td>`
Cell 2 (Row 1, Column 2)		`<td>Row 1, Column 2</td>`
End 1st Row	`</tr>`
Begin 2nd row	`<tr>`
Cell 3 (Row 2, Column 1)		`<td>Row 2, Column 1</td>`
Cell 4 (Row 2, Column 2)		`<td>Row 2, Column 2</td>`
End 2nd row	`</tr>`
End table	`</table>`

And that code produces a table that looks like this:

Row 1, Column 1	Row 1, Column 2
Row 2, Column 1	Row 2, Column 2

Note the cell contents appear horizontally, across the row, but the code for each cell is written below the preceding cell in the row. Once you get the hang of looking down the code to find the cell that want to add or edit, you'll be able to find and correct any forgotten or misplaced closing tags for individual rows and cells. If a page containing table code becomes invisible in your browser, you'll know you overlooked one of those tags.

When writing table code by hand, the best way I've found to be sure I haven't forgotten some tags is to construct the table one-step-at-a-time. First, add all the row


<tr>...</tr>

tags. Then insert the cell


<td>...</td>

tags in each row. Once all the table code is written, go back and insert the contents in the individual cells. Check the page in your browser each time you add content, to be sure it appears in the correct cell. Indenting your table code, as in the example above, makes it much easier to find forgotten or misplaced tags.

But after looking at the above example, you're probably asking, why bother? That's a lot of code to write and I could do the same thing by centering the text. The answer is, of course, more tags! The formatting tags that can be used with tables (and your imagination) allow you to create a wide variety of layouts and effects. Let's look at just a few things you can do with that basic table.

Borders

First, let's display the border. It's always there. You just have to decide whether or not you want it to show. Visible borders are useful when you want to display information in a chart. It will also make it easier for you to see the results of some of the other tags we're going to discuss.

Borders can be 0 pixels wide (invisible) as on this page, 1 pixel wide for definition, or much wider for special effects. BORDER is (you guessed it) an attribute for the TABLE tag, and the value is the width of the border expressed in pixels:

<table border="1"> <table border="10">

Row 1, Column 1	Row 1, Column 2
Row 2, Column 1	Row 2, Column 2

Row 1, Column 1	Row 1, Column 2
Row 2, Column 1	Row 2, Column 2

Cell Padding

The examples above look a little crowded; so, let's pad the cells. Cellpadding creates empty space around whatever is contained within the cells. Specify the number of pixels (space) by adding the attribute to the TABLE tag:

Tag to modify: table
Attribute: cellpadding
Value: fixed (number of pixels)

<table border="1" cellpadding="10">

Row 1, Column 1	Row 1, Column 2
Row 2, Column 1	Row 2, Column 2

Cell Spacing

You can also create empty space between the cells. The cellspacing attribute can be used with different border widths to create a nice effect:

Tag to modify: table
Attribute: cellspacing
Value: fixed (number of pixels)

<table border="3" cellpadding="10" cellspacing="5">

Row 1, Column 1	Row 1, Column 2
Row 2, Column 1	Row 2, Column 2

Backgrounds

Add a background color or image to the entire table by adding the background attribute to the TABLE tag (same as adding the attribute to the <body> tag to change the background for a page).

<table border="3" cellpadding="10" cellspacing="5" bgcolor="#FFF8DC">

Row 1, Column 1	Row 1, Column 2
Row 2, Column 1	Row 2, Column 2

Add background colors or images to individual cells by adding the attribute to the cell <td> tag:

`<tr>`
	`<td bgcolor="#EECCCC">Row 1, Column 1</td>`
	`<td bgcolor="#D2F0FF">Row 1, Column 2</td>`
`</tr>`
`<tr>`
	`<td bgcolor="#D9E3C1">Row 2, Column 1</td>`
	`<td background="stuc-wht.jpg">Row 2, Column 2</td>`
`</tr>`

Row 1, Column 1	Row 1, Column 2
Row 2, Column 1	Row 2, Column 2

BACKGROUND is not a valid attribute for the TABLE, TR, or TD tags. While most browsers will recognize it, since there is no 'standard' for the attribute, browsers are free to implement it differently. Check your page in different browsers to be sure you like the results of your coding.

Unbalanced Tables

The colspan and rowspan attributes can be added to individual cells to create variations in the number of cells in a column or row.

`<tr>`
	`<td colspan="2" align="center">Row 1, Column 1 & 2</td>`
`</tr>`
`<tr>`
	`<td rowspan="2" align="center">Row 2 & 3, Column 1</td>`
	`<td >Row 2, Column 2</td>`
`</tr>`
`<tr>`
	`<td >Row 3, Column 2</td>`
`</tr>`

Row 1, Column 1 & 2
Row 2 & 3, Column 1	Row 2, Column 2
	Row 3, Column 2

Alignment and Cell Size

Control the placement of cell content by adding the alignment attribute(s) to the <td> tag.

Horizontal alignment: align="left|center|right"
Vertical alignment: valign="top|middle|bottom"

Cells will adjust automatically to accommodate the largest item in a row or column. To balance your table, you may want to change this default size. Add the width or height attribute. The value may be specified in pixels, or as a percentage: 20%, 50%, etc.

`<tr>`
	`<td width="97" align=right valign=bottom>Bessie<br>Hare</td>`
	`<td><img src="graphics/hare-bp.jpg"></td>`
`</tr>`

Bessie
Hare

Special Effects

Tables can be used for a variety of things besides alignment. A friend once told me, "You can do anything with tables.... well, almost"

Nesting tables inside the cell of another table can create some interesting and useful effects. Need a button? A graphic will add several kilobytes to your page size. Use a table instead and link the cell text to the appropriate page. Better yet, nest a table or two.

Home

How about that row of buttons you'd like to put on each of your pages?

Home

Email

Next

Tired of those plain grey borders produced by the BORDER tag?

Row 1, Column 1	Row 1, Column 2
Row 2, Column 1	Row 2, Column 2

Need a special frame for a special photograph?

One word of caution.... Historically, no two browsers rendered tables exactly the same way. There were even differences between different versions of the same browser. The left button below is constructed using two tables. The one on the right is constructed using three tables. They look very different when viewed in Internet Explorer 5.5, but are virtually identical when viewed in Netscape 4.08. If you are trying for a specific effect using tables, check your page in several different browsers to be sure they all render your tables in a way you find acceptable.

Jones Family

Smith Family

View source code for the examples.

Congratulations! You're a Webmaster

Writing or editing the HTML for tables is not the easiest part of learning HTML. Which is why many experienced web authors use a WYSIWYG editor to create their table outlines. It is very easy to overlook a closing row <tr> or cell <td> tag. The correct tags, in the correct sequence, are absolutely essential. Some older browsers will refuse to display any part of a page containing incorrect or incomplete table code.

Whether or not you choose to write the code yourself, you'll find TABLES one of the most useful tools in your web authoring kit.

TOP

CREATING WEB PAGES

Basic HTML
Basic TAGS
Basic TABLES
HTML Editors
Links & Linking
Name ANCHORS
NAMING WebPages
SCANNING Photos
Your Genealogy Website
Photos at WorldConnect
HTML or XHTML?

UPLOADING

FTP
Drag & Drop
File Manager

FUN THINGS TO ADD

Add a Counter
Add a Guestbook
Family Group Sheet
Forms (MailMerge)
Date & Time Stamp (SSI)

MORE HELP PAGES

Freepages Help & FAQs

Customize the FP Banners

Change the Counter's Appearance

Betsy Mills:
REALLY Basic Help

Pat Geary:
Getting Started with Freepages
Website Design for the Genealogist

Marcia Hellam:
Website Building With No Hard Drive

Cliff Lamere:
The Basics of RootsWeb Counters

Robin Moore:
Web Editing & Genealogy Toolbox

Rod Neep:
WebPage Design

Cheri Zuber:
Genealogy Computer Tips

HOME