HTML 3.2 by Example

Let's start off by creating a very basic table:

<TABLE BORDER="1">
  <TR>
   <TD>Cell 1 goes here
   <TD>Cell 2 goes here
  <TR>
   <TD>Cell 3 goes here
   <TD>And this is the last, 4-th, Cell
</TABLE>

Cell 1 goes here Cell 2 goes here
Cell 3 goes here And this is the last, 4-th, Cell

<TR> tags enclose the rows of the table, and <TD> tags enclose the data for one cell, which make up rows.

Any cell of a table can contain text, images, links, etc, as well as any combination of those.

 

We can now set the width of the whole table (we will do it as a percentage relative to the size of the browser window):

<TABLE WIDTH="75%" BORDER="1">
  <TR>
   <TD>
   That's all the table
</TABLE>

That's all the table

 

We can also set the width of the table's individual cells (again, we will do it as a percentage relative to the size of the browser window):

<TABLE BORDER="1">
  <TR>
   <TD WIDTH="50%">Cell 1
   <TD WIDTH="50%">And here is Cell 2
</TABLE>

Cell 1 And here is Cell 2

Compare it with the table where no width is set for the individual table cells:

<TABLE BORDER="1">
  <TR>
   <TD>Cell 1
   <TD>And here is Cell 2
</TABLE>

Cell 1 And here is Cell 2

In the first example, the width of each cell is 50% of the width of the total table. In the second one, the width of each cell is adepted to its contents.

 

By the same manner, we can specify the height of an individual cell (excluding the cellpadding):

<TABLE BORDER="1">
  <TR>
   <TD HEIGHT="30">Cell 1
   <TD>And here is Cell 2
</TABLE>

Cell 1 And here is Cell 2

 

We can specify the thickness of the border around the table or suppress it altogether by using the BORDER attribute:

<TABLE BORDER="20">
  <TR>
   <TD>Cell 1
   <TD>And here is Cell 2
</TABLE>

<TABLE BORDER="2">
  <TR>
   <TD>Cell 1
   <TD>And here is Cell 2
</TABLE>

Cell 1 And here is Cell 2

Cell 1 And here is Cell 2

 

We can also control the amount of space around the contents of cells with a cellpadding atribute:

<TABLE BORDER="2" CELLPADDING="20">
  <TR>
   <TD>Cellpadding is 20
</TABLE>

Cellpadding is 20

And here's the same table without a CELLPADDING attribute (in this case it is assumed to be equal to 0):

<TABLE BORDER="2"
  <TR>
   <TD>Cellpadding is 0
</TABLE>

Cellpadding is 0

 

And we have some control over the amount of space between the cells themselves with the help of CELLSPACING attribute:

<TABLE BORDER="2" CELLSPACING="20">
  <TR>
   <TD>One cell
   <TD>Another cell
</TABLE>

One cell Another cell

Here's the same table without a CELLSPACING attribute (in this case it is assumed to be equal to 1):

<TABLE BORDER="1">
  <TR>
   <TD>One cell
   <TD>Another cell
</TABLE>

One cell Another cell

 

We can specify the horizontal and vertical alignment of the contents of the whole rows as well as of individual cells using the ALIGN and VALIGN (Vertical ALIGN) attributes.

Here's how the table cell contents might be aligned vertically:

<TABLE BORDER="1">
  <TR>
   <TD>Some <BR> stuff in <BR> cell No.1
   <TD VALIGN="top">Two
   <TD>Three
   <TD VALIGN="bottom">Four
</TABLE>

Some
stuff in
cell No.1
Two Three Four

 

As far as the horizontal alignment of the cells' contents relative to the cells themselves - the table cells are usually sized to their contents, which excludes the possibility for horizontal alignment. However, if there's more than one row in the table or the width of the table cells is defined with a WIDTH attribute, we can specify the horizontal alignment of the cells contents:

<TABLE BORDER="1">
  <TR>
   <TD>This is cell No. 1
   <TD ALIGN="center">Two
   <TD>This is cell No. 3
  <TR>
   <TD ALIGN="right">1
   <TD>This is cell No. 2, second row
   <TD ALIGN="left">3
</TABLE>

This is cell No. 1 Two This is cell No. 3
1 This is cell No. 2, second row 3

 

The COLSPAN attribute tells the browser that a cell should span more than one column. The ROWSPAN attribute does the same for rows:

<TABLE BORDER="2">
  <TR ALIGN="center">
   <TD>One
   <TD>One
   <TD>One
   <TD ROWSPAN="2">Two rows
  <TR ALIGN="center">
   <TD COLSPAN="2">Two columns
   <TD>One
</TABLE>

One One One Two rows
Two columns One

 

We can use the <TH> tags to specify the table headers:

<TABLE BORDER="3">
  <TR>
   <TH>Name
   <TH>Degree
  <TR>
   <TD>Oleg
   <TD>M.S.
</TABLE>

Name Degree
Oleg M.S.

 

A CAPTION tag can be used to put a line of text above a table:

<TABLE BORDER="3">
  <CAPTION>List of this webpage's authors</CAPTION>
  <TR>
   <TH>Name
   <TH>Degree
  <TR>
   <TD>Oleg
   <TD>M.S.
</TABLE>

List of this webpage's authors
Name Degree
Oleg K. M.S. in Info. Science

 

It is possible to give each cell in a table its own background color:

<TABLE BORDER="2" CELLPADDING="5" CELLSPACING="2">
  <TR ALIGN="center" VALIGN="middle">
   <TD BGCOLOR="red">Red Background
   <TD BGCOLOR="green">Green Background
   <TD BGCOLOR="blue">Blue Background
</TABLE>

Red Background Green Background Blue Background

Make sure that the text in the colored cells is still readable; if not, you can set it separately for each cell using the FONT tag.