Home  •  Colors  •  Frames  •  HTML  •  iFrame  •  Javascripts  •  Tables  •  Portfolio

The Tables feature first appeared in Netscape 1.1 and was a major advancement for control of page layout. Today they are considered the most essential item in Web page construction as they provide excellent control of white space. Pages that have good eye appeal and/or efficient use of space likely employ the Tables feature. This tutorial is written to simplify the understanding and application of associated tags and related attributes. Only those tags that are common to both Netscape and IE browsers are addressed here. Enjoy.

Step-by-Step  Basic Table Row & Column Span Table Borders Cell Spacing & Padding Table Bgcolor   Content Alignment Table Captions Table Header Summary   (Tables vs. Frames)

 
Basic Table (two rows, three columns each)

<TABLE BORDER="1">   <TR>     <TD>Row1,Cell1</TD>     <TD>Row1,Cell2</TD>     <TD>Row1,Cell3</TD>   </TR>   <TR>     <TD>Row2,Cell1</TD>     <TD>Row2,Cell2</TD>     <TD>Row2,Cell3</TD>   </TR> </TABLE>

Row1,Cell1 Row1,Cell2 Row1,Cell3 Row2,Cell1 Row2,Cell2 Row2,Cell3

<TABLE> </TABLE>

Table open and close tags. Border size is set at 1 pixel in the above example.

<TR> </TR>

Defines a table row.

<TD> </TD>

Defines table data and divides a row into cells.

These cell attributes enable the construction of a spreadsheet type layout. There is unlimited
flexibility in the spanning of rows and columns that allows for customized display of data or
columns of text with headers.

ROWSPAN="3"

Instructs the browser how many rows the current cell should span. Here, the first cell spans three rows, its own row plus Row 2 and Row 3.

The foregoing two examples represent the fundamental Table tags, <TABLE>, <TR>, <TD>, and how the combination of these are used for layouts. It is important to understand that tables are simply rows stacked on top of each other. Each row and its contents are defined one at a time and displayed one after the other. It is also very important to understand how colspan and rowspan attributes of each row affect cells of succeeding rows. That was my first hurdle as it seemed odd but the concept is very flexible once understood. The remaining sections of this tutorial will deal with the tags and attributes that provide options of border, padding, spacing, header, background color, caption and a few examples. For purposes of clarity, only the tags and attributes will given with an example of its effect.

Table border width can be specified in pixels. It is wise to set borders equal to "1" while designing table layouts so that you can see what is going on. After being satisfied with placement of content and alignments, turn borders *off* (set border equal to "0") for a better, less cluttered presentation . However, for tabulating numerical data it is sometimes useful to leave borders equal to "1". Another option is to use background color (discussed below) to highlight alternate columns or rows.

<TABLE BORDER="1">

<TABLE BORDER="10">

Values of spacing and padding control the width in pixels of spaces between cells and how much padding is put between each cell boundary and its content.

Cell Spacing

<TABLE BORDER="1" CELLSPACING="10">

Cell Padding

<TABLE BORDER="1" CELLPADDING="10">

There are a selection of commands which allow you control over how a table is colored.

Alignment Of Table Contents

ALIGN & VALIGN attributes for placement within a cell

<TABLE BORDER="1">   <TR>     <TD ALIGN="LEFT" VALIGN="TOP">     Aligned top left</TD>     <TD VALIGN="TOP">     Aligned vertically top</TD>     <TD ALIGN="RIGHT" VALIGN="TOP">     Aligned top right</TD> </TR> <TR>     <TD ALIGN="LEFT">     Aligned horizontally left</TD>     <TD ALIGN="CENTER" VALIGN="MIDDLE">     Aligned horizontally and vertically in middle</TD>     <TD ALIGN="RIGHT">     Aligned horizontally to the right</TD> </TR> <TR>     <TD ALIGN="LEFT" VALIGN="BOTTOM">     Aligned bottom left</TD>     <TD VALIGN="BOTTOM">     Aligned vertically at bottom</TD>     <TD VALIGN="BOTTOM" ALIGN="RIGHT">     Aligned bottom right</TD>   </TR> </TABLE>

Aligned top left Aligned vertically top Aligned top right Aligned horizontally left Aligned horizontally and vertically in middle Aligned horizontally to the right Aligned bottom left Aligned vertically at bottom Aligned bottom right

<TABLE BORDER="1">   <CAPTION ALIGN="top">   Caption at top   </CAPTION>   <TR>      <TD>Row1,Cell1</TD>      <TD>Row1,Cell2</TD>   </TR>   <TR>      <TD>Row2,Cell1</TD>      <TD>Row2,Cell2</TD>   </TR> </TABLE>	Caption at top Row1,Cell1 Row1,Cell2 Row2,Cell1 Row2,Cell2
<TABLE BORDER="1">   <CAPTION ALIGN="bottom">    Caption at bottom    </CAPTION>   <TR>     <TD>Row1,Cell1</TD>     <TD>Row1,Cell2</TD>   </TR>   <TR>      <TD>Row2,Cell1</TD>      <TD>Row2,Cell2</TD>   </TR> </TABLE>	Caption at bottom Row1,Cell1 Row1,Cell2 Row2,Cell1 Row2,Cell2

<TABLE BORDER="1"> <TR> <TH>January</TH> <TH>February</TH> <TH>March</TH> </TR> <TR> <TD>Row 1 Cell 1</TD> <TD>Row 1 Cell 2</TD> <TD>Row 1 Cell 3</TD> </TR> <TR> <TD>Row 2 Cell 1</TD> <TD>Row 2 Cell 2</TD> <TD>Row 2 Cell 3</TD> </TR> </TABLE>

January February March Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3 Row 2 Cell 1 Row 2 Cell 2 Row 2 Cell 3 (TABLE above with BORDER="0" ,CELLPADDING="5", CELLSPACING="0" and with February and CELLS 2 with BGCOLOR="#FFFFCC") January February March Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3 Row 2 Cell 1 Row 2 Cell 2 Row 2 Cell 3

An Example of Both Column and Row Headings

<TABLE BORDER> <TR> <TH></TH> <! empty cell > <TH>January</TH> <TH>February</TH> <TH>March</TH> </TR> <TR> <TH>Week 1</TH> <TD>Row 1 Cell 1</TD> <TD>Row 1 Cell 2</TD> <TD>Row 1 Cell 3</TD> </TR> <TR> <TH>Week 2</TH> <TD>Row 2 Cell 1</TD> <TD>Row 2 Cell 2</TD> <TD>Row 2 Cell 3</TD> </TR> </TABLE>

(BORDER="1")  January  February   March   Week 1 Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3 Week 2 Row 2 Cell 1 Row 2 Cell 2 Row 2 Cell 3   (TABLE above with BORDER="0", CELLPADDING=0, CELLSPACING=2 and BGCOLOR="#000000" for top headers, font color="#ffffff"; then, side headers, BGCOLOR="#FFFFCC")  January  February   March   Week 1 Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3 Week 2 Row 2 Cell 1 Row 2 Cell 2 Row 2 Cell 3

Extensive use of Tables was used to format and layout this tutorial. By viewing the source code for this page you might get a few additional ideas for page layouts. I recommend using notes, <!-- note -->, to remind you where you are when your files are rather large.

It is a good idea not to nest tables too deeply as the time to load your page can be lengthened appreciably.

A tool bar created with the Tables feature provides a convenient way to aid in the navigation of a web site. As you move from page to page, carry the tool bar along. Don't forget to turn "OFF" the tool bar link on the active page. It will stand out and remind the visitor which page they are viewing. Here is a toolbar example with code.

Here are a few ideas that demonstrate how you can have fun with Tables.

Tables vs. Frames

If you only need to divide your page into columns or rows then tables may be much better suited for your project.

For a navigational structure that will always be visible, such as a table of contents, frames are the way to go. My tutorial on Frames has been a popular resource for learning to use the Frames feature initiated by Netscape.