Download 5 Working with Tables

Chapter 5
Working 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
5-2
Understanding Table Basics
Principles of Web Design, 4th Edition
5-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
Principles of Web Design, 4th Edition
5-4
Principles of Web Design, 4th Edition
5-5
Principles of Web Design, 4th Edition
5-6
Principles of Web Design, 4th Edition
5-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>
Principles of Web Design, 4th Edition
5-8
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
5-9
Principles of Web Design, 4th Edition
5-10
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
5-11
Principles of Web Design, 4th Edition
5-12
Principles of Web Design, 4th Edition
5-13
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
5-14
Global Table Attributes
• Global attributes affect the entire table
Principles of Web Design, 4th Edition
5-15
Row-Level Table Attributes
• Row-level attributes affect the entire table
Principles of Web Design, 4th Edition
5-16
Cell-Level Table Attributes
• Cell-level attributes affect only the contents
of one cell
Principles of Web Design, 4th Edition
5-17
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
5-18
Principles of Web Design, 4th Edition
5-19
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
5-20
Principles of Web Design, 4th Edition
5-21
Formatting Tables
Principles of Web Design, 4th Edition
5-22
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
5-23
Principles of Web Design, 4th Edition
5-24
Principles of Web Design, 4th Edition
5-25
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
5-26
Principles of Web Design, 4th Edition
5-27
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
5-28
Principles of Web Design, 4th Edition
5-29
Principles of Web Design, 4th Edition
5-30
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
5-31
Principles of Web Design, 4th Edition
5-32
Principles of Web Design, 4th Edition
5-33
Table Pointers for WellDesigned Tables
Principles of Web Design, 4th Edition
5-34
Table Pointers for WellDesigned 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
5-35
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
5-36
Principles of Web Design, 4th Edition
5-37
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
5-38
Principles of Web Design, 4th Edition
5-39
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
5-40
Principles of Web Design, 4th Edition
5-41
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
Principles of Web Design, 4th Edition
5-42
Principles of Web Design, 4th Edition
5-43
Creating a Page Template
Principles of Web Design, 4th Edition
5-44
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
5-45
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
5-46
Principles of Web Design, 4th Edition
5-47
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 fourcolumn table
Principles of Web Design, 4th Edition
5-48
Principles of Web Design, 4th Edition
5-49
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
5-50
Principles of Web Design, 4th Edition
5-51
Creating the Page Banner Cell
• The page banner cell is R1C1
• This cell spans the four columns of the table
using the colspan attribute
Principles of Web Design, 4th Edition
5-52
Principles of Web Design, 4th Edition
5-53
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
Principles of Web Design, 4th Edition
5-54
Principles of Web Design, 4th Edition
5-55
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
Principles of Web Design, 4th Edition
5-56
Principles of Web Design, 4th Edition
5-57
Principles of Web Design, 4th Edition
5-58
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
Principles of Web Design, 4th Edition
5-59
Principles of Web Design, 4th Edition
5-60
Testing the Template
• To verify that your template works properly,
populate it with test content
• Test the template in multiple browsers
Principles of Web Design, 4th Edition
5-61
Principles of Web Design, 4th Edition
5-62
Principles of Web Design, 4th Edition
5-63
Principles of Web Design, 4th Edition
5-64
Principles of Web Design, 4th Edition
5-65
Principles of Web Design, 4th Edition
5-66
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
Principles of Web Design, 4th Edition
5-67
Principles of Web Design, 4th Edition
5-68
Principles of Web Design, 4th Edition
5-69
Principles of Web Design, 4th Edition
5-70
Principles of Web Design, 4th Edition
5-71
Principles of Web Design, 4th Edition
5-72
Principles of Web Design, 4th Edition
5-73
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
Principles of Web Design, 4th Edition
5-74
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
Principles of Web Design, 4th Edition
5-75
Summary
• Test your work!
– Table settings, especially cell widths and
heights, can vary based on the user’s
browser
Principles of Web Design, 4th Edition
5-76