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.
space
spaceThis 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.
  spaceStep-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.

print mark
Row & Column Span

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.

  <TABLE BORDER="1">
  <TR>
    <TD ROWSPAN="3">Row1, Cell1</TD>
    <TD COLSPAN="3">Row1, Cell2</TD>
  </TR>

  <TR>
    <TD>Row2, Cell1</TD>
    <TD>Row2, Cell2</TD>
    <TD ROWSPAN="2">Row2, Cell3</TD>
  </TR>

  <TR>
    <TD>Row3, Cell1</TD>
    <TD>Row3, Cell2</TD>
  </TR>
</TABLE>

 
Row1
Cell1
Row1, Cell2
Row2, Cell1 Row2, Cell2 Row2
Cell3
Row3, Cell1 Row3, Cell2
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.
COLSPAN="3"
Instructs the browser how many columns the current cell spans. Here, Cell 2 of Row 1 spans the three cells (or columns) of Row 2.
ROWSPAN="2"
Here, Cell 3 of Row 2 spans two rows, its own row plus 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.
space
spaceThe 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.
space
spaceFor purposes of clarity, only the tags and attributes will given with an example of its effect.

print mark
Table Borders
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 .
space
spaceHowever, 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">
 
Row1, Cell1 Row1, Cell2
Row2, Cell1 Row2, Cell2
<TABLE BORDER="10">
 
Row1, Cell1 Row1, Cell2
Row2, Cell1 Row2, Cell2

print mark
Cell Spacing & Padding

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">
 
Row1, Cell1 Row1, Cell2
Row2, Cell1 Row2, Cell2

Cell Padding

<TABLE BORDER="1" CELLPADDING="10">
 
Row1, Cell1 Row1, Cell2
Row2, Cell1 Row2, Cell2

print mark
Table Background Colors

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

<TABLE BORDER="1"   BGCOLOR="#FFFFCC">

This sets the background color for the whole table. Be considerate, choose background and text colors that provide high contrast for readability.

Row1,Cell1 Row1,Cell2
Row2,Cell1 Row2,Cell2
You can also set background colors for the individual cells.

<TABLE BORDER="1">
  <TR>
    <TD BGCOLOR="#FFCCFF">Row1,Cell1</TD>
    <TD BGCOLOR="#00FFFF">Row1,Cell2</TD>
  </TR>

  <TR>
    <TD BGCOLOR="#FFFF99">Row2,Cell1</TD>
    <TD BGCOLOR="#CCFFCC">Row2,Cell2</TD>
  </TR>
</TABLE>

Row1,Cell1 Row1,Cell2
Row2,Cell1 Row2,Cell2
print mark

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

print mark
Table Captions
space
Although not seen too frequently, a line of text as a heading can be applied at the top or bottom of a table. For example, if the table is a single cell that contains an image, the caption could be the image title or description.

<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

print mark

Table Header
space
Table header tags, <TH>title</TH>, have the same attributes as the table data tags, <TD>data</TD>. The basic difference is the bold type and title is often centered in the cell it occupies.

<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>  
 
JanuaryFebruaryMarch
Row 1 Cell 1Row 1 Cell 2Row 1 Cell 3
Row 2 Cell 1Row 2 Cell 2Row 2 Cell 3

(TABLE above with BORDER="0" ,CELLPADDING="5", CELLSPACING="0" and with February and CELLS 2 with BGCOLOR="#FFFFCC")
JanuaryFebruaryMarch
Row 1 Cell 1Row 1 Cell 2Row 1 Cell 3
Row 2 Cell 1Row 2 Cell 2Row 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

print mark

Summary
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.
space
spaceIt is a good idea not to nest tables too deeply as the time to load your page can be lengthened appreciably.
space
spaceA 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.
space
spaceHere are a few ideas that demonstrate how you can have fun with Tables.
space
Tables vs. Frames
space
If you only need to divide your page into columns or rows then tables may be much better suited for your project.
space
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.
Thanks for stopping by
© Mike & Associates All Rights Reserved