Intro to Web Building - Unit 4
Tables
Tables are incredibly useful because they are one of the easiest ways to control spatial arrangements on your page. To discover what I mean, follow the directions below. You will create a page that looks roughly like this:
|
YOUR TITLE YOUR TITLE YOUR TITLE YOUR TITLE YOUR TITLE YOUR TITLE |
||
|
 |
A picture relating to your subject, and an explanation of its significance. |
|
Another picture relating to your subject, and an explanation of its significance. |
 |
|
See the Sample Table. Use the Source Code from this page if you run into any problems designing your own page.
1. When making a table, always begin by sketching a map (like the one above) to organize your material - otherwise, things get all wonky!
2. Find 2 pictures pertinent to your subject and download them to your desktop or disk.
3. Open a second Netscape window and go to http://www.geocities.com/ or http://webspace.utexas.edu. Access your account and select Upload Files.
4. Upload the 2 pictures you selected.
5. Return to the File Manager and create a new page by clicking the New button. (UT webspace users - use SimpleText to create new .html file on your hard drive)
6. Delete whatever code Geocities has automatically inserted, and replace it with your own code. Remember to open your page with HTML, HEAD, and BODY tags.
7. Type the following to create a table (note that it contains a bulleted list nested in one of the columns - see green text.) Replace red text with your own words / images.
<TABLE border="0">
<TR>
<TH colspan=3> List </TH>
</TR><TR>
<TD rowspan=2>
<UL>
<LI>Fact 1</LI>
<LI>Fact 2</LI>
<LI>Fact 3</LI>
<LI>Fact 4</LI>
<LI>Fact 5</LI>
</UL>
</TD>
<TD> <IMG SRC="gerbera.jpg"></TD>
<TD>a short paragraph about your picture</TD>
</TR><TR>
<TD>a short paragraph about your 2nd picture</TD>
<TD> <IMG SRC="rocky.jpg"> </TD>
</TR></TABLE>
8. Save your file in geocities and click the View option to see the results (or upload to UT webspace).
Advanced Skills for Tables
To edit your table more precisely, use the following advanced features. Perform at least 4 for credit.
1. To limit the size of your table, include the WIDTH specification within your TABLE tag. You can specify the table's width in either pixels or in the percent of the width of the screen.
<TABLE WIDTH=750> OR
<TABLE WIDTH=80%>
(750 pixels is about 3/4 of a 17" monitor.)
2. To center your table, include the align=center command in the TABLE tag.
<TABLE WIDTH=80% align=center>
3. To align the contents of an individual cell, use the align= command for horizontal placement, and the valign= commmand to arrange the text vertically. Use these commands in the <TD> tag. Both can be used simultaneously. Align direfctions are: leftm center or right. Valign directions are: top, middle, bottom, or baseline.
<TD align=left valign=middle>
4. You can set the width of a cell using the same command as your used in sizing the table:
<TD width=300>
5. To change the background color of a table or a cell, use the bgcolor="#000000" command (the same command that you use in the BODY tag to set the background color for the page.
<TABLE bgcolor="#e6e6e6">
<TD bgcolor="#8b3626">
6. If, after you have added color to your table, lines appear between your cells, insert the CELLSPACING command into the TABLE tag and set it to 0.
<TABLE WIDTH=80% align=center cellspacing=0>
7. To set the space between the content of your cell and the cell walls, use the CELLPADDING command only in the TABLE tag (not available for individual cells).
<TABLE WIDTH=80% align=center cellspacing=0 cellpadding=6>
8. If you have difficulties, see the Source Code for the Sample Table.