Computer Science Illuminated, Third Edition

eLearning

Animated Flashcards
Live Wire
Cryptic Crossword Puzzles
Ethical Issues
Biographical Sketches
Did You Know
Goin Live
Google Code Digital Lab Manual
Online Glossary
The Learning Store
Language Library
Download PEP/7
Instructor Resources
Student Resources

eLearning Home

Lab #8

Tables


8.1 Table Tags

Up to this point, we have organized the text of our web pages in paragraphs or lists.  However, as you've likely seen by reading these labs, we can create and use tables to align and organize our data.  Tables are a powerful formatting tool in HTML, and have a great many attributes and nested tags which define how the resulting table will appear.

One example of a simple table is the table below.
My
table!

This table contains two rows of data and one column of data.  The table also has a one pixel border.  To create this table we used the following HTML code:
<table border="1">
<tr><td>
My</td></tr>
<tr><td>
table!</td></tr>
</table>
From this simple example, we can deduce the following syntax of HTML tables:
<table border="width_value">
<tr><td></td></tr>
</table>

A table is created by using the opening and closing table tags.  Inside the opening table tag, we can optionally specify a border attribute which will define the thickness of the table's border in pixels.  If the border attribute is not provided, the table will be rendered with a default border of 1 pixel.

Within the opening and closing tags, we can create rows for our table by using the table row tags (<tr> and </tr>), and within the table row tags we can place one or more table data cell tags (<td> and </td>) which will create the actual cells of the table.  Therefore, to create a table with a two pixel border which contains three columns and four rows, we would use the following HTML:
<table border="2">
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
The cells of this new table contain no data, since we did not place any text between the table data cell tags.  However, if we modify our HTML code to the following...
<table border="2">
<tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td><td>Row 1, Column 3</td></tr>
<tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td><td>Row 2, Column 3</td></tr>
<tr><td>Row 3, Column 1</td><td>Row 3, Column 2</td><td>Row 3, Column 3</td></tr>
<tr><td>Row 4, Column 1</td><td>Row 4, Column 2</td><td>Row 4, Column 3</td></tr>
</table>
we would create the following table.
Row 1, Column 1 Row 1, Column 2 Row 1, Column 3
Row 2, Column 1 Row 2, Column 2 Row 2, Column 3
Row 3, Column 1 Row 3, Column 2 Row 3, Column 3
Row 4, Column 1 Row 4, Column 2 Row 4, Column 3

Of course, we can add formatting to the contents of each cell, producing even more spectacular results, such as:
Row 1, Column 1 Row 1, Column 2 Row 1, Column 3
Row 2, Column 1 Row 2, Column 2 Row 2, Column 3
Row 3, Column 1 Row 3, Column 2 Row 3, Column 3
Row 4, Column 1 Row 4, Column 2 Row 4, Column 3

To improve the appearance of our product pages, we'll incorporate the use of a table to align the product image, title, and description.  Referring back to the mock-up of our product pages in Lab 2 (Figure 2), we see that our original intention was to place the product photo near the top of the page, to the left of the product number and product name.  Beneath the photo, number and name, we placed the text of the description of the product and the price.

Thus, for now, we'll place a table which has one row and two columns in the product pages and insert the photo, number and name of our product in the table.  Then, beneath the table, we'll relocate the text for the product description and the price.  The HTML code below will demonstrate how we modified the product page, and the results of our changes can be seen in Figure 1.
<html>
<head>
<title>
Pete's Pet Store</title>
</head>
<body>
<table border="0">
<tr>
    <td><img src="catnap.jpg" border="2" align="left" alt="Mort using the Cat Window Lounger"></td>
    <td><b>
Item Number:</b> 23445-555<br><br>
    <h3>
Cat Window Lounger &reg;</h3></td></tr>
</table>


<p><b>Product Description:</b> <blockquote>Does your house cat like to lie in the window and day dream of being outside?  Is your feline prone to napping in the window?  The Cat Window Lounger is the <u>perfect present</u> for your
special friend.</p>

<p>The frame attaches to your window sill and is covered by a plush cotton bed.  One size fits all, available in beige (shown) and black.</p></blockquote>

<hr width="30%" align="left">
<b>
Price:</b> $22.95

<p><a href="main.html">Return to home</a></p><hr>
Pete's Pet Store
<i>&copy; 2002</i>
</body>
</html>
Adding a table (with no borders) to our web page.
Figure 1: Adding a table (with no borders) to our web page.

In addition to table data cell tags (<td>, </td>), HTML includes table header cell tags (<th>, </th>) which are used to enhance the appearance of row and column headers in a table.  There is no rule as to where in the table header cells can be placed.  That is, they do not necessarily need to be located at the start of a row or column, and their use is entirely optional.  Most web browsers will render the contents of a table header cell by bolding the enclosed text so that it visually stands out.

As an example, we will take one of our sample tables from above and modify it to include the use table header cells.
<table border="2">
<tr><th></th><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
<tr><th>Row 1</th><td>R1, C1</td><td>R1, C2</td><td>R1, C3</td></tr>
<tr><th>Row 2</th><td>R2, C1</td><td>R2, C2</td><td>R2, C3</td></tr>
<tr><th>Row 3</th><td>R3, C1</td><td>R3, C2</td><td>R3, C3</td></tr>
<tr><th>Row 4</th><td>R4, C1</td><td>R4, C2</td><td>R4, C3</td></tr>
</table>

Column 1 Column 2 Column 3
Row 1 R1, C1 R1, C2 R1, C3
Row 2 R2, C1 R2, C2 R2, C3
Row 3 R3, C1 R3, C2 R3, C3
Row 4 R4, C1 R4, C2 R4, C3

Notice how the row and column headers are rendered by your browser in the example above.

Lab Activity #1:
Add a simple HTML table to one of your web pages.  Be sure to use the border attribute and create a border with a thickness of 2 or more pixels.

Your table should be at least 3 rows and 2 columns in size.

Include both table data cells and table header cells in your table.


8.2 Spanning Rows and Columns

In the previous example, we've had to place our Product Description text below the table we included.  Had we included the text in the table, we'd need to insert it into the contents of one of the cells of the table.  However, it would be located in the second row of the table in either the left of right cell in that row.  That is, our results might appear as either of the two tables below:

Mort using the Cat Window Lounger Item Number: 23445-555

Cat Window Lounger ®

Product Description:

Does your house cat like to lie in the window and day dream of being outside? Is your feline prone to napping in the window? The Cat Window Lounger is the perfect present for your special friend.

The frame attaches to your window sill and is covered by a plush cotton bed. One size fits all, available in beige (shown) and black.


Mort using the Cat Window Lounger Item Number: 23445-555

Cat Window Lounger ®


Product Description:

Does your house cat like to lie in the window and day dream of being outside? Is your feline prone to napping in the window? The Cat Window Lounger is the perfect present for your special friend.

The frame attaches to your window sill and is covered by a plush cotton bed. One size fits all, available in beige (shown) and black.


Ideally, we would like to include our description as part of the table.  However the appearance of the description in only one of the two cells looks rather peculiar.  Fortunately we have access to the colspan attribute which can be used to specify the number of columns a table data cell will span.  By modifying the table data cell tag for the first cell in the second row, we can specify that that cell will span 2 columns (the originial column to the left, and the one to the right).  That is,
<tr><td colspan="2"><p><b>Product Description:</b> <blockquote>Does your house cat like to lie in the window and day dream of being outside?  Is your feline prone to napping in the window?  The Cat Window Lounger is the <u>perfect present</u> for your special friend.</p>

<p>The frame attaches to your window sill and is covered by a plush cotton bed.  One size fits all, available in beige (shown) and black.</p></blockquote></td></tr>
By rewriting this bit of HTML in our table, we can now place the Product Description text in one cell in the second row which spans both columns.  The result of this change is reflected in Figure 2.

Applying the colspan attribute
Figure 2: Applying the colspan attribute.

Not only can you span multiple columns of a table, you can also span multiple rows.  The rowspan attribute works exactly the same way that colspan does.  Simply add it to a table data cell tag (<td>) and provide the number of rows you wish to span.

Lab Activity #2:
Add the colspan and rowspan attributes to one or more cells in your table(s).  Be careful to keep track of which tags they need to appear in to obtain the desired effect.  Sometimes it's helpful to draw your HTML table out on paper first to ensure that you properly associate your table data cells with the desired results.

8.3 Cell Padding and Spacing

Two additional HTML attributes can be used in tables to control the spacing between and within table cells.  These are the cellpadding and cellspacing attributes, and they are optionally added to the table tag.  The first attribute, cellpadding, accepts an integer value which specifies the amount of extra (added) space between a cell's contents and the border of a cell.  The amount specified is in terms of pixels, and this width is applied around the cell's contents (on all four sides).

The second attribute is the cellspacing attribute, which also accepts an integer value specifying the amount of extra space (in pixels) that should be added by the browser around the outside of each table cell.

For example, let's take our product page (somewhat abbreviated, and before we applied the spanning attribute):

Mort using the Cat Window Lounger Item Number: 23445-555

Cat Window Lounger ®

Product Description:

Does your house cat like to lie in the window and day dream of being outside? Is your feline prone to napping in the window? The Cat Window Lounger is the perfect present for your special friend.


Currently, the width of each column is as wide as the widest cell in the column.  Similarly, the height of each row is as big as the tallest cell in the row.  There is no additional cell padding or spacing applied.  If we modify the <table> tag for this table to the following, we'll add 10 pixels of cell padding to the interior of each cell.
<table border="1" cellpadding="10">
The result of our change is shown below.  Notice how there is extra space (10 pixels) around each of the cells' contents.

Mort using the Cat Window Lounger Item Number: 23445-555

Cat Window Lounger ®

Product Description:

Does your house cat like to lie in the window and day dream of being outside? Is your feline prone to napping in the window? The Cat Window Lounger is the perfect present for your special friend.


By adding the cellspacing attribute to the table tag as well, we can change the appearance of the table again!
<table border="1" cellpadding="10" cellspacing="10">
Mort using the Cat Window Lounger Item Number: 23445-555

Cat Window Lounger ®

Product Description:

Does your house cat like to lie in the window and day dream of being outside? Is your feline prone to napping in the window? The Cat Window Lounger is the perfect present for your special friend.


Now, there is additional space added to the table between the cells.

The cellpadding attribute can also be expressed in terms of a percentage.  If a percentage is specified, the left and right margins of the cell are padded with equal amounts (1/2 each) of the specified percentage of the available horizontal space.  Likewise, the top and bottom margins of the cell are padded with equal amounts (1/2 each) of the specified percentage of the available vertical space.

Lab Activity #3:
Modify your tables to include the use of the cellpadding and cellspacing attributes.

8.4 Table and Cell Alignment

Up to this point, we have not covered any details on how to provide alignment directions to a browser with regards to a table or a cell's contents.  We can do so, however, with just a few more attributes for both the table and cell tags.

By adding the align attribute to the table tag (<table>), we can provide direction to the browser as to the correct position of the table with respect to the document.  Valid values for the align attribute include left (the table is aligned with the left margin of the document), center (the table is aligned in the horizontal center of the document), and right (aligning the table with the right margin of the document).

Thus, to place the table in the center of our web page (horizontally centered), we would modify our existing HTML to be:
<table align="center" border="1" cellpadding="10" cellspacing="10">
HTML 4.0 has deprecated the use of the align attribute in favor of Cascading Style Sheets (CSS).

A table data cell can contain the align attribute as well.  In addition to the left, center, and right values described above, you can provide the justify value.  Thus, you can position the contents of a table cell adjacent to the left margin of the cell, in the center of the cell, along the right margin of the cell, and fully (double) justified (used for text values).

Table data cell tags may also contain the valign attribute which specifies the vertical alignment of the cell's contents.  Possible values for this attribute are top, middle, bottom, and baseline.  The top setting places the contents of the cell flush with the top margin of the cell.  Likewise the bottom setting places the contents flush with the bottom margin of the cell.  The middle setting vertically aligns the contents, providing equal spacing above and below the contents.  Finally, the baseline setting will force all of the text in all of the cells in the same row to have a common baseline for their first line of text.  This last setting generally helps to keep the appearance of textual contents vertically aligned on a common vertical point.

In the example below, we have modified the product page for the catnip toy product, using several align and valign attributes.  Note that in the example, we have left the border "on" by setting it to one pixel wide, so that you can more easily view the alignment settings in action.  Figure 3 shows a screen capture of this product page.
<html>
<head>
<title>
Pete's Pet Store</title>
</head>
<body>
<table border="1">
<tr>
    <td align="center" valign="center"><img src="catnip.jpg" border="2" alt="Mort using the Cat Window Lounger"></td>
    <td><b>
Item:</b> 23445-533<br><br>
    <h3>
Catnip Toy &reg;</h3></td></tr>

<tr>
    <td colspan="2" align="justify"><p><b>
Description:</b> <blockquote>100% homegrown catnip is all that goes into the handmade toy!  That's right, we grow and cut our own for the freshest nip around.

<p>These plush toys are guaranteed to keep your feline companion happy and occupied for weeks on end (or until they lose the toy!)  The outer shell is made from 100% cotton, and the entire toy is produced here in the USA!</p></blockquote></td></tr>
</table>


<hr width="30%" align="left">
<b>
Price:</b> $4.95
<hr>
Pete's Pet Store
<i>&copy; 2002</i>
</body>
</html>

  Applying the align and valign attributes.
Figure 3: Applying the align and valign attributes.
You can also modify the overall width of your table by using the width attribute in the table tag when creating your table.  The width attribute accepts both a pixel value (integer) and a percentage value to designate how wide the table should be rendered.  If the percentage value is used, the percentage is interpreted in terms of available horizontal space in the browser at the point of the table's insertion.

For example, in the creation of the table above, we could have modified the code as demonstrated below so that the table was only 80% of the width of the available horizontal space.
<body>
<table border="1" width="80%">
<tr>
Lab Activity #4:
Integrate the use of the align and valign attributes into the tables you have created on your web pages.  Be sure to try at least three of the align values and two of the valign values.

In addition, use the width attribute to change the size of your tables.

8.5 Nested Tables

Our final topic on tables is the notion of placing one table within another.  As with nested lists (covered in Lab #7) we can place one table within the body of another.  To do so, simply add the table, table row and table data cell tags for the inner table within the table data cell tags for a cell in the outer table.

For example, in the code below, we'll create a nested table which holds the description of a product.  This inner table will be placed within the single cell in the second row of the outer table, which also contains the photo of our product and the item name and number for the product.  Again, we'll leave on the borders of the tables, so that you can more easily identify the cells and tables.  A snapshot of our modifications can be seen in Figure 4.
<html>
<head>
<title>
Pete's Pet Store</title>
</head>
<body>
<table border="1" cellpadding="10">
<tr>
    <td align="center" valign="center"><img src="scooper.jpg" border="2" alt="Closeup of litter scooper"></td>
    <td><b>
Item:</b> 23445-444<br><br><h3>Cat Litter Scooper &reg;</h3></td></tr>
   
<tr>
    <td colspan="2">
    <table align="center" border="1">
        <tr>
            <td><p><b>
Description:</b></td></tr>
        <tr>
            <td><blockquote>
Got a cat?  Well then, you need one of these!  Our pre-used cat litter scooper is just the thing for those budget conscience owners looking to cut corners.  We've bought into a massive supply of <i>used litter scoopers like the one shown here, and we've priced them to move quickly!</blockquote></td></tr>
        <tr>
            <td><blockquote>
Our sturdy scoopers are 100% plastic and feature a wide collection area with parallel slots to allow for easy filtering action.  Each scooper comes pre-cleaned and ready to handle your toughest litter box needs!</blockquote></td></tr>
    </table>

    </td></tr>
</table>

<hr width="30%" align="left">
<b>
Price:</b> $2.95
<hr>
Pete's Pet Store
<i>&copy; 2002</i>
</body>
</html>

Nesting a table within another table
Figure 4: Nesting a table within another table.

Lab Activity #5:
Add a nested table to one of the tables you have included in your web site.


About the labs:
These labs were developed in conjunction with the Jones and Bartlett textbook Computer Science Illuminated by Nell Dale and John Lewis.
ISBN:  0-7637-1760-6
Lab content developed by Pete DePasquale and John Lewis.

 
Educators: More Information About This Text Other Computer Science Titles at Jones and Bartlett
Copyright 2019 Jones and Bartlett PublishersContact webmaster