, and tags affect how a table looks and acts; how to create simple and complex tables; and how to use a borderless table for page structure.
Creating Page Structure with HTML Tables
U
sing tables, website designers can create interesting and complex page structures as well as display data in tabular form. Without tables, alignment is based on ALIGN attributes and can change depending on monitor resolution and size. Tables allow a designer to have complete control over where elements are placed and how they appear in the browser window. In this chapter, you will learn how to create complex tables to develop interesting page structures, thereby allowing you to have more freedom in your design as well as more control over it. Consider Figure 7.1. This page is divided into three areas: a navigation area on the left, a header on top, and a content area in the lower-right portion of the window. This layout is advantageous from a design standpoint because it
Copyright ©2002 SYBEX, Inc., Alameda, CA
www.sybex.com
Creating Page Structure with HTML Tables
175
gives the designer more control over the placement of elements on the web page and provides for a design that is more visually appealing than traditional vertical and horizontal alignment allows. You can format this design in two ways: you can use a borderless table as discussed in this chapter, or you can use frames, which we will discuss in the next chapter. FIGURE 7.1
Page structure with table
There is one great advantage to using tables instead of using frames: the user can easily bookmark the page or add it to the Favorites folder, whereas a frameset page cannot be bookmarked. (We will discuss why frameset pages cannot be bookmarked or added to the Favorites folder in Chapter 8, “HTML Frames.”) The disadvantage is that when the viewer scrolls vertically or horizontally, all of the content on the page scrolls together, as you can see in Figure 7.2. The navigation elements on the left are accessible only when the viewer is looking at the top of the page. With frames, on the other hand, you can create an environment where different portions of the page can scroll independently from each other. Within the standards of HTML 3.2, table structure is the only way (other than basic alignment) to create page divisions and add interesting structures to the page, such as in Figure 7.3. In this layout, the table is used to separate text and graphical elements, which provides a more complex page structure. In the exercises in this chapter, you’ll use tables to re-create this page.
Copyright ©2002 SYBEX, Inc., Alameda, CA
www.sybex.com
176
Chapter 7
HTML Tables and Web Page Structure
FIGURE 7.2
Text scrolls in table structure
FIGURE 7.3
Tables add page division and structure
Copyright ©2002 SYBEX, Inc., Alameda, CA
www.sybex.com
Creating Page Structure with HTML Tables
177
Body Tag The tag marks the beginning and end of the body section in an HTML document. It is where the majority of your HTML content goes. The tag can be modified to move the top and left margins of your page to the edge of the browser window. By default, an 8-pixel border exists between the content and the edge of the browser window. By using the following attributes—there is one set for Navigator and another for Internet Explorer—in the tag, you can remove the margin completely. The attributes for Navigator are as follows: MARGINHEIGHT=“0” MARGINWIDTH=“0” For Internet Explorer, use these attributes: TOPMARGIN=“0” LEFTMARGIN=“0” Following is an example of the tag used for this purpose:
Table Tag The tag is the first required tag in constructing your table. A table is contained within the opening and closing tags. This tag can be modified to allow your table to occupy the entire space of the browser window, depending on which attributes you use. If you use percentage values (%) for HEIGHT and WIDTH attributes, the table becomes dynamic and will change as content and the size of the browser window change. If you use pixel values for HEIGHT and WIDTH attributes, the table remains static and will not change as content changes and as browser window size changes. To ensure consistent display across different browsers, do not mix and match pixels and percentages; use one or the other. You can adjust the BORDER, HEIGHT, WIDTH, CELLPADDING, and CELLSPACING attributes to control how your table displays in the browser window. The BORDER attribute controls how large the border of the table will be and is usually represented in a fixed pixel value. HEIGHT and WIDTH control how much of the browser window your table will cover. HEIGHT and WIDTH attributes can also be used in individual cells within your table. CELLPADDING controls the amount of space within the cell, and CELLSPACING controls the amount of space between cells. All of these attributes will have an impact on how your table looks and acts and the space it takes up. The BGCOLOR attribute specifies the color to be used in your table and overrides any color information specified in your web page’s tag. Copyright ©2002 SYBEX, Inc., Alameda, CA
www.sybex.com
178
Chapter 7
HTML Tables and Web Page Structure
The BACKGROUND attribute can be used with the , , or tags but is only supported in Internet Explorer.
Table Row Tag The | tag is the second tag that is required when constructing a table. It is used to define the rows of a table. Modification of the tag will allow you to create uniform attributes—such as ALIGN, VALIGN, or BGCOLOR—for all cells in a row. The ALIGN attribute is used to align text to the left, center, or right of the cell, and the VALIGN attribute is used control the vertical alignment of cells (top, middle, or bottom). The BGCOLOR attribute specifies the color to be used in a row and overrides any color specified in the tag.
Table Data Tag The last essential tag in your table is the tag. It defines a cell within a row. The | tag has a counterpart in table creation: The | tag is used to define a cell whose purpose is to act as a table heading. The | tag is not a required tag in an HTML table, but it can be used as an alternative to the | tag when formatting is desired. The table header tag has built-in formatting and alignment features; data in a | cell automatically will be bold and will align to the center of the cell. Both tags can be modified by changing the BGCOLOR, HEIGHT, WIDTH, and ALIGN attributes. Narrow cells can be used to create visual separations between rows and cells. COLSPAN and ROWSPAN attributes are also used in the | or | tags to change the amount of space cells occupy. COLSPAN specifies the number of columns a cell should span, and ROWSPAN specifies the number of rows a cell should span. Using the COLSPAN and ROWSPAN attributes allows you to have one cell span multiple columns or rows.
Diagramming an HTML Table
A
s you’ve seen, tables can be used for both simple and complex page layouts. The easiest way to create a table to use as a structure for a web page is to first diagram the table. Consider the page structure shown in Figure 7.1. The three-cell table has two rows, and Cell 1 spans two rows. It can be diagrammed as shown in Figure 7.4.
Copyright ©2002 SYBEX, Inc., Alameda, CA
www.sybex.com
Diagramming an HTML Table
FIGURE 7.4
179
Page structure diagram
2
1 3
The table for the more complex page structure (shown in Figure 7.3) can be diagrammed as shown in Figure 7.5. This example has eight cells. Cells 3, 5, and 7 are used for border separation. Cells 2, 3, 7, and 8 each spans across columns to remain as single cells. In Exercise 7.1, you’ll create a simple table structure. FIGURE 7.5
Complex page structure diagram
2 3 4 1
5
6
7 8
Copyright ©2002 SYBEX, Inc., Alameda, CA
www.sybex.com
180
Chapter 7
HTML Tables and Web Page Structure
The files used in the exercises in this chapter as well as examples of the completed pages are located in the Chapter 7 Exercises and Complete folders on the CD-ROM that accompanies this book.
EXERCISE 7.1
Creating a Simple HTML Table Follow these steps to create a simple table structure:
1. Type the following HTML in a Notepad document: <TITLE>Basic Table
| Cell 2 |
2. Save the document as basictable.htm. 3. Preview basictable.htm in your browser. Your results should resemble the following diagram. Cell 2 Cell 1 Cell 3
Now that you’ve created a simple table, you’ll add additional ROWSPAN and COLSPAN attributes to create a more complex table in Exercise 7.2.
Copyright ©2002 SYBEX, Inc., Alameda, CA
www.sybex.com
Diagramming an HTML Table
181
EXERCISE 7.2
Creating a Complex HTML Table In this exercise, you will build your skills by creating a more complex table. To do so, follow these steps:
1. Diagram the table as shown in the following graphic.
2 3 4
5
1
6
7 8
2. Open basictable.htm in Notepad. 3. Choose File Save As. Save the file to your hard drive and name it complextable.htm.
4. Modify the HTML by typing in the text that appears in bold: <TITLE>Complex Table | Cell 1 | Cell 2 | | Cell 3 |
Copyright ©2002 SYBEX, Inc., Alameda, CA
www.sybex.com
182
Chapter 7
HTML Tables and Web Page Structure
EXERCISE 7.2 (continued)
| Cell 4 | Cell 5 | Cell 6 | | Cell 7 | | Cell 8 |
5. After saving your changes, open complextable.htm in your browser. It should resemble the following diagram. Cell 2 Cell 3 Cell 1
Cell 4
Cell 5
Cell 6
Cell 7 Cell 8 It’s important to keep in mind that if you use percentage values (%) for HEIGHT and WIDTH attributes, the table becomes dynamic and will change as content and the size of the browser window change.
Borderless Web Page Structure
You have created the basic table structures; in Exercises 7.3 and 7.4, you will transform them into page structures. Page structures are created by adding attributes to the HTML table, table row, and table data tags. When you change the value in the BORDER attribute to “0”, the border on your table will disappear. Tables with no borders are frequently used for
Copyright ©2002 SYBEX, Inc., Alameda, CA
www.sybex.com
Borderless Web Page Structure
183
page layout, whereas tables with the border showing are commonly used for displaying data. EXERCISE 7.3
Creating a Simple Web Page Structure To transform your basic table into a page structure, follow these steps:
1. Open basictable.htm in Notepad. 2. Modify the HTML by adding the text that appears in bold: <TITLE>Page Structure
Copyright ©2002 SYBEX, Inc., Alameda, CA
www.sybex.com
184
Chapter 7
HTML Tables and Web Page Structure
EXERCISE 7.3 (continued)
3. Save this HTML as basicstruct.htm on your hard drive. 4. Open basicstruct.htm in your browser and compare your results to the following page structure.
EXERCISE 7.4
Creating a Complex Web Page Structure In this exercise, you will build your skills by creating the page structure for the complex table you created in Exercise 7.2, shown in the following diagram. Cell 2 Cell 3 Cell 1
Cell 4
Cell 5
Cell 6
Cell 7 Cell 8 Copyright ©2002 SYBEX, Inc., Alameda, CA
www.sybex.com
Borderless Web Page Structure
185
EXERCISE 7.4 (continued)
1. Open complextable.htm and modify the HTML by adding the text that appears in bold: <TITLE>Complex Table | Cell 1 | Cell 2 | | Cell 3 | | Cell 4 | 5 | Cell 6 | | Cell 7 | | Cell 8 |
2. Save the changes and then view the complextable.htm file in the browser. The table should be borderless and occupy the entire area. Compare your results with the following page structure.
Copyright ©2002 SYBEX, Inc., Alameda, CA
www.sybex.com
186
Chapter 7
HTML Tables and Web Page Structure
EXERCISE 7.4 (continued)
You have created simple and complex tables as well as borderless tables to use for page structure. You can now incorporate them into your web page designs.
Summary
W
ebsite designers can use tables to create interesting and complex page structures as well as display data in tabular form. Without tables, alignment is based on ALIGN attributes and can change depending on monitor resolution and size. Using tables, a designer has complete control over where elements are placed and how they appear in the browser window. By using the various attributes that coordinate with the essential table tags (, , and | or | ), you can create page structures that are visually appealing and functional.
Copyright ©2002 SYBEX, Inc., Alameda, CA
www.sybex.com
Key Terms
187
Exam Essentials Be able to use tables for page structure. Website designers can use tables to create interesting and complex page structures and to display data in tabular form. Alignment is usually based in ALIGN attributes and can change depending on monitor resolution and size, but by using tables, a designer can completely control the placement of elements and how they appear in the browser window. Be able to construct a simple page structure using tables. Using the , , and tags, you can create a simple table that can either display data (with borders turned on) or act as the foundation for a page (with borders turned off). Know how to construct a complex page structure using tables. Using the attributes that belong to the essential table tags, you can create complex tables. The BORDER attribute controls how large the border of the table will be and is usually represented in a fixed pixel value. HEIGHT and WIDTH control how much of the browser window your table will cover. HEIGHT and WIDTH attributes can also be used in individual cells within your table. CELLPADDING controls the amount of space within the cell, and CELLSPACING controls the amount of space between cells. All of these attributes will have an impact on your table and the space it takes up. The BGCOLOR attribute specifies the color to be used in your table and overrides any color information specified in the tag of your web page.
Key Terms
B
efore you take the exam, be certain you are familiar with the following terms:
dynamic
static
|
Copyright ©2002 SYBEX, Inc., Alameda, CA
www.sybex.com
188
Chapter 7
HTML Tables and Web Page Structure
Review Questions 1. When specifying HEIGHT and WIDTH attributes in the tags that make up
a table, what unit of measure should you use to express the values if you want the table to be dynamic? A. Points B. Pixels C. Percentages D. Parameters 2. How do you make your table transparent or invisible on the page you
are structuring? A. Use percentages to express HEIGHT and WIDTH values. B. Do not use the BORDER attribute. C. Set the tag to “0”. D. Set the BORDER attribute to “0”. 3. What are the three main HTML tags used to create tables for page
structure? A. <TITLE>, , | B. |
| | |
