HTML - Tables as Layout

advertisement
HTML Tables
Exercise
Exercise
 Make
a page that has a list of links down
one side of the page
Exercise
 Find
recipes for 3 kinds of pie
 Make a page for each
 Each page should use a table layout with links
to each recipe in the left column and the
recipe in the right column.
Tips


Make the text in the left column a different
color than the text in the right column.
To override the link colors you must place the
font tag pair within the link:



<a href=“pecan.html"><font
color="#ffffff">Pecan Pie</font></a> -- correct
Set the width of the first column to the width
of the green area of your background image
It’s ok to copy/paste the recipe text from the
browser (but not the HTML)
Guide
<td>
Pie Recipes
Links to each
page
</td>
<td>
Recipe details here
</td>
<td> Attributes
Attribute
Description
Example
width
Width of the cell
width="285px"
valign
Vertical alignment
valign="top"
background
Can be an image
that is replicated
background=“cellb
g.png"
align
Horizontal
alignment
align="left"
<table> Attributes
Attribute
Description
Example
Width
Overall width of
table
width="100%"
Height
Overall height of
table
height="218px"
Table Exercise #2
 Create
this table:
Production & Sales Numbers
Production
Raha Mutisya
1493
Shalom Buraka
3829
Brandy Davis
0283
Sales
Claire Horne
4827
Bruce Eckel
7246
Danny Zeman
5689
Download