Chapter 5 Working with Tables

Chapter 5

Working with Tables

Principles of Web Design, 4th Edition

Principles of Web Design, 4th Edition 5-2

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

• 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





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>


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



Table Grouping Attributes

• The primary use of the grouping elements is to let you apply styles to groups of either rows or columns




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


Global Table Attributes

• Global attributes affect the entire table


Row-Level Table Attributes

• Row-level attributes affect the entire table


Cell-Level Table Attributes

• Cell-level attributes affect only the contents of one cell


Spanning Columns

• The colspan attribute lets you create cells that span multiple columns of a table

• Column cells always span to the right



Spanning Rows

• The rowspan attribute lets you create cells that span multiple rows of a table

• Rows always span down



Formatting Tables


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




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



Adding White Space in a Table

• You can add white space into a table with the cellpadding and cellspacing attributes




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




Table Pointers for Well-Designed Tables


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


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



Centering Tables

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



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



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



Creating a Page Template


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


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



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



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



Creating the Page Banner Cell

• The page banner cell is R1C1• This cell spans the four columns of the table

using the colspan attribute



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



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




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



Testing the Template

• To verify that your template works properly, populate it with test content

• Test the template in multiple browsers







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








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


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


Summary

• Test your work!– Table settings, especially cell widths and

heights, can vary based on the user’s browser

Documents

Chapter 5 Working with Tables