Unit 6.2. Advanced Tables
In Chapter 5, “Introduction to HTML: Basic Tags, Tables, and Frames,” you learned how to create a basic table and insert text into it. Tables are very flexible. Forms and even other tables can be inserted into tables. For this reason, tables are good for formatting.
Formatting a Form Using Tables
As you saw in Figure 6.12, a form can be fully functional yet look sloppy when rendered in the browser. This form has <BR> tags added to each text field so that they will not appear on the same line. To make this form look nice the text fields and text field descriptors should be aligned. A standard way to format a form is to right-align the text labels next to each field, and left-align the text fields. Tables can achieve this for you along with alignment attributes.
Think of a table as a grid. Within that grid there are ways to align the contents of each square or cell within that grid. As you learn in Chapter 5, “Introduction to HTML: Basic Tags, Tables, and Frames,” horizontal alignment can be set for the <TABLE>, <TR>, and <TD> tags. Values are LEFT, RIGHT, and CENTER. Vertical alignment can be set within <TD> tags. Values are TOP, BOTTOM, and CENTER.
To format the form in Figure 6.12, a table with two columns and five rows is needed. The text field descriptors should be placed in column one. The text fields should be placed in column two. For each <TD> tag that holds a display text, the attribute ALIGN is set to “right.” Since the default alignment is “left,” there is no need to align the <TD> tags for those cells that hold the form input fields. Figure 6.13 shows a formatted form as rendered in the browser.
Figure 6.13. A neatly formatted form using tables.
FOR EXAMPLE
<FORM ACTION="update_student" METHOD="post" NAME="student_personal_
form">
<TABLE ALIGN="center"><INPUT TYPE="hidden" NAME="p_id" VALUE="">
<TR>
<TD ALIGN="right">Salutation:</TD>
<TD><INPUT TYPE="text" NAME="p_salutation" VALUE=""
SIZE="5"></TD>
</TR>
<TR>
<TD ALIGN="right">First Name:</TD>
<TD><INPUT TYPE="text" VALUE="" NAME="p_first_name"
MAXLENGTH="25" SIZE="25"></TD>
</TR>
<TR>
<TD ALIGN="right">Last Name:</TD>
<TD><INPUT TYPE="text" VALUE="" NAME="p_last_name"
MAXLENGTH="25" SIZE="25"></TD>
</TR>
<TR>
<TD ALIGN="right" VALIGN="upper">Street Address:</TD>
<TD><TEXTAREA COLS=21 ROWS=6 NAME="p_street_address"
WRAP="soft"></TEXTAREA>
</TD>
</TR>
<TR>
<TD ALIGN="right">City:</TD>
<TD><INPUT TYPE="text" VALUE="" NAME="p_city" MAXLENGTH="25"
SIZE="25"></TD>
</TR>
<TR>
<TD ALIGN="right">State:</TD>
<TD><INPUT TYPE="text" VALUE="" NAME="p_state" MAXLENGTH="2"
SIZE="25"></TD>
</TR>
<TR>
<TD ALIGN="right">Zip:</TD>
<TD><INPUT TYPE="text" VALUE="" NAME="p_student_zip"
MAXLENGTH="5" SIZE="25">
</TD>
</TR>
<TR>
<TD ALIGN="right">Phone Number:</TD>
<TD><INPUT TYPE="text" VALUE="" NAME="p_phone" MAXLENGTH="15"
SIZE="25"></TD>
</TR>
<TR>
<TD ALIGN="right">Employer:</TD>
<TD><INPUT TYPE="text" VALUE="" NAME="p_employer"
MAXLENGTH="50" SIZE="25"></TD>
</TR>
<TR>
<TD ALIGN="center" COLSPAN=2><INPUT TYPE="reset" VALUE="Reset">
<INPUT TYPE="submit" VALUE="Save"></TD>
</TR>
</TABLE>
</FORM>
 | Be careful not to overlap the form and table tags. If the opening <FORM> tag is within the opening <TABLE> tag, then the closing </FORM> tag should be placed before the closing </TABLE> tag. |
Notice that the last <TD> tag that contains the buttons uses a new attribute: COLSPAN.
ROWSPAN and COLSPAN Attributes
Sometimes it is necessary to have a cell span more than one row or one column. Take the form in Figure 6.13—in order to center the buttons beneath the form, it is necessary to use COLSPAN. COLSPAN makes the cell span the number of columns specified. Likewise, ROWSPAN makes a cell to span the number of rows specified.
By adding a border to the table, you can see more clearly the effects of COLSPAN (Figure 6.14).
Figure 6.14. A border on the table showing the effects of the COLSPAN attribute.
Nesting Tables
As you learned in the previous Unit, “Advanced Tables,” tables are useful for aligning things on a Web page. For a simple Web page layout, a single table is adequate. If the Web page is more complex, then more control is needed. Suppose that you need additional formatting within one cell of a table. Nesting tables within cells of other tables allows you the control you need to create such a complex Web page. The page can be divided into segments via a table’s rows and columns. If more control is needed in a segment, insert a table between the opening and closing <TD> tags of that segment.
First, an example of nesting tables.
FOR EXAMPLE
<TABLE BORDER="1">
<TR>
<TD WIDTH="150">
Row 1, Col 1 of Table 1
</TD>
<TD ALIGN="center">
<TABLE BORDER="1">
<TR>
<TD>Inner Table 2
</TD>
</TR>
<TR>
<TD>
<TABLE BORDER="1">
<TR>
<TD>
Inner Table 3
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD WIDTH="150">
Row 2, Col 1 of Table 1
</TD>
<TD>
Row 2, Col 2 of Table 1
</TD>
</TR>
</TABLE> Figure 6.15 displays the nested tables with shading in the browser.
Figure 6.15. Light gray (1) is outer table, dark gray (2) is nested within light gray (1), and white (3) is nested within dark gray (2).
Create the layout for your application using nested tables (later on you will recreate the same layout using frames). The application has three areas: Top Navigation Bar (Top), Left Navigation Bar (Left), and Main Area (Main). Figure 6.16 desplays the three layout areas in the browser.
Figure 6.16. The three areas for the page layout.
Start with the outer table. In this case, the outer table has two rows and two columns. The second column of the first row should be your Top area, the first column of the second row your Left area, and the second column of the second row should be the Main area.
Unit 6.2 Exercise
Begin Building the Layout for This Book's Application
| Q1: |
|
Exercise 6.2 Answer
| A1: | Your page should now look like
Figure 6.17a.Figure 6.17a. The nested tables with borders and shaded background: outer table in light gray and nested tables in dark gray.
Figure 6.17b shows the nested table without shading. Figure 6.17b. The same nested table code without background color or borders on nested tables.
Below is the code for Figure 6.17b:
<TABLE BORDER="1" WIDTH="100%" HEIGHT="542">
<TR>
<TD WIDTH="20%" ALIGN="center" HEIGHT="53"> </TD>
<TD WIDTH="80%" ALIGN="center" HEIGHT="53"><B>Our
Application</B> <TABLE
BORDER="0" WIDTH="100%">
<TR>
<TD WIDTH="33%" ALIGN="center"><B>Menu One</B></TD>
<TD WIDTH="33%" ALIGN="center"><B>Menu Two</B></TD>
<TD WIDTH="34%" ALIGN="center"><B>Menu Three</B></TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD WIDTH="20%" ALIGN="center" HEIGHT="277"
VALIGN="top"><B>Title</B>
<TABLE BORDER="0" WIDTH="100%">
<TR>
<TD ALIGN="center"><B>Menu One</B></TD>
</TR>
<TR>
<TD ALIGN="center"><B>Menu Two</B></TD>
</TR>
</TABLE>
</TD>
<TD ALIGN="center"><B>MAIN</B></TD>
</TR>
</TABLE> The story or main page will be displayed in the Main area. This area can contain any number of things, including text within <P> tags or a form within <TABLE> tags. |
