Tables - A Practical Exercise
Test your knowledge and build a simple table through this exercise
Let us now add a table to our florist web site. The table will be on its own web page and will hold the online shop's catalogue. To construct a new page, we will need to first save the skeleton of the florist.htm page without any of the content. Following is the skeleton. Change the title and heading to 'Online Catalogue' and save it as a new page with the name catalogue.htm in the same directory as the florist.htm page.
Florist Web Site Skeleton Page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Flowers - ***Replace with the Title***</title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <h1>***Replace with the Heading****</h1> <br> <hr> *******CONTENT GOES HERE******* </body> </html>
We are now ready to create a table to hold our catalogue. The catalogue has six items - this means our table will contain six rows and a header row. Each item has a name with an image, a description, and a price. This means our table will have three columns. Let us construct a skeleton for our table
<TABLE width=100%>
<TR>
<TH></TH> <TH></TH> <TH></TH>
</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>
<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>
Now, take the following information and put it into the appropriate cell in the table. Clicking on the name of the product will allow you to view and download the associated picture.
Headings for the table:
Product
Description
Price
Products in table:
Red Roses, Red Roses that will Capture Your Heart, $99.99
Lilies, Lilies to Light Your Way, $89.99
Yellow Roses, Gorgeous Roses of a Deep Yellow, $79.99
Orchids, Rare Orchids that will Bowl you Away, $69.99
Tulips, Tulips to Brighten Your Day, $59.99
Mixed Bouquet, A Lovely Bouquet of Mixed Flowers, $49.99
You may have problems aligning the name of the product and the picture correctly in the first column. This problem may be resolved by nesting a small table with a single column and two rows within each cell of the first column. The top row of this nested table would contain the image, and the second row would contain the name of the product. Following is a sample nested table. This table goes into the first cell in the first row:
<table> <tr><td align=center><img src="images/redrose.png" alt="red roses" width=200 height=140></td></tr> <tr><td align=center>Red Roses</td></tr> </table>
Be sure to include accurate information under height and width for each picture. Right click on the image and view its properties to get the right values for height and width. Before we view the output, let us add a simple style definition for our table into the style.css file:
table, td
{
font-family: Arial, Verdana, Helvetica;
font-weight: bold;
font-size: 10pt
}
th
{
font-family: Arial, Verdana, Helvetica;
font-size: 14pt;
font-weight: bold
}
Let us take a look at our new page. Examine the source of the following link to compare the HTML behind this screenshot with your HTML.
ScreenShot 4c: Part of the catalogue.htm Page
