Download
1 / 76
770 likes | 901 Views
Chapter 5 Working with Tables. Principles of Web Design, 4 th Edition. Objectives. Understand table basics Format tables Follow table pointers to create well-designed tables Create a page template Evaluate examples of page templates. Understanding Table Basics. Using Table Elements.
E N D
Chapter 5Working with Tables Principles of Web Design, 4th Edition
Objectives • Understand table basics • Format tables • Follow table pointers to create well-designed tables • Create a page template • Evaluate examples of page templates Principles of Web Design, 4th Edition
Understanding Table Basics Principles of Web Design, 4th Edition
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 Principles of Web Design, 4th Edition
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> Principles of Web Design, 4th Edition
Captions 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 Principles of Web Design, 4th Edition
Table Grouping Attributes • The primary use of the grouping elements is to let you apply styles to groups of either rows or columns Principles of Web Design, 4th Edition
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 Principles of Web Design, 4th Edition
Global Table Attributes • Global attributesaffect the entire table Principles of Web Design, 4th Edition
Row-Level Table Attributes • Row-level attributesaffect the entire table Principles of Web Design, 4th Edition
Cell-Level Table Attributes • Cell-level attributes affect only the contents of one cell Principles of Web Design, 4th Edition
Spanning Columns • The colspan attribute lets you create cells that span multiple columns of a table • Column cells always span to the right Principles of Web Design, 4th Edition
Spanning Rows • The rowspan attribute lets you create cells that span multiple rows of a table • Rows always span down Principles of Web Design, 4th Edition
Formatting Tables Principles of Web Design, 4th Edition
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 Principles of Web Design, 4th Edition
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 Principles of Web Design, 4th Edition
Adding White Space in a Table • You can add white space into a table with the cellpadding and cellspacing attributes Principles of Web Design, 4th Edition
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 Principles of Web Design, 4th Edition
Table Pointers for Well-Designed Tables Principles of Web Design, 4th Edition
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 Principles of Web Design, 4th Edition
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 Principles of Web Design, 4th Edition
Centering Tables • Centering a fixed table makes it independent of resolution changes, because the table is always centered in the browser window Principles of Web Design, 4th Edition
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 Principles of Web Design, 4th Edition
Avoid Nesting Tables • Nesting tablesis 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 Principles of Web Design, 4th Edition
Creating a Page Template Principles of Web Design, 4th Edition
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 Principles of Web Design, 4th Edition
Creating a Page Template (continued) • 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 Principles of Web Design, 4th Edition
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 Principles of Web Design, 4th Edition
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 Principles of Web Design, 4th Edition
