Nguyen Vu
May 17, 2000
Comp 212 (Wed 6-10)
Leslie Potter
Assignment 6
(HTML: Tutorial 4)
Due Date: May 17, 2000
HTML Tutorial 4 Tables:
· Read the learning objectives at the beginning of the chapter.
· Draft an outline or map of the chapter main topic and subtopics.
Create a text table
Create a graphical table using the <TABLE>, <TR>, and <TD> tags
Create a table headers and captions
Control the appearance of a table and table text
Create table cells that span several rows or columns
Use nested tables to enhance page design
Learn about Internet Explorer extensions for use with tables
· Write answers to these questions.
1. Explain the following terms:
Extensions (p. 4.43) - are additional tags that are added to the <TABLE> tag so that you can control of table border colors and appearance of cell boundaries.
Fixed-width font (p. 4.3) - are fonts that allots the same amount of space to each character and to the empty spaces between characters. You want to use this type of fonts inside a table because using proportional font may cause errors when the page is rendered in the user's browser.
Graphical table (p. 4.2) - are table that allows you to include design elements such as color, shading, and borders in a table therefore giving you more control over the table's appearance.
Gutter (p. 4.34) - in a table, is the "blank cell" that separates the material cells.
Proportional font (p. 4.3) - are fonts that produce letters or characters that are differs in shapes thus resulting in varying widths.
Spanning cell (p. 4.25) - a cell that takes up more than one cell therefore appearing bigger or longer than the rest in the table.
Text table (p. 4.2) - is the other type of table that only use text and appears even with equally spaced lines and columns.
2. Contrast text tables and graphical tables.
Text table only has fixed width fonts while graphical table has more control over the type of fonts used, border colors and styles.
3. Contrast fixed width and proportional fonts.
Fixed width fonts are like characters that are boxed up in a same size box while proportional fonts are more appealing because they are in varying width therefore each character are varies in size.
4. Why do you need the <PRE> tag?
You need the 'pre' tag if you have a preformatted text or a text that have already been written and want to retain the original spaces and blank lines when you put it on a web page. This feature is useful in maintaining the structure of a text table.
5. Contrast the <TR>, <TH>, and <TD> tags.
These tags are for creating a table in html code.
<TR> stands for 'Table Row' and is use to signal a beginning of a row in a table.
<TD> stands for 'Table Data' and is inside or sub of the 'table row' to indicate information to be place in the table row.
<TH> stands for 'Table Header' or and is to create the first row of the table or column heading.
6. Explain the appearance effects associated with borders, color, cell spacing, and cell padding.
A table can be modifies in a few ways to create more appealing effects for the audience.
The border, like a picture frame, can be made thin or thick. Color can be added to the background of each individual cell. Cell space between each cell can be adjust with the use of 'cellspacing' tag. And space between the text inside the cell can be adjust by using the 'cellpadding' tag.
7. Explain the appearance effects associated with table and text alignment using possible values in an example.
A table by default will align all table to the left side and have text above and below it, but with the <TABLE ALIGN=alignment> where alignment can be either 'left'(where table is align left with text to the right) or 'right'(where is table is align to the right with text to the left). The table can also be center with the <CENTER> and </CENTER> tag wrap around it.
i.e.
These tags can also be place inside the 'td' or table data and 'tr' table row to align the data in the cells.
8. Explain the appearance effects associated with table and cell size.
A table width and height can be adjust either by percentage or from a specified number of pixels with the tag 'width=size height=size' where size is the desire number within the <Table> tag. The same width and height tag can also be use to control the cell in proportional to the table when place inside <TH> or <TD>.
9. How do you set the minimum width of a cell?
To set the minimum width of a cell, you would insert the width tag as above, but it does not guarantee that one cell width minimum will be such because all cells in the column affects the other. To guarantee the minimum width, all cells in the same column must be set the same width.
10. Why might you want to set table cell background colors?
You might want to set the cell table background colors to override the colors set by the table's background color.
11. Explain how row and column spanning works and why it is used.
Row and column spanning refers to a cell that takes up more than just one cell space therefore spanning into space of other cells resulting in a larger and or longer cell. This technique is useful for many things among which is for a title spanning across the top cell of a table. This can be accomplish by using a 'rowspan=value' or 'colspan=value' tag where value is the number of cell that the target cell will span and place the tag inside the 'td' tag of the desired cell to be manipulate.
12. Explain how nested tables work and why you would use them.
A table that is created inside another table is called a nested table. To create a nested table, simply chose the cell or 'td' tag where the nested table will be reside and create a new table html code. This is a useful technique among which is to create nice layout on a web page with multiple sections.
13. What is the comment syntax and why would you use it?
The comment syntax would appear something like this: <! Comment text>. It is a handy tool to make comments for yourself or other who may view your Html code. It would describe certain section of the without interference to the output or performance of the web page.
14. Explain the 6 design principles listed on page 4.42.
Diagram the layout before you start writing the HTML code.
Create the text for various columns and cells in separate files, which you'll insert later.
Create the table structure for the outer table first, and then gradually work inward.
Insert comment tags to identify the difference sections of the page.
Indent the various levels of nested tables, to make your code easier to follow.
Test and review your code as you proceed, in order to catch errors easily.
15. Contrast table border colors with frames and rules.
Border colors are the setting of dark color at the bottom right corner of cells and light color at the upper left of the cells while frames control whether you want the outer frame of the table. Rules allow you to manipulate the inner horizontal and vertical cell walls.
16. By the end of the week, add your name to the page, print the source, place your work on oscar, link to it from your home page and test it with both browsers.
· What other things have you learned about this topic?
· What were the most important things you learned about this topic?
· What is still unclear about this topic?
· How can you clarify what is still unclear about this topic?
CODES:
<CAPTION ALIGN=value(TOP, BOTTOM)>caption text</CAPTION>
| text |
| text |
<TABLE ALIGN=alignment(LEFT, RIGHT) BORDER=size(pixel)
CELLSPACING=size(pixel) CELLPADDING=size(pixel)>
<#### WIDTH=size(percent, pixel) HEIGHT=size(percent, pixel)>
<#### VALIGN=alignment(TOP, MIDDLE, BOTTOM)>
<#### BGCOLOR=color>
<TD ROWSPAN=value(# cells) COLSPAN=value(# cells)>text</TD>
<TABLE BORDERCOLORDARK=color BORDERCOLORLIGHT=color>
<TABLE FRAME=value(BOX, ABOVE, BELOW, HSIDES, LHS, RHS, VSIDES, VOID)>
<TABLE RULES=value(ALL, ROWS, COLS, NONE)>
<CENTER></CENTER>
<! Comment text>