HTML Code Tutorial

Tutor Ebook Download

Tables in HTML

The original purpose of tables was to present data in rows and columns on a web page.

There is an ongoing controversy about whether or not they should be used to structure web pages.

The truth of the matter is that most web designers still use tables to set up their pages. Why? Because it's easier than building pages without them.

For beginners who want multi column web pages, tables are the easiest solution.

Large complicated tables will take longer to load in a browser, but most web designers have written off the dial up user anyway. So, I ask; "Why the controversy?"

Basic Table Tags

<table></table>Table
<tr></tr>Row
<td></td>Cell or Column
<th></th>Cell or Column Heading

This is the basic code for the following table: (single row - 2 column)
<table width="200" border="1">
<tr>
<td>Column One</td>
<td>Column Two</td>
</tr></table>

Closing tags are required for all table related tags. Beginners should also avoid nesting tables. (Building a table within a table.)

All table structures begin with the table tag. Remember the closing tag.

2 Column Web Page

Take a look at the attributes listed below for the table tags. Then view this simple demonstration of how to build a 2 column web page using a table

Browser Compatibility

It should be noted here that tables are one area of HTML where browsers disagree on how code should be interpreted. It is a good practice when building pages using tables to view them in both the IE and Mozilla browser types. Greater compatibility between types can be achieved using the old method of inline settings, but even when using this method differences will occur in your display.

The attributes of the table tag are:

width

Measurements are in pixels or percentage. For best results, when using tables to format your page structure, use a percentage setting of 100%. This will allow table widths to adjust to the browser width setting.

border

Border settings are a matter of preference. Experiment and decide which works best for you. Zero is no border. One is a single border. Two is 3 dimensional. Successive numbers increase the thickness of the 3 dimensional effect.

cellpadding

Specifies the distance in pixels of the text or image from the inside wall of a cell.

cellspacing

Specifies in pixels, the spacing between cells in a table.

bgcolor

Sets and overall background color for the entire table. You can also use bgcolor in row and cell tags to produce multi color effects.

background

For adding a background image to the table. You can use style sheets for this setting.

Contents

Page Structure

Text Controls

Tables

Forms

Frames

Miscellaneous

Row Tag

The <tr> or row tag is used to define rows in a table. Do not omit the closing tag. A row can contain numerous cells defined by the <td> tag.

The attributes of the tr tag are:

align

Horizontal alignment. Choices are left, right or center.

valign

Vertical alignment. Choices are top, middle or bottom.

Cell or Column Tag

The td tag is used to define the cells in a row.
The most common attributes of the td tag are:

align

Horizontal alignment. Choices are left, right or center.

valign

Vertical alignment. Choices are top, middle or bottom.

bgcolor

You may set individual background colors for cells.

height

width

Now let's change some of the code in the example and see how it affects the appearance of the table.
This is the basic code for the following table:
<table width="400" border="3">
<tr><td align="center">
Column One </td>
<td align="center">Column Two</td>
</tr></table>

The changes we made were:

• Setting the width of the table to 400
• Changed border setting to 3 for a three dimensional effect.
• Added the align="center" attribute to both cells.

Column Headings

Column headings are placed in a separate row above the associated row of cells. <tr><th>Column 1</th><th>Column 2</th></tr>

Column 1	Column 2
Column One	Column Two

Removing the Border

This is the basic code for the following table:
<table width="400" border="0">
<tr><td align="center">
Button One </td>
<td align="center"><img src="button.bmp"></td>
</tr></table>

Button One

Note the changes made to the code, to produce the results.

Tables and Text

One of the hardest things for a beginner in HTML to do, is to control text on a page. If you examine the source code of some web pages on the net, you will find programmers that define almost every pixel on the page to keep their text where they want it.

The following code sequence can be used to anchor a paragraph on a web page, centered and left justified. It works in both Mozilla and Explorer.

The only additional tags we will use are the paragraph tag <p></p> and the center attribute in our style settings. body{text-align:center}

The code:
<table width="500" border="0">
<tr align="center">
<td align="left">
<p align="left">
The use of tables in a document can be confusing at first. but, if you remember a few simple rules, they can be mastered very quickly. Always use pairs of tags. Don't nest tables in the beginning. </p>
</td></tr></table>


More Table Tips

For faster loading pages, build several single row tables, rather than one large complicated multi row table. Single row tables are also easier to maintain.

We've used the older method of setting table attributes in our examples. You can use Inline Style Sheets for HTML 4.0 compliance.
Example:
For:
<tr align="center">
Use:
<tr STYLE="text-align : center">

For borders:
<table STYLE="border:solid #000000 1px">
See also: Using borders

Centering Items in Tables

As of July 2006 there are still differences in the way IE and Mozilla browsers display tables. You will run into problems when trying to center items like paragraphs and lists within your tables.

Here are a few suggestions that may help.

Include this style setting:
table {margin-left:auto;margin-right:auto}

For lists exclude text-align:center and set left and right margins and padding to zero.

This will give you the same results in both Mozilla and IE browsers.

Check out our Free Frames Template Kit or try our Free Frames Kit Demo