Table and frames in html
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:
- border may be included within a tag to provide a box around each square of the table;
- align="left" or align="center" or align="right" may be included with a or 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 or 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 and 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.
- Describe what happens if you remove the word border from this tag.
- Change the table tag to read
Describe any differences you observe. - Change "100%" in the previous step to "90%", and again describe what you see.
- 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 reads:
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 original off-white.
html allows the color of individual table rows and table cells to be specified, again using a bgcolor modifier within a , , or .
- Experiment with the bgcolor for tables, rows, and data elements:
- 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?
Frames
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 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 "Another Form".
Altogether, several pages on the right are linked together, and the left column of sample-frames.html provides an index.
- 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.
- Move to your "public_html/105" subdirectory
- Copy the files by using the command:
cp ~walker/public_html/fluency-book/labs/sample-frames* .
- 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%, *"?
Within a frameset section, note that each frame is given a name. Now, look at the first title index page in your editor: sample-frames-index-title.html
- How is this page structured? That is, describe the mechanism(s) used to indicate the phrases "Title", "Forms Examples", and "Table Example".
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 sample-frames-index-title.html,
- 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, change target="materials" to target="index" (in the same reference as browser-basics.html). Then reload, test, and observe as in the previous step.
- 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 the right.
- 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
onload="top.index.location='sample-frames-index-table.html';"
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.
Work To Be Turned In
- Use a bgcolor attribute within the table to make the first row green.