Writing HTML | About | FAQ | Alumni | Kudos | References | Tags | Lessons | previous | next |

21. Tables

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
• Create a table that uses images as backgrounds in table 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, then 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:

<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>

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:

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 shown 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.

<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>

<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>

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.

1. Open up the intro.html file in your text editor.
2. Delete everything inside and including the <pre>...</pre> tags.
3. 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)

4. 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 between the inner lines that divide the cells.

Modify your <table> tag to read:

  <table border=3 cellpadding=4 cellspacing=8>

1. 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.
2. 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>

3. 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.
4. 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?
5. 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>

6. 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.

7. And in the fifth row, we add a cell that spans the next 2 rows (note again the use of special character codes to represent ">450 & <700":

   
   <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>&gt;450 & &lt;700</td>
   </tr> 

8. 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

A table with borders is useful for charts and data 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 border=0>

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 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 |
|     |
|_____|

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

1. Open up the file usa.html in your text editor.
2. 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 border=0 cellpadding=6 cellspacing=2>
   <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

3. 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:

<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>

<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).

1. Open your proj.html file in your text editor.
2. Look for the <ul>...</ul> list under the References heading and replace all of it with:

   
     <table border=0 cellpadding=2 cellspacing=2>
     <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://volcano2.pgd.hawaii.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://volcanoes.usgs.gov/">
     US Geological Survey Volcanic Hazards Program</a>
     <li><a href="http://www.nmnh.si.edu/gvp/">
     Global Volcanism Program (GVP) </a>
     <li><a href= "http://hvo.wr.usgs.gov/volcanowatch/">
     Volcano Watch Newsletter</a>
     <li><a href="http://library.advanced.org/17457/">
     Volcanoes Online</a>
     <li><A HREF="http://volcano.und.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.

3. 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

Most 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.

This is an effective means to add graphic/color elements to a web page without attaching a lot of bandwidth consuming images.

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 bgcolor=#880000>

<tr bgcolor=#880000>

<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.

1. Open your intro.html file in your text editor.
2. 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>
   

3. 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>
   

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

And you can even do more than use solid color backgrounds for table cells. In lesson 16 we could use a tiled image (a graphic image that can repeatedly fill a space) as a background for an entire page via the BODY tag. You can use a similar format to designate that table cells are filled with repeating patterns. You should be aware of the differences in how NetScape and Internet Explorer tags handle this modifier:

<table background="image.gif">

<tr background="image.gif">

<td background="image.gif">

If you look at the table at the top of this lesson page, you can see that some cells have solid color backgrounds, but the cell that spans the second row uses a graphic to fill the text behind the word table with a pattern or crumpled paper:

We will now modify the table you made before to apply a graphic background to the headings in our chart of volcanos.

1. Go to the Lesson 21 Image Studio to get a copy of the small (<1k) image that we will use as a background tile image for part of our table. Save it inside your pictures directory/folder as a file named pattern.gif.
2. Open your intro.html file in your text editor.
3. Edit the lines for the first table cell row that read:

   
     <tr>
     <th></th>
     <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>
     </tr>
   

   We will now change the background solid color in the cells of the top row to use the pattern.gif file:

   
     <tr>
     <th></th>
     <th background="../pictures/pattern.gif">
       <font color=#EE8844>Eruption</font></th>                     
     <th background="../pictures/pattern.gif">
       <font color=#EE8844>Date</font></th>           
     <th background="../pictures/pattern.gif">
       <font color=#EE8844>Volume in km<sup>3</sup></font></th>
     </tr>
   

4. 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:

1. What is the order in which a web browser interprets the elements of a table tag?
2. What is the difference between <td>...</td> and <th>...</th> tags?
3. Where does the colspan=X attribute go? What does it do?
4. How do you create a table that has no visible margins?
5. How do you color a single row of a table?
6. How can you use a pattern as a background in the last row of your table? for all cells in your 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.

More Information

Tables are pretty much the norm these days for web page design. In fact, you can peek at the web source of many sites and see tables inside of tables inside of... There is a drawback to pages that are all or heavily designed by tables... the entire table structure from the first <table> to the last </table> must all be downloaded before any content will appear. Therefore, if you have a lot of things inside of your table, a viewer accessing your page may stare a long time (especially if they are connecting via a slower modem) at a blank page while everything comes in. We have seen web sites that take more than 2 minutes to display any content because of complicated and large tables.

What can you do? Always test your pages on a slower connection or older computer than your own! If your entire page is layed out in tables, make sure that all <img...> tags have their width= and height= dimensions included (this helps the browser present the page quicker if it knows the dimensions of the images. If possible, try to put at least one line of text before a complicated table, so at least something appears qucikly when a viewer first reaches your page.

Now how would you like to learn an extra credit table trick? You can use tables to set up a page so the content is always centered, no matter the size of the browser window. If you do not believe us, try looking an example.

How is it done? The "trick" is that with tables you can use relative sizes for both it's width and height. Here is the HTML to produce the example:

  <html>
  <head>
  <title>Always Centered</title> 
  </head> 
  <body bgcolor=#000000 text=#FFFFFF link="#CC9966" vlink="#9999FF">
  <table border=0 width=100% height=100%>
  <tr>
  <td align=center valign=middle>
  <img src="../pictures/lava.gif" alt="lava!" width="300" height="259">
  <p>
  No matter How much you shrink or stretch, I stay centered!
  </td>
  </tr>
  </table>
  </body>
  </html>

The table tag contains options to size the table to the full width and height of the browser window. It's single cell <td>..</td> is set to be centered horizontally and vertically. Try it yourself and experiment!

Do you want more? See another example of how you can also use table sizing to make a title that always stretches across the screen. In this case, we make a table with a width of 100%. Each table cell contains one letter, and we divide the number of letters into 100 to get the proportional width of each cell:

  <html>
  <head>
  <title>Stretch Text</title> 
  </head> 
  <body bgcolor=#000000 text=#FFFFFF link="#CC9966" vlink="#9999FF">
  <table border=0 width=100%>
  <tr>
  <td align=center width=12%><font size=+3>V</font></td>
  <td align=center width=12%><font size=+3>O</font></td>
  <td align=center width=12%><font size=+3>L</font></td>
  <td align=center width=12%><font size=+3>C</font></td>
  <td align=center width=12%><font size=+3>A</font></td>
  <td align=center width=12%><font size=+3>N</font></td>
  <td align=center width=12%><font size=+3>O</font></td>
  <td align=center width=12%><font size=+3>!</font></td>
  </tr>
  </table>
  </body>
  </html>

We found these tips from the glassdog design-o-rama site. Play with it and see what else you can do!

But wait! Here is more! You can also add the bordercolor attribute to your <table> tag to shade the colors of a table with visible borders. Compare:

to one with the borders colored:

(This may not work on all web browsers). It creates a color shaded 3D look by having the top and left sides of the table lighter than the right and bottom sides. Creating this is as simple as modifyng our <table> tag to read:

  <table border=8 cellpadding=8 cellspacing=2 bordercolor="#663300">

For more resources on HTML tables, look at the sites listed in our references section.

Coming Next....

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

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

Writing HTML: Lesson 21: Tables
©1994-1999 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges

The 'net connection at MCLI is Alan Levine
Comments to alan.levine@domail.maricopa.edu

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