1. Tables and Frames

2. Understanding Table Basics

3. Using Table Elements
To build effective page templates, you must be familiar with the HTML table elements and attributes
The <table> element contains the table information, which consists of table row elements <tr> and individual table data cells <td>
These are the three elements you will use most frequently when you are building tables

7. Basic Table Code <table border="1“>
<tr><td>Breed</td><td>Description</td><td>Group</td>
</tr>
<tr><td>French Bulldog</td><td>Loyal Companion</td>
<td>Non-Sporting</td></tr>
<tr><td>Wheaten Terrier</td><td>High energy, friendly</td>
<td>Terrier</td></tr>
<tr><td>English Pointer</td><td>Hunting companion</td>
<td>Sporting</td></tr>
<tr><td>Australian Cattle Dog</td><td>Guarding, herding</td>
<td>Working</td></tr>
</table>

8. Caption and Table Header
<caption> lets you add a caption to the top or bottom of the table
By default, captions display at the top of the table; you can use the align=“bottom” attribute to align the caption at the bottom of the table
The <th> tag lets you create a table header cell that presents the cell content as bold and centered

10. Table Grouping Attributes
The primary use of the grouping elements is to let you apply styles to groups of either rows or columns

12. Defining Table Attributes
Table attributes let you further define a number of table characteristics
You can apply attributes at three levels of table structure: global, row level, or cell level

13. Global Table Attributes
Affect the entire table

14. Row-Level Table Attributes
Affect the entire row

15. Cell-Level Table Attributes
Affect only the contents of one cell

16. Spanning Columns
The colspan attribute lets you create cells that span multiple columns of a table
Column cells always span to the right

18. Spanning Rows
The rowspan attribute lets you create cells that span multiple rows of a table
Rows always span down

20. Formatting Tables

21. Choosing Relative or Fixed Table Widths
Set relative table widths as percentages in the table width attribute
If you choose relative table widths, your tables will resize based on the size of the browser window
Set absolute table widths as pixel values in the table width attribute
Fixed tables remain constant regardless of the browser window size

24. Determining the Correct Fixed Width for a Table
The most common width for page template tables is approximately 975 pixels
This width supports the 1024 x 768 screen resolution

26. Adding White Space in a Table
You can add white space into a table with the cellpadding and cellspacing attributes

29. Removing Default Table Spacing
Default spacing values are included in the table even when you don’t specify values for the table’s border, cellpadding, or cellspacing attributes
Depending on the browser, approximately two pixels are reserved for each of these values
You can remove the default spacing by explicitly stating a zero value for each attribute

32. Table Pointers for Well-Designed Tables

33. Table Pointers for Well-Designed Tables
Write code that is easy to read
Remove extra white spaces
Center tables to adapt to different resolutions
Stack tables for quicker downloading
Avoid nested tables
Use Cascading Style Sheets for table styles

34. Removing Extra Spaces
Always remove any leading or trailing spaces in your table cell content
These spaces cause problems when you try to join the contents of adjacent cells

36. Centering Tables
Centering a fixed table makes it independent of resolution changes, because the table is always centered in the browser window

38. Stacking Tables
Because of the way browsers display tables, it is better to build several small tables rather than one large one
This technique, called stacking tables, also can simplify your table design task, because smaller tables are easier to work with

40. Avoid Nesting Tables
Nesting tables is the practice of placing an entire table within a table cell
Nested tables are not accessible to screen readers and other assistive devices
This technique is being replaced by newer techniques such as CSS positioning

42. Creating a Page Template
In this example you’ll see how to take a design sketch for a Web page and build a template for the page layout
Figure 5-20 shows a sketch of the desired layout
This layout is designed for a base screen resolution of 1024 x 768, so the table will be fixed at a width of 975 pixels

43. Creating a Page Template
Notice that the basic structure of the table is three rows by four columns
Each column uses 25% of the total width of the template
Row spans and column spans break across the layout to provide visual interest

45. Building the Basic Table Structure
Start by building the basic table structure, including all the cells and rows of the table
As you customize the table you can remove extraneous cells as necessary
The basic structure is a three-row by four-column table

47. Setting a Fixed Width
One of the design characteristics of the template is a fixed width that does not depend on the user’s browser size or screen resolution
To create this characteristic, use a pixel value in the table width attribute

49. Creating the Page Banner Cell
The page banner cell is R1C1
This cell spans the four columns of the table using the colspan attribute

51. Creating the Feature Article Cell
The feature article cell in the layout is R2C2, and spans two columns
This column span requires the removal of one cell in row two to make room for the span

53. Creating the Link Column Cells
The New Link and Linked Ads columns in the layout reside in cells R2C1 and R2C3 respectively
These cells span rows 2 and 3 of the table
The row spans require the removal of cells R3C1 and R3C4

56. Setting the Column Widths
Column widths must be set in only one cell per column
It’s also best to set the column widths in only one row of the table
Setting the column width ensures that the text will wrap properly

58. Testing the Template
To verify that your template works properly, populate it with test content
Test the template in multiple browsers

64. Examples of Page Templates
The following templates cover a variety of page layout needs
You may choose to stack different templates on top of each other for more complex layouts

71. Summary Plan your tables by sketching them out first
Use fixed table widths if you want to determine the size of your page rather than let the browser determine the width
Use relative widths if you want to build tables that resize with the browser window, wrapping your content to fit
Write table code that is easy to read, remove extra spaces, and choose whether to center or stack tables
Avoid using nested tables and use CSS whenever possible to add presentation style to tables

72. Summary
Work on your pages with the table borders turned on, which displays the cell boundaries
When you are finished with your layout, you can turn the borders off
Size your tables based on the page size you want to create
Use 1024 x 768 as your base screen resolution
In most cases you’ll set the width but not the height of your tables, allowing the content to flow down the page

73. Summary
Test your work!
Table settings, especially cell widths and heights, can vary based on the user’s browser

74. Frames

75. Frameset and Frames
The <frameset> element is the container for the frameset code
The cols and rows attributes let you specify the characteristics of the frameset
You can specify a frameset as either cols or rows, but not both
The <frame> element is an empty element
The src attribute provides the location of the file that is displayed within the frame

76. Frameset Syntax (Rows)
<frameset rows = “50%,50%”>
<frame src = “top.htm”/>
<frame src = “bottom.htm”/>
</frameset>

78. Frameset Syntal (Columns)
<frameset cols = “150,*”>
<frame src = “left.htm”/>
<frame src = “right.htm”/>
</frameset>

80. Nested Frameset Syntax
<frameset rows = "40,*">
<frame src = "topnav.htm"/>
<frameset cols = "20%,80%">
<frame src = "left.htm"/>
<frame src = "right.htm"/>
</frameset>

84. Frame Usage No longer effective Must be careful of source html files
Must be careful with hyperlink targetting
Less flexibility in design
Replaced by tables and then by CSS