19. Tables

Looks complicated doesn't it. Well it's not really, the HTML for tables can look very complex -- but we will start simple.

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

     --> --> --> --> --> --> -->
     __________________________|
    |
     --> --> --> --> --> --> -->
   

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. And within this tag you can uses several attributes to control the alignment of items in a single cell:

You can also combine these attributes as well:

    <td align="left" valign="bottom">

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

ROWS AND COLUMNS
The table shown above is a very simple table 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="1">
  <tr>
  <td>Row 1 col 1</td>
  <td colspan="2" 
  align="center">
  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>

Okay, now that we have seen how to span a cell 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...

<table border="1">
  <tr>
  <td>Row 1 col 1</td>
  <td colspan="2" 
  align="center">
  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>

A DATA TABLE

Our Issapissin.htm page contains a table ("Volumes of Some Well Known Eruptions") that we first created in lesson 9 using the preformat tags <pre>...</pre>. We are now going to move that from our issapissin.htm to our venus.htm and will now enhance that chart using a table tags.

1. Open up the issapissin.htm file in your text editor.
2. Delete everything between and including the <pre>...</pre> tags.
3. Open up the intro.htm file in your text editor.
4. Below the unordered list we have there place the following code:

   
   <h4>Volumes of Some Well-Known Volcanic Eruptions 
   of Venus</h4>
   <table border="1">
    <tr>
     <th>Eruption</th>
     <th>Date</th>
     <th>Volume in km<sup>3</sup></th>
    </tr>
    <tr>
     <td>Mt. Issapissin</td>
     <td>2004</td>
     <td>1.3</td>
    </tr>
    <tr>
     <td>Mt. Fritchyon</td>
     <td>79 A.D.</td>
     <td>3</td>
    </tr>
    <tr>
     <td>Mt. Fritchyon</td>
     <td>1980</td>
     <td>4</td>
    </tr>
    <tr>
     <td>Mt. Nimucissa </td>
     <td>pre-historic</td>
     <td>>500 - <600</td>
    </tr>
    <tr>
     <td>Yellowstone, Wyoming (earth)</td>
     <td>pre-historic</td>
     <td>2400</td>
    </tr> 
   </table>  
   		  

   Look closely at the HTML for the first row. The Table Header tags <th>...</th> function exactly like the <td>...</td> tags except that any text inside the table header tag is automatically made bold and all items are automatically centred. Pretty Sweet!!

5. Save and Load into your web browser. You can compare your attempt with this EXAMPLE of how the table should look at this point.

Now let's add some more things to our table.

Some browsers allow you to set 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">
		

Ok so here we go. Where X is the width (in pixels) of the outer border lines of the table. The attribute cellpadding specifies how much empty "space" exists between items in the cells and the walls of the cells, and high values for Y will make the cells larger ("padding" the cell). And 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 (centred 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 other HTML tags inside the <caption> tag, just makes sure that it is within the <table>...</table> tags.

2. Now lest add some colour to our table just for fun, let's colour the text in the <th>...</th> tags an orange colour (for more on colouring text, see lesson 16). Modify the HTML for the first row to look like this:

   
     <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 centre of the page. Using the <div align="center">...</div> tags place them around the table.
4. Save and Reload into your web browser. You can compare your attempt with this EXAMPLE of how the table should look at this point. Pretty good, eh?

INVISIBLE TABLES
A table with borders is useful for charts and data but other times you might want to create a grid-like layout that does not have the borders. Some times these are called "phantom" tables because to the reader it may not be obvious that they are looking at a table!

A phantom table is built along the same manner as the table we built above except the "<table> tag looks like this instead:

   <table border="0">

xxxxx xxxxx xxxx 
xxx xx xxxxx xxxx
xxxx xxxxx xxxxx

xxx xx x xxxx 
xxx xx x x xx xx
xxxx xxxxx xx
x xxxxx xxx xxxxx

_______
| img |
|     |
|_____|

Ok lets make some changes

1. Open up the file issapissin.htm in your text editor.
2. Find the section that looks like:

   
    <p>
    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>
   <p>
    The term <i>nuée ardente,</i> or 
    "glowing cloud" was first used by La Croix (1904)
    in his description of the volcanic flows he observed in 
    the 1902 eruption of Mt Pel&eacute;e, a historically 
    active volcano on the island of Martinique. We see these
    occur daily from Mt. Issapissin where our tour takes you.
   </p>
   
   
   <p>
    <a href="images/seismo.jpg"> 
     <img src="images/stamp.gif" 
     alt="link to large image" 
     width="62" height="85" border="0">
     -- [full size image, 55k] --
     </a>
   </p>
   
    
    And replace it with this:
    
   <table border="0" cellpadding="6" cellspacing="2">
   <tr>
    <td>
    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>
    The term <i>nuée ardente,</i> or 
    "glowing cloud" was first used by La Croix (1904)
    in his description of the volcanic flows he observed in 
    the 1902 eruption of Mt Pel&eacute;e, a historically 
    active volcano on the island of Martinique. We see these
    occur daily from Mt. Issapissin where our tour takes you.
   </td>
   <td>
    <a href="images/seismo.jpg"> 
     <img src="images/stamp.gif" 
     alt="link to large image" 
     width="62" height="85" border="0"></a>
    </td>
   </tr>
   <tr>
    <td colspan="3" align="right">
     <a href="images/seismo.jpg">
     -- [full size image, 55k] --
     </a>
    </td>
   </tr>
   </table>
    
    

3. Save and Re-load in your browser.

Compare your page against this EXAMPLE; if yours looks different make sure you check what you have entered into your text editor.

SPLITTING UP LISTS
Another handy trick 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 a lot of space on the right side of your page.

The effect is to transform a list like this:

So rather than having a long list down the left hand side of your page wasting space, with an invisible table you can span your lists across the page to the right.

COLOURING TABLES
Most web browsers now support HTML to colour tables, rows, and individual table cells. In fact, I used it at the top of this page!!

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

It's as simple as adding the bgcolor="#FF0000" as an attribute to any of the different <table> tags:

Now let's add some colour to the data table you created for the volcanic page.

1. Open your volcanic.htm file in your text editor.
2. First find all of the <th> tags that hold the column headings:

   <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 add the attribute to color those cells grey (#222222): 
   <tr>
     <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> 
   
   

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

And you can do more than just use solid colour backgrounds for table cells. In lesson 15 we used a tiled image (a graphic image that can repeatedly fill a space) as a background for the 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 these tags:

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

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

Now let's get the image you will require to do this HERE and save it into your images/picture directory.

1. Open your volcanic.htm in your text editor.
2. Edit the lines for the first table cell row that read:

   <tr>
     <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> 
   
       To look like this:
   <tr>
     <th background="images/fire.gif">
     <font color=#EE8844>Eruption</font></th>
     <th background="images/fire.gif">
     <font color=#EE8844>Date</font></th>
     <th background="images/fire.gif">
     <font color=#EE8844>Volume in km
     <sup>3</sup></font></th>
   </tr>
   
   
   			  

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

Hey wait! Look, here is more! You can also add the bordercolour attribute to your <table> tag to shade the colours of a table with visible borders. Compare:

<table width="100%"  border="6" cellspacing="2" cellpadding="8">

Now changed to one with the borders coloured:

<table width="100%"  border="6" cellspacing="2" cellpadding="8" 
bordercolor="#FF0000">

This attribute for the <table> tag will have different effects between Netscape & Microsoft's IE.

CHECK YOUR WORK
Compare your web pages with this EXAMPLE 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 can very quickly become complicated, so double-check that you have defined the rows and columns correctly.

INDEPENDANT PRACTICE
Now Have a look at some of your own web pages and see if you can find any place's 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 coloured cells, or like we have done here, use the colours on an invisible table to colour blocks of areas on a web page. Also try aligning your whole table using the align attribute inside the <table> tag.

Top of page | Previous Lesson| Lessons Index | Next Lesson