Writing HTML | About | FAQ | Alumni | References | Tags | Lessons | back | next |

21. Tables

Let's set the table...

Once	You	Set	`up`
	a table
`you`	may N e v e r		Go
	may N e v e r		Back!

...and completely revolutionize ordinary web pages

Objectives

After this lesson you will be able to:

Design a web page table with rows and columns of text in a gridded display.
Write the HTML for integrated layout schemes of text and pictures.
Write the HTML for an invisible table that creates side-by-side columns.
Create a table that has different colored cells.

Lesson

Note: If you do not have the working documents from the previous lessons, download a copy now. Also, you may want to first look at the test page to see of your browser supports the tags used in this lesson.

Tables were introduced into HTML 3.0 and further enhanced by Netscape to add another dimension to web page design. They provide a structure for organizing other HTML elements into "grids" on the page. One of the more obvious uses of tables is when you have to format... columnar tables of text! But, tables also open up the door for many other page layout options.

The HTML for tables can look very complex -- but we will start simple and build up some tables for our Volcano Web lesson.

For starters, keep in mind this concept:

Tables start being built from the top left, them across the columns of the first row, then to the second row, across the columns of the second row...
      -->  -->  -->  -->  -->  --> 
      ___________________________|
      |
      -->  -->  -->  -->  -->
We will call each grid in a table a cell

Basic Table Tags

The HTML for the basic table structure is shown below:

HTML

Result

<table border=1>
  <tr>
  <td>Row 1 col 1</td>
  <td>Row 1 col 2</td>
  <td>Row 1 col 3</td>
  </tr>

  <tr>
  <td>Row 2 col 1</td>
  <td>Row 2 col 2</td>
  <td>Row 2 col 3</td>
  </tr>
  
  <tr>
  <td>Row 3 col 1</td>
  <td>Row 3 col 2</td>
  <td>Row 3 col 3</td>
  </tr>

</table>

Row 1 col 1	Row 1 col 2	Row 1 col 3
Row 2 col 1	Row 2 col 2	Row 2 col 3
Row 3 col 1	Row 3 col 2	Row 3 col 3

The border=1 attribute in the <table> tag instructs the browser to draw a line around the table with a thickness of 1 pixel. Note how each row is defined by Table Row tags <tr>...</tr> and then cells in each row are defined by Table Data <td>...</td> tags. Each <td>...</td> tag can contain any type of HTML tag we have used in this tutorial -- headers, styled text, hypertext links, inline graphics, etc. Within this tag you can uses several attributes to control the alignment of items in a single cell:

Horizontal Alignment Vertical Alignment

<td align=left> aligns all elements to the left side of the cell (this is the default setting)
<td align=right> aligns all elements to the right side of the cell
<td align=center> aligns all elements to center of the cell

<td valign=top> aligns all elements to the top of the cell
<td valign=bottom> aligns all elements to the bottom of the cell
<td valign=middle> aligns all elements to the middle of the cell (this is the default setting)

Horizontal Alignment	Vertical Alignment
`<td align=left>` aligns all elements to the left side of the cell (this is the default setting) `<td align=right>` aligns all elements to the right side of the cell `<td align=center>` aligns all elements to center of the cell	`<td valign=top>` aligns all elements to the top of the cell `<td valign=bottom>` aligns all elements to the bottom of the cell `<td valign=middle>` aligns all elements to the middle of the cell (this is the default setting)

You can combine these attributes:

  <td align=left valign=bottom>

This HTML will produce a cell with items aligned along the left and bottom of the cell.

Rows and Columns

The table above is pretty simple and square -- three rows by three columns. Look what we can do if using the colspan and rowspan attributes in the <td>...</td> tags.

HTML

Result

<table border>
  <tr>
  <td>Row 1 col 1</td>
  <td align=center colspan=2>
   Row 1 col 2-3</td>
  </tr>

  <tr>
  <td>Row 2 col 1</td>
  <td>Row 2 col 2</td>
  <td>Row 2 col 3</td>
  </tr>
  
  <tr>
  <td>Row 3 col 1</td>
  <td>Row 3 col 2</td>
  <td>Row 3 col 3</td>
  </tr>
</table>

** Note the attribute for the second cell of the first row -- it spans 2 columns. We have also aligned the text in the center of this cell.

Row 1 col 1	Row 1 col 2-3
Row 2 col 1	Row 2 col 2	Row 2 col 3
Row 3 col 1	Row 3 col 2	Row 3 col 3

Okay, now that we have had a cell span two columns -- let's make a cell that spans two rows. Remember to follow the HTML as it builds from the top left across, then down, then across...

HTML

Result

<table border=1>
  <tr>
  <td>Row 1 col 1</td>
  <td align=center colspan=2>
   Row 1 col 2-3</td>
  </tr>

  <tr>
  <td>Row 2 col 1</td>
  <td valign=top rowspan=2>
  Row 2 col 2</td>
  <td>Row 2 col 3</td>
  </tr>
  
  <tr>
  <td>Row 3 col 1</td>
  <td>Row 3 col 3</td>
  </tr>
</table>

Row 1 col 1	Row 1 col 2-3
Row 2 col 1	Row 2 col 2	Row 2 col 3
Row 3 col 1	Row 2 col 2	Row 3 col 3

There is still quite a bit more to cover, but let's stop looking at these boring examples and work on our web page...

A Data Table

Our Introduction page contains a table ("Volumes of Some Well Known Eruptions") that we first created in lesson 9 using the preformat tags <pre>...</pre>. We will now enhance that chart using a table tags.

Open up the intro.html file in your text editor.
Delete everything inside and including the <pre>...</pre> tags.

In the same place put:


<table border>
<tr>
<th>Eruption</th>                     
<th>Date</th>           
<th>Volume in km<sup>3</sup></th>
</tr>

<tr>
<td>Paricutin, Mexico</td>
<td align=center>1943</td>
<td align=center>1.3</td>
</tr>

<tr>
<td>Mt. Vesuvius, Italy</td>
<td align=center>79 A.D.</td>
<td align=center>3</td> 
</tr>

<tr>
<td>Mount St. Helens,<br>Washington</td>
<td align=center>1980</td>
<td align=center>4</td> 
</tr>

<tr>
<td>Krakatoa, Indonesia</td>
<td align=center>1883</td>
<td align=center>18</td>
</tr>

<tr>
<td>Long Valley, California</td>
<td align=center>pre-historic</td>
<td align=center>&gt;450 &amp; &lt;700</td>
</tr> 

<tr>
<td>Yellowstone, Wyoming</td>
<td align=center>pre-historic</td>
<td align=center>400</td> 
</tr>
</table>

NOTE: Look at the HTML for the first row. The Table Header tags <th>...</th> function exactly like the <td>...</td> tags except that any text is automatically made bold and all items are automatically centered.
Also see that in the cells for "Long Valley" you must use the HTML for the special characters to display the symbols for "<", ">", and "&" (See lesson 10)

Save and Load into your web browser. You can compare your attempt with this sample of how the table should look at this point.
NOTE: The table may not be completely distinct as it sits on a solid black background.
Now let's add some more things to our table.
Some browsers allow you to specify other settings for the lines that make up the table. These are the attributes for the table tag:
```
  <table border=X cellpadding=Y cellspacing=Z>
```
where X is the width (in pixels) of the outer border of the table. The attribute cellpadding specifies how much empty "space" exists between items in the cells and the walls of the cells -- high values for Y will make the cells larger ("padding" the cell). The attribute cellspacing specifies (in pixels) the width the inner lines that divide the cells.
Modify your <table> tag to read:
```
  <table border=3 cellpadding=4 cellspacing=8>
```
The <caption> tag places a string of text (centered to the width of the table) as a title/caption for the table. Modify the lines of your table to read:
```
  <table border=3 cellpadding=4 cellspacing=8>
  <caption><b><font size=+1>
  Volumes of Some Well-Known 
  Volcanic Eruptions</font></b></caption>
```
You can include and HTML inside the <caption> tag; just makes sure that it is within the <table>...</table> tags.

And just for fun, let's color the text in the <th>...</th> tags an orange color (for more on coloring text, see lesson 19). Modify the HTML for the first row to look like:

  <tr>
  <th><font color=#EE8844>Eruption</font></th>                     
  <th><font color=#EE8844>Date</font></th>           
  <th><font color=#EE8844>Volume in km<sup>3</sup></font></th>
  </tr>

And let's move that table to the center of the page. If your web browser supports the <center>...</center> tag, then just surround the table with these tags. For more on text alignment, see lesson 20.
Save and Reload into your web browser. You can compare your attempt with this sample of how the table should look at this point. Pretty good, eh?
Finally, we will add a column to the left side -- we want to show the grouping of historic volcanic eruptions (the first four rows) and the pre-historic ones (the last two rows). We now add an empty cell by adding <th></th> to the first row -- the reason why we did this should be come clear as we build this new column in the next few steps.
```
<tr>
<th></th>
<th><font color=#EE8844>Eruption</font></th>                     
<th><font color=#EE8844>Date</font></th>           
<th><font color=#EE8844>Volume in km<sup>3</sup></font></th>
</tr>
```
We go to the first row, and add a first cell that spans the next 4 rows:
```
<tr>
<td rowspan=4>
<font color=#EE8844>
<i>eruptions<br>
observed<br>
by humans</i>
</font></td>
<td>Paricutin, Mexico</td>
<td align=center>1943</td>
<td align=center>1.3</td>
</tr>
```
NOTE: We have added some <br> tags so that this first column does not become too wide. You might want to investigate for yourselves the effect of omitting these tags.

And in the fifth row, we add a cell that spans the next 2 rows:


<tr>
<td rowspan=2>
<font color=#EE8844>
<i>inferred<br>
by study<br>
of deposits</i>
</font></td>
<td>Long Valley, California</td>
<td align=center>pre-historic</td>
<td align=center>>450 & <700</td>
</tr>

Save and Reload again into your web browser. You can compare your attempt with this sample of how the table should look at this point. This is all we will add to this table.

Invisible or Phantom Tables

The table with borders is useful but other times we want to create a grid-like layout that does not have the borders. We like to call these "Phantom" tables because to the reader it may not be obvious that they are looking at a table!

A Phantom table is built in the same manner as the table we built above except the <table> tag looks like:

  <table>

  <table border=0>

On some browsers, just omitting the border attribute will cause it to display a table without any lines marking the cells. On other browsers, you will have to set the border to 0 pixels for the same effect.

If you look at the very top of this page, the top most part is actually a Phantom table that contains in one of its cells a second table with borders! However, we are jumping ahead. For our example, we will reformat the file usa.html (Volcanoes in the USA) into a two column format. Rather than having page-wide paragraphs stacked vertically on the page, we will put them side by side like this sketch:

XXXXX [title]	XXXXX [title]
xxxxx xxxxx xxxx xxx xx xxxxx xx xx xxxx xxxxx xxxxx	xxx xx x xxxx xxx xx x x xx xx xxxx xxxxx xx x xxxxx xxx xxxxx	_______ \| img \| \| \| \|_____\|	[image link to big image]
xxx xx xx [hypertext link to big image]

Note that the right hand column also has an adjacent picture that is a hyperlink to a full screen image (see lesson 8e)

Open up the file usa.html in your text editor.

Find the section that looks like:


<font size=+1><B>Mount St Helens</B></font><br>
On May 18, 1980, after a long period of rest, 
this quiet mountain in Washington provided 
<a href="msh.html">detailed observations</a> on
the mechanics of highly explosive eruptions.

<p>
<font size=+1><B>Long Valley</B></font><br>
This field seismometer measures earthquakes 
associated with subsurface volcanic forces and 
may help to predict future events. It sits on a 
plateau known as the "Volcanic Tableland" formed 
by a major eruption  600,000 years ago.<p>
<a href="../pictures/seismo.jpg">
<img src="../pictures/stamp.gif"> 
-- [full size image] --</a>

and replace it with the following HTML:

<table cellpadding=6>
<tr>
<td><font size=+1><B>Mount St Helens</B></font></td>
<td colspan=2><font size=+1><B>Long Valley</B></font></td>
</tr>

<tr>
<td valign=top>On May 18, 1980, after a 
long period of rest, this quiet mountain 
in Washington provided <a href="msh.html">
detailed observations</a> on
the mechanics of highly explosive eruptions.
</td>

<td valign=top>
This field seismometer measures earthquakes 
associated with subsurface volcanic forces 
and may help to predict future events. It
sits on a plateau known as the 
"Volcanic Tableland" formed by a major
eruption  600,000 years ago.
</td>
<td valign=top><a href="../pictures/seismo.jpg">
<img src="../pictures/stamp.gif"></a>
</td>
</tr>

<tr>
<td colspan=3 align=right>
<a href="../pictures/seismo.jpg">
-- [full size image] --</td>
</tr>
</table>

NOTE: Look carefully at the HTML here. We actually are using a 3 column table -- the first paragraph (Mount St Helens) becomes the left column. The right column includes one column of text and another column for a small image. A bottom row, aligned right and spanning 3 columns, is used to hold the hypertext link that leads to the same graphic as the thumbnail image

Save and Reload again into your web browser.

Splitting a Long List

Another handy use for invisible tables is to transform a long list of items (created with the list tags, see lesson 6). Lists grow downward on a page, and can waste valuable real estate on the right side of the page.

The effect is to transform a list:

Long Linear List Column 1 Column 2

<ul> <li> xxxxxx <li> xxxx xxxx <li> xxx x xxxx <li> xxx xxxxx <li> xx x xxxxx <li> xxx xx <li> xxxx x <li> xxx x xxx </ul>

to
<ul> <li> xxxxxx <li> xxxx xxxx <li> xxx x xxxx <li> xxx xxxxx </ul>

<ul> <li> xxx xx <li> xxxx x <li> xxx x xxx </ul>

Long Linear List		Column 1	Column 2
<ul> <li> xxxxxx <li> xxxx xxxx <li> xxx x xxxx <li> xxx xxxxx <li> xx x xxxxx <li> xxx xx <li> xxxx x <li> xxx x xxx </ul>	to	<ul> <li> xxxxxx <li> xxxx xxxx <li> xxx x xxxx <li> xxx xxxxx </ul>	<ul> <li> xxx xx <li> xxxx x <li> xxx x xxx </ul>

We will now break up the list of resources on our Resource Projects page (file proj.html).

Open your proj.html file in your text editor.

Look for the <ul>...</ul> list under the References heading and replace all of it with:


  <table>
  <tr>
  <td valign=top>
  <ul>
  <li><A HREF="http://www.avo.alaska.edu/">
  Alaska Volcano Observatory</A>
  <li><A HREF="http://vulcan.wr.usgs.gov/home.html">
  Cascades Volcano Observatory</A>
  <li><A HREF="http://www.dartmouth.edu/~volcano/">
  The Electronic Volcano</A>
  <li><A HREF="http://www.geo.mtu.edu/volcanoes/">
  Michigan Tech Volcanoes Page</a>
  <li><A HREF="http://www.geo.mtu.edu/eos/">
  NASA Earth Observing System (EOS) IDS Volcanology Team</A>
  <li><A HREF="http://www.geol.ucsb.edu/~fisher/">
  Volcano Information Center</a>
  </ul>
  </td>
  <td valign=top>
  <ul>
  <li><A HREF="http://vulcan.wr.usgs.gov/Servers/earth_servers.html">
  Volcano/Earth Science-Oriented Servers</A>
  <li><A HREF="http://www.ngdc.noaa.gov/seg/hazard/hazards.html">
  NGDC Natural Hazards Data</a>
  <li><a href="http://www.nmnh.si.edu/gvp/">
  Global Volcanism Program (GVP) </a>
  <li><a href= "http://www.soest.hawaii.edu/hvo">
  Volcano Watch Newsletter</a>
  <li><a href="http://www.jasonproject.org/JASON/HTML/EXPEDITIONS_JASON_6_home.html">
  JASON Project VI: Island Earth</a>
  <li><A HREF="http://volcano.und.nodak.edu/">
  VolcanoWorld</A>
  </ul>
  </td>
  </tr>
  </table>

NOTE: We simply have taken one <ul>...</ul> list and broke it into two complete lists, each in the cell of an invisible table with one row and two columns.

Save and Reload in your web browser. You can compare your attempt with this sample of how the table should look at this point.

Coloring Tables

Several web browsers now support HTML to color tables, rows, and individual table cells. In fact, we have used it throughout this tutorial -- on the About the Tutorial page, the lesson index, and throughout the lessons when we display HTML examples.

You might want to look at the last example on the test page to see if your browser supports coloring of tables.

We will uses the hex color codes that we used in lesson 16 to color the background of web pages and in lesson 18 to color text.

It is as simple as inserting bgcolor=#FF0000 as an attribute to the different <table> tags:

Table Part	HTML
table color the area behind the entire table	<table bgcolor=#880000>
row color the area behind a single row	<tr bgcolor=#880000>
cell color the area behind a single cell	<td bgcolor=#880000>

Now we will add some color to the data table you created for the Introduction page. We will not add great gobs of colors (but feel free to experiment on your own pages). In our case, we will simply add the HTML to make the cells that hold the row and column headings a lighter shade of gray than the background black.

Open your intro.html file in your text editor.

First, find all of the <th> tags that hold the column headings:


  <th><font color=#EE8844>Eruption</font></th>                     
  <th><font color=#EE8844>Date</font></th>           
  <th><font color=#EE8844>Volume in km<sup>3</sup></font></th>

and add the attribute to color those cells grey (#222222):


  <th bgcolor=#222222><font color=#EE8844>Eruption</font></th>                     
  <th bgcolor=#222222><font color=#EE8844>Date</font></th>           
  <th bgcolor=#222222><font color=#EE8844>Volume in km<sup>3</sup></font></th>

Now, find the two tags that format the row labels and add the same color tag so that they read:


  <td  bgcolor=#222222 rowspan=4>
  <font color=#EE8844>
  <i>eruptions<br>
  observed<br>
  by humans</i>
  </font></td>

     :
     :
     :
  <td  bgcolor=#222222 rowspan=2>
  <font color=#EE8844>
  <i>inferred<br>
  by study<br>
  of deposits</i>
  </font></td>

Save and Reload in your web browser. You can compare your attempt with this sample of how the table should look at this point.

Check Your Work

Compare your web pages with this sample of how it should appear. If your pages are different from the sample or the hypertext links do not work correctly, review the text you entered in the text editor. Tables quickly become complicated, so double-check that you have defined the rows and columns correctly.

Review

Review topics for this lesson:

What is the order in which a web browser interprets the elements of a table tag?
What is the difference between <td>...</td> and <th>...</th> tags?
Where does the colspan=X attribute go? What does it do?
How do you create a table that has no visible margins?
How do you color a single row of a table?

Independent Practice

Look at your own web pages and find a place where a table may give you a better page layout. Or, add a chart or list of data to your web pages and use a table to format it. Try creating a table with colored cells, or like we have done in this tutorial, use the colors on an invisible table to color blocks of areas on a web page.

Coming Next....

Even more things to throw into your lists and toss around your images

GO TO.... | Lesson Index | back: "Extra Alignment" | next: "More with Lists and Images" |

Writing HTML Lesson 21: Tables

The Internet Connection at MCLI is Alan Levine --}
Comments to levine@maricopa.edu

URL: http://www.mcli.dist.maricopa.edu/tut/tut21.html