Laboratory Exercise on Tables and Frames in html
So far, our examination of html has included labs on html basics and user data. This lab considers some
additional elements of html format -- particularly the layout of materials
Many Web pages contain sections in which data are organized into rows and
columns. As an example, sample-table.html
contains a brief table identifying five of the labs developed for use with
the book, The Tao of Computing.
Within html, tables provide a convenient mechanism for organizing data
within this type of structure. While many refinements are possible, the
basic html tags for tables are:
|Command || Meaning ||Note |
|<table>||begin a table
||Requires corresponding </table> |
|<tr>||begin a row within the table
||Requires corresponding </tr> |
|<th>||begin a header field within a row of the table|
|<td>||begin a data field within a row of the table|
In each case, some additional formatting information may be inserted within
each tag. For example,
border may be included within a <table> tag to
provide a box around each square of the table;
align="left" or align="center" or align="right"
may be included with a <th> or
<td> tag, so the data will be left justified, centered
left-to-right, or right-justified within each table box; and
valign="top" may be included with a <th> or
<td> tag, so that the data will begin at the top of a box
rather than being centered vertically in each cell.
The directives for horizontal and vertical alignment within the
<th> and <td> may be given independently;
align may be specified regardless of whether valign is
given, and conversely.
Display the Web page sample-table.html
in your browser, save it to the public_html subdirectory of
your account, set its permission code to be accessible over the Web, and
check that you can view it in your browser.
The table in the original sample-table.html
contains the designation
Describe what happens if you remove the word border from this tag.
Change the table tag to read
<table border width="100%">
Describe any differences you observe.
Change "100%" in the previous step to "90%", and again describe what you
After experimentation, describe what "100%" or "90%" is referring to within
a table tag.
What happens if you omit the percent sign in the previous parts?
What do you think width=200 means in this context?
Now look at the body tag for this sample page. The full tag
Here, bgcolor describes the "background color" for the page. The
values EAEAEA give red, green, and blue values on a scale from
0 to 255, with 2 digits for red, 2 digits for green, and 2 digits for blue.
Note, however, that the numbers are written in hexadecimal notation (base
16 numbers), rather than decimal numbers. In this notation, the single
digits are 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. That is, A
represents the number 10, B the number 11, etc.; F represents the
decimal number 15. In this notation, the values 0 through 255 (decimal)
correspond to the hexadecimal numbers 00 through FF. The value "EA"
corresponds to the decimal value 238.
In specifying the background color "EAEAEA", the first EA gives the
intensity (238) of red for the background, the next EA gives the intensity
of green, and the final EA gives the intensity for blue. Since these red,
green, and blue values are equal and fairly close to the maximum 255, the
background for this Web page seems almost white.
Try several different background colors, and note the appearance of the
resulting page. In your experimentation, include "#00EAEA", "#EA00EA",
"#EAEA00", "#FF0000", "#00FF00", and "#0000FF".
When you have finished experimenting, reset the background color to the
html allows the color of individual table rows and table cells to be
specified, again using a bgcolor modifier within a
<tr>, <th>, or <td>.
Experiment with the bgcolor for tables, rows, and data elements:
Use a bgcolor attribute within the table to make the first row
Use bgcolor attributes within cells to make a checkerboard pattern
of colors for the second, third, and fourth rows of the table.
What happens if you use the bgcolor attribute to specify the last
row will be green, and at the same time specify the background color for
the second cell in the last row will be blue?
The notes earlier in this lab discussed the valign attribute.
Remove this attribute from one or two cells within sample-table.html and
describe what happens.
Use the align attribute with the table headers to left justify the
titles of the table.
Sometimes in defining a table, it is convenient for one cell to extend over
several rows or several columns. This is accomplished by the
rowspan and colspan directives within
<th> and <td>. For example, the home page for Henry Walker contains a table of
courses, organized by semester.
View Henry Walker's home page, and examine the
table of courses. Then view the page source for this page, and scroll down
to find the html table for this course display.
Describe how rowspan is used.
Various numbers (2, 3, and 4) are used with rowspan within this
table of courses. Explain the role of these numbers; why is each number
used in each case?
Design your own table, including data related to one of your interests. In
developing your table, use some variety of colors, rowspans and/or
colspans, and alignments of materials.
As we have seen, tables provide a helpful mechanism for organizing data
within a Web page. Frames provide a helpful mechanism for dividing a Web
page into pieces. The following example illustrates this mechanism.
The Web page sample-frames.html provides a
framework for several recent html pages discussed in this course.
Following a common Web format, sample-frames.html organizes several pages by
placing an index of pages on the left and showing the pages themselves on
The right page begins with a general title, and a Next link leads
to the "Sample Form", largely as described in the recent lab on forms.
Within the "Sample Form" page, a Previous link leads back to the
general title, while a Next link leads to "Another Form", also as
described in the recent lab on forms.
Within the "Another Form" page, a Previous link leads back to the
"Sample Form", and the Next link leads to the "Sample html Table"
described earlier in this lab.
The Previous link from the "Sample html Table" moves back to
Altogether, several pages on the right are linked together, and the left
column of sample-frames.html provides an
Experiment with sample-frames.html.
Check the "Previous" and "Next" links on each page, noting how they work.
When moving from one page to the next, describe what, if anything, happens
within the index on the left.
Check that the links in the index do indeed change the right panel
to the relevant pages.
Since the sample frames draw from several pages, copy the entire group to
your "public_html/105" subdirectory using a terminal window.
Move to your "public_html/105" subdirectory
Copy the files by using the command:
cp ~walker/public_html/fluency-book/labs/sample-frames* .
Here, the asterisk * matches all character strings, so
sample-frames* matches all file names that begin with
Set the permission codes of these files, so all may be viewed in your
The overall structure for this material is provided by sample-frames.html. In particular, a
frameset indicates the page will consist of 2 columns, one
covering 20% of the page width, and the second covering the remaining 80%.
View the page source for this page within an editor.
What happens if you change cols="20%, 80%, *" to
cols="30%, 70%, *" or to cols="20%, 60%, *"?
What happens if you change cols="20%, 80%, *" to
rows="20%, 80%, *"?
What happens if you change cols="20%, 80%, *" to
rows="20%, 35%, 35%, *" or to cols="20%, 60%, *"
and add a new line
<frame name="lab" src="/~walker/fluency-book/labs/html-tables-frames.shtml">
within the frameset section?
Within a frameset section, note that each frame is given a name.
Now, look at the first title index page in your editor:
How is this page structured? That is, describe the mechanism(s) used to
indicate the phrases "Title", "Forms Examples", and "Table Example".
When you are viewing the title page on the right, the corresponding
sample-frames-index-title.html is displayed on the left panel.
How does sample-frames-index-title.html highlight the "Title"
section in the overall page?
When you click on "Table Example", the right page moves to another page.
This is accomplished in two parts: "Table Example" is a link to
"sample-frames-table.html", and the target of this link is the "materials"
frame defined originally.
Go back to the title page in your browser. Then, within
Change the reference from "sample-frames-table.html" to
browser-basics.html, reload the browser, test the index link
for the "Table Example", and describe what happens.
Maintaining the previous change to browser-basics.html,
to target="index" (in the same reference as
browser-basics.html). Then reload, test, and observe as in the
Make some tentative conclusions regarding the meaning of the "target" field?
In this material, each right-hand page specifies what index page should be
displayed, so the highlighting in the index matches the page displayed on
Load sample-frames-table.html into your editor, and note the
body tag. The onload attribute indications an action to
be performed whenever this page is loaded. In this case, top
refers to the overall frameset, and index refers to the frame with
the name "index". The statement
specifies that the URL location to be used in the index frame
should be set to sample-frames-index-table.html as soon as
sample-frames-table.html is loaded.
Change sample-frames-index-table.html to
browser-basics.html in sample-frames-table.html,
reload your browser, and explain what happens.
Use an editor to work with sample-frames-index-title.html,
and change the link for "Forms Examples" to another name -- that
is, consider misspelling the link corresponding with "Forms Examples".
Now reload the form to the title page in your browser, and click
on "Forms Examples". Describe what happens when a reference within a form
Work To Be Turned In
Copies of the file sample-table.html for steps 4, 6, 8
Explanations for steps 2-5, 7-8, 11-17
This laboratory exercise coordinates with Chapter 11 of
Walker, Henry M.,
The Tao of
Computing: A Down-to-earth Approach to Computer Fluency, Jones and
created April 5, 2004
last revised April 5, 2005