One of the most powerful tools for creative Web page design is the table, which allows you to arrange text and images into multiple columns and rows. The following will hopefully show you how to build HTML tables and how to control the spacing, layout, and appearance of the tables you create.

A table is an orderly arrangement of text and/or graphics into vertical columns and horizontal rows.

Think about how arranging text into tables could benefit your Web pages. Here are some specific ideas to keep in mind:

• Of course, the most obvious application of tables is to organize tabular information, such as a multi-column list of names and numbers.

• If you want more complex relationships between text and graphics than <IMG ALIGN="left"> or <IMG ALIGN="right"> can provide, tables can do it.

• Tables can be used to draw borders around text, or around several graphics images.

• Whenever you need multiple columns of text, tables are the answer.

To make tables, you have to start with a <TABLE> tag. Of course, you end your tables with a </TABLE> tag. If you want the table to have border, use a BORDER attribute to specify the width of the border in pixels. A border size of 0 (or leaving the BORDER attribute out entirely) will make the border invisible, which is often handy whtn you are using a table as a page layout tool.

There are a number of optional attributes you can specify in the <TABLE> tag, but these are discussed below.

With the <TABLE> tag in place, the next thing you need is the <TR> tag. <TR> creates a table row, which contains one of more cells of information. To create these individual cells, you use the <TD> tag. <TD> stands for table data; you place the table information within the <TD> and </TD> tags.

A cell is a rectangular region which can contain any text, images, and HTML tags. Each row in a table is made up of at least one cell.

You can create as many cells as you want, but each row in a table should have the same number of columns as the other rows.

Using this page as a "reference" you can CLICK on the link below and use the "Automatic Table Maker" to construct the basic table and then modify it using the various attributes below which are NOT included in the table maker.

HTML Tags and Attributes of Tables

TAG <table>...</table> <tr>...</tr> <td>...</td>

ATTRIBUTE ALIGN="..." BORDER="..." CELLSPACING="..." CELLPADDING="..." WIDTH="..." BGCOLOR="..." BACKGROUND="..." ALIGN="..." VALIGN="..." BGCOLOR="..." BACKGROUND="..." ALIGN="..." VALIGN="..." ROWSPAN="..." COLSPAN="..." WIDTH="..." BGCOLOR="..." BACKGROUND="..."

FUNCTION Creates a table that can contain any number of rows (<TR> tags). Aligns the table to the LEFT, CENTER, or RIGHT. Indicates the width in pixels of the table borders. (BORDER=0, or omitting the BORDER attribute, makes borders invisible.) The amount of space between the cells of the table. The amount of space between the edges of the cell and its contents. The width of the table on the page, in either exact pixel values or as a percentage of page width. Background color of all cells in the table that do not contain their own BACKGROUND or BGCOLOR attribute. Background image to tile within all cells in the table that do not contain their own BACKGROUND or BGCOLOR attribute.(Microsoft Internet Explorer 3.0 only). Defines a table row, containing one or more cells (<TD>tags). The horizontal alignment of th contents of the cells within this row. Possible values are LEFT, RIGHT, and CENTER. The vertical alignment of the contents of the cells within this row. Possible values are TOP, MIDDLE, and BOTTOM. Background Color of all cells in the row that do not contain their own BACKGROUND or BGCOLOR attributes. Background image to tile withi all cells in the row that do not contain their own BACKGROUND or BGCOLOR attributes (Microsoft Internet Explorer 3.0 only). Defines a table data cell. The horizontal alignment of the contents of the cell. Possible values are LEFT, RIGHT, and CENTER. The vertical alignment of the contents of th cell. Possible values are TOP, MIDDLE, and BOTTOM. The number of rows this cell will span. The number of colums this cell will span. The width of this column of cells, in exact pixel values or as a percentage of the table width. Background color of the cell. Background image to tile within the cell (Microsoft Internet Explorer 3.0 only).

Automatic Table Maker

Main HTML Help

Site© 1999-2003 Copyright by dcrum@infionline.net