Transcript Designing a Web Page with Tables Maureen Smith Professor, Saddleback College Tutorial 4 Lesson Plan   Review Tutorial 4 - Designing a Web Page with Tables • Session 4.1 •

Designing a Web Page with
Tables
Maureen Smith
Professor, Saddleback College
Tutorial 4
Lesson Plan


Review
Tutorial 4 - Designing a Web Page with
Tables
• Session 4.1
• Session 4.2
• Session 4.3

Review
Objectives





Work with preformatted text to create a
basic text table
Create the basic structure of a graphical
table
Organize table rows into row groups
Add a caption to a table
Describe how to add summary info





Create table borders and gridlines
Specify the width and height for different
table elements
Format contents of table cells
Apply background image and color
Align a table and cell contents



Describe the different types of page layouts
that you can achieve with tables
Work with both fixed-width and fluid
layouts
Create a newspaper-style layout using tables
Session 4.1

You will design a Web site for a weekly
edition of a newspaper
• Should have same look and feel as the printed
one—classic, traditional
• In order to implement this design, you will
learn how to create and format tables
Tables on the World Wide Web

Your first assignment is to place a marathon
story
• With it, a table that lists the top three male and
female finishers
• See Figure 4-1

There are two ways to insert a table of
information on a Web page
• You can create a text table or a graphical table
• A text table contains only text, evenly spaced
out in rows and columns
• Text tables use only standard typewriter
characters so that even a line in a text table is
created by repeating a typographical character,
such as a hyphen, underline or equal sign
• See Figure 4-2

A graphical table appears as a graphical
element
• Allows you to include design elements such as
color, shading, and borders
• You have greater control over the appearance
• Can control the size of individual table cells
and text alignment
• Can even create cells that span several rows or
columns

Graphical tables are more flexible and
attractive than text tables
• But there are some situations when you need to
use a text table
• Text-only browsers can display only text
• Working with the tags for graphical tables can
be complicated and time-consuming

So you may want to create two versions of
your page
Creating a text table

The beginning of the file you’ll use has
already been created
• The page consists of an article about the
marathon
• You’ll add the race results table between the
first and second paragraphs
• See tutorial3/race1.htm
Using fixed-width fonts

To create a text table, you have to control
the type of font that is used
• Relies on spaces and the characters that fill
those spaces to create its column boundaries
• Have to use a font that allots the same amount
of space to each character and to the empty
spaces between characters
• This type of font is called a fixed-width font, or
a monospace font
Courier

Times New Roman
Most typeset documents (your book) use
proportional fonts
• The width of each character varies according to
the character’s shape
• Character “m” is wider than “l”

Proportional fonts are more visually
attractive so you might be tempted to use
them
• But if you do, the varying width of the
characters and spaces between characters might
cause errors when the page is rendered
• See Figure 4-5 to see how a proportional font
loses alignment when the font size is increased
or decreased
• See Figure 4-6, with fixed-width fonts, to see
that the columns remain aligned regardless of
font size

Different browsers and operating systems
may use different font sizes to display text,
so should always use a fixed-width font to
ensure that the columns remain aligned
Using preformatted text

Recall that HTML ignores extra blank
spaces, lines, or tabs
• However, to control the appearance of a table,
will need to use spaces and other characters
• Can insert the <pre> tag to display preformatted
text--text formatted in ways that you want
retained
• Any text formatted with this tag retains those
extra blank spaces and lines
• It also displays text using a fixed-width font,
which is what you want for the text table

When you use this tag, you insert blank
spaces by pressing the spacebar to align the
columns of text in the table
• See tutorial4/race2.htm

By using the <pre> tag, you’ve created a
text table that every browser can display
• You’ve also ensured that the columns will
retain their alignment no matter what font the
browser is using

Now create the graphical table
Defining a table structure

Complicated because you have to enter a lot
of information to define the layout and
appearance
• First step is to specify the table structure
• Number of rows and columns
• Location of column headings
• Placement of a table caption
• Then can start entering text and data into the
cells of the table

The beginning of the page for the graphical
table has already been created
• See tutorial4/race3.htm
Marking a table, table row, and
table cell

To create a graphical table, start with the
two-sided <table> tag
• Identifies where table structure begins
• Indicates where the table ends
• Then you identify the number of rows by
inserting a two-sided <tr> tag at the beginning
of each table row, starting with the top row and
moving down
• The end of each table row is indicated by a
</tr> tag
• Finally, within the <tr> tags you must indicate
the location of each table cell with a twosided<td> tag (table data)

HTML does not provide a means of
specifying the number and placement of
table columns
• Columns are determined by how many cells are
inserted in each row
• If you have four <TD> tags in each table row, you
have four columns
<table>
<tr>
<td> First Cell </td>
<td> Second Cell </td>
</tr>
</table>


This example has two columns
You are going to create seven rows and four
columns
•
•
•
•
•
First row will contain column headings
Remaining six will display the table’s data
See tutorial4/race4.htm
Add the text for each cell
See tutorial4/race5.htm
Creating table headings

XHTML provides a special tag for cells that
will act as table headings (column headings)
• The two-sided<th> tag is used for cells within
the table just like the <td> tag
• Difference is that that text formatted with the
<th> tag is centered within the cell and
displayed in bold
• Table can have several rows of table headings
• In fact, because the <th> tag is a replacement
for the <td> tag, can use it for any cell
containing text you want displayed in centered
bold type

You have a single row of table headings
• See tutorial4/race6.htm
Creating row groups

Can classify a table’s rows into row groups
that indicate their purpose in the table
• Three types: table header, table body, table
footer
• Because order is important, table header must
be listed before footer, and both must appear
before the body
• To mark header rows:
<thead>
table rows
</thead>
• Can contain only one set of header rows

To mark header footer:
<tfoot>
table rows
</tfoot>
• Only one footer per table

To mark rows of table body:
<tbody>
table rows
</tbody>
• Can have multiple body sections

Row groups are used for tables that draw
data from external sources
• Databases, XML docs
• Programs can be written in which contents of a
table body span across several pages, with
contents of header/footer repeated on each page
• Not all browsers support this

Creating groups does not affect appearance
• But can apply styles to groups to make them
appear differently

Let’s mark the table’s header and body
• No footer
• See tutorial4/race7.htm
Creating a table caption


Captions are used to provide descriptive
info about the table
Use the <caption> tag
<caption>content</caption>
• Where content indicates is the content of the
caption
• MUST appear directly after opening <table>
tag
• By default, is centered above the table

Can change that using align attribute
<caption align=“position”>content</caption>
• where position is bottom or top, centered
• Left or right, aligned with margin
• Older browsers recognize only top and bottom
• Let’s add “Race Results” to the table in bold
• See tutorial4/race8.htm
Adding a table summary

For non-visual browsers, useful to include a
summary of a table’s contents
<table summary=“description”> … </table>
• where description is a description of the table’s
purpose and contents
• Does not affect appearance in visual browsers

Now we format the table!
Session 4.2

Working with the table border
• Lack of gridlines and borders makes the table
difficult to read
• Let’s add borders, gridlines, and background
color
• And control placement, size, and table border
Adding a table border

By default, browsers display tables without
borders
• Can add one with the BORDER property
<table border=“value”>
• where value is the width of the border in pixels
• See Figure 4-18 for different sizes
• Note that the size of the internal gridlines is not
affected by the border attribute

Let’s add a 5-pixel border
• See tutorial4/race9.htm

By default, table borders are displayed in
two shades of gray for a three-dimensional
look
• Can change that with:
<table bordercolor=“color”>
• where color is an HTML color name or
hexadecimal value
• This attribute has been deprecated, but is still
widely supported (not by Opera)
• See Figure 4-21
• To work around discrepancy between IE and
Netscape, can use bordercolorlight and
bordercolordark
• See Figure 4-22

Let’s change the color of the table border
• See tutorial4/race10.htm
• Depending on browser, your colors may not
match what is shown
Creating frames and rules

By default a table border surrounds entire
table and each of the cells
• To change this, use frame and rules attributes
• Frame attribute determines which sides will
have borders
<table frame=“type”>
• where type is box (default), above, border,
below, hsides, vsides, lhs, rhs, void
• See Figure 4-25 for frames values
• See Figure 4-26 for effects of these values on a
table grid

Rules attribute controls how gridlines are
drawn
• <table rules=“type”>
• where type is all (default), cols, groups, or none
• See Figure 4-27 for rules values
• See Figure 4-28 for effect of these values


Both attributes might not be supported in
older browsers
We will not make any changes to frame or
rules values
Sizing a table

Table still looks crowded
• Maybe smaller internal borders, more space
between text and borders, slightly wider
• Tables are sized automatically by browser, but
there are several attributes that can override
size choices made by the browser
Setting cell spacing

Cell spacing controls amount of space
between table cells
• Default is 2 pixels; to change:
<table cellspacing=“value”>
• where value is size in pixels
• See Figure 4-29 for different cell spacing
• Changing this value also impacts size of
interior borders

Let’s change the gridlines to be as small as
possible by decreasing the cell spacing to 0
pixels
• Because interior border includes a drop shadow,
even setting cell spacing to 0 will not remove
the gridlines
• See tutorial4/race11.htm
Setting cell padding

Distance between cell text and cell border is
known as cell padding
• Default is 1 pixel, which may be too little
<table cellpadding=“value”>
• where value is size in pixels
• See Figure 4-32 for different cell padding
• Let’s increase cell padding to 4 pixels
• See tutorial4/race12.htm
Setting the table width

Table would look better larger
• Overall size is determined by its content
<table width=“value”>
• where value is width in pixels or percentage of
width of the containing element
• 100% of page element has table fill entire page
• With an absolute size, table remains constant,
regardless of user’s monitor size
• Percentage allows table to match each
monitor’s dimensions
• If table requires a certain width to display
contents, will ignore a width value smaller

Many browsers, but not XHTML, support
<table height=“value”>
• where value is height in pixels or percentage of
height of element

Let’s set the width of the table to 70% of the
page width
• See tutorial4/race13.htm
Setting cell and column width

Width value can also be applied to
individual cells
<td width=“value”> or <th width=“value”>
• where value is width in pixels or percentage of
width of entire table
• Can set width of first cell in column and
remaining cells will adopt that width
• However, if browser expands to fit content of
one cell, all cells in column will match
• If you set different widths for two cells in same
column, browser applies larger value

Can also set height of a cell
<td height=“value”> or <th height=“value”>
• Deprecated attribute
Preventing line wrap

If you change widths, might want to make
sure contents of certain cells don’t wrap
• Like name or date
• To prevent line wrapping:
<td nowrap=“nowrap”> or <th
nowrap=“nowrap”>

We will not modify width or height
Spanning rows and columns

Repeating the group info for each row is
redundant
• Let’s merge several cells into one
• See Figure 4-37

We create a spanning cell—a cell that
occupies more than one row or column
• See Figure 4-38

Spanning cells are created by inserting
rowspan and/or colspan attributes
<td (or th) rowspan=“value” colspan=“value”>
• where value is number of rows or columns the
cell spans
• Direction of the spanning is downward and to
the right

MUST remember to adjust the number of
cell tags used
• See Figure 4-39
• Let’s delete the table heading for Group column
and span Runner heading across 2 columns and
delete second/third occurrences of Men and
Women and span those cells
• See tutorial4/race14.htm
Formatting table contents

How ‘bout aligning group names to tops of
their cells and race times right-aligned?
•
•
•
•
Sans-serif font
Colored background
Table aligned with right margin
Article text flowing around
Aligning the contents of a cell

By default, text is placed in middle of cell,
aligned with left edge; to change:
align=“position”
• where position is either left (default for td),
center (default for th), right, justify, or char
• Char tells browser to align based on position of a
particular character like a decimal point
• Default character is decimal, but can be changed
<td align=“char” char=“,”>
• Not well supported

For a different vertical alignment of cell
content, use
valign=“position”
• where position is top, middle (default), bottom,
or baseline
• See Figure 4-42

Let’s right-align each time value and align
group names with tops of their cells
• See tutorial4/race15.htm
Formatting table text

Can apply same text and font styles for
table text
• Styles cascade down through table structure,
from table element, through row groups and
table rows, down to individual cells
• To change font style of all text in a table, apply
a style to the table element
• To change font style of table body, apply to tbody
element

Let’s display all text in a sans-serif font
• Font size for table to 1em, but with the body
text at 80% of that size
• See tutorial4/race16.htm
• Older browsers may need a <font> tag instead
of a style tag
Setting the background color

Table elements support same backgroundcolor style as page
• Color styles cascade down through the table
structure
• Let’s change the header row to yellow, group
names to light blue and light green, and rest of
table in white
• See tutorial4/race17.htm
Setting the background image

You can add a background image to a table
background-image: “url”
• Can be applied to entire table, row group, row,
or individual cell

We do not need any images in our table
Aligning a table on a web page

Let’s align the table with the right margin
• Rest of the article text will wrap around it
• Use same style used to float an inline image
float: position
• where position is either left or right
• Can use margin style to set margin space
around floating table

Let’s set a 5 pixel space on top, left, and
bottom of table and a 0 pixel margin on
table’s right margin
• See tutorial4/race18.htm

There is a deprecated align=“position”
attribute that older browsers will support if
they don’t support styles
Working with column groups

Can organize columns into column groups
and format one or more entire columns with
a single style declaration or attribute
• <colgroup span=“value”>
• where value is number of columns in group
• Should be placed directly after opening <table>
unless there is a caption; then after caption

You’ve completed the race results table and
story
• Next will use tables to create a layout for this
story and other features of the Park City
Gazette
Session 4.3

Using tables for layout
• Table cells can contain any page element
including inline images, headings, paragraphs,
lists, and other tables
• Here are some of the classic layouts that can be
achieved through the use of tables
Layout designs

Figure 5.1 shows one of the most basic
• Placing entire contents of a page within a table
that is centered on the page
• With different backgrounds, gives effect of a
printed page displayed against a colored
background
• See Figure 5.1

The columnar layout shows the page
content placed in columns
• Popular for list of links in left column and
destinations in right column
• Text does NOT flow from one column to
another as in desktop publishing programs
• See Figure 4-52
• Remember to vertically align with top of cells

In a sectional layout, you break page
content into sections, placing each section
in its own cell
• See Figure 4-53

By breaking up page content into separate
pieces, can create almost any layout
• Sometimes referred to as a jigsaw table/layout
• See Figure 4-54 and paragraph that follows
• Page is broken up into number of pieces that
are meticulously assembled to create layout
• Be sure to remove borders
Fixed-width and fluid layouts

Table layouts fall into two classes: fixedwidth and fluid
• In a fixed-width layout, designer defines exact
size of every table element in absolute units
• Precise control
• But does not take into account the size of the
browser window
• Can result in unused blank space
• See Figure 4-55

Determining correct width is another
problem with fixed-width
• Screen resolutions vary with 800 x 600 being
most common
• If you choose 770, users with smaller monitors
will have to scroll

With a fluid layout, one or more elements is
sized as a percentage of page width
• Page content will flow into blank areas as size
of window increases
• See Figure 4-56
• But can result in long lines of text and are
difficult to design
• Good layout at smaller resolution may not look
good in larger window

Can combine layouts
• Column of links at left may be fixed, while
content of page can be fluid
• Examine your page under a variety of
conditions
Challenges of table layouts


Not all Web designers like tables for
anything but tabular info
Some challenges on page 215:
•
•
•
•
Tables can slow down page rendering
Tables can be inflexible
Tables can be code-heavy
Tables can be inaccessible

Despite these challenges, most Web page
layout is still done using tables
• Layout techniques best suited to widest variety
of browsers and operating environments
involve tables
Creating a newspaper-style
layout

Let’s use our article as part of a newspaperstyle page for the entire Gazette
• Will contain logo, list of links to other pages,
and a few articles
• See storyboard in Figure 4-58

One way to do this is to create two tables,
one nested inside the other
• See Figure 4-59
• Four cells that are contained in two columns and
three rows
• Which are spanning?

Will use a combination of fluid and fixedwidth elements
• Will reduce amount of unused space for large
monitors
Creating the outer table

Initial part of file for front page has already
been created, setting background and text
color
• Now we must create the table structure
• Will use comments to make it easier to navigate
the code
• See tutorial4/page1.htm

Remember to set vertical alignment to top,
rather than default middle
• The tables in this layout don’t display any
borders

Now let’s place the logo in the page
• See tutorial4/page2.htm

Now let’s add the list of links to the second
cell
• Have already been created for you
• We will use copy and paste!
• See tutorial4/page3.htm

Next part of outer table is newspaper
address and phone number
• Located at bottom of page
• Again use copy and paste from an alreadycreated file
• See tutorial4/page4.htm

Last is the articles cell
• Changes on a weekly basis
• When it needs to be updated, you only need to
edit the contents of a single cell
Creating a nested table

Main story is results of the marathon
• Another concerns reopening of Highway 6
• Will also include a sidebar with links to some
of the other current important stories
• See Figure 4-65 for storyboard

Best organized in a second table
• See Figure 4-66 for storyboard

Already created—save as articles.htm
• See tutorial4/articles1.htm

Now let’s copy the code for the marathon
article that you created in race.htm and
paste it in the first cell
• Will edit some contents to fit
• See tutorial4/articles2.htm

Now we need to insert article about
reopening of Highway 6 in second cell
• See tutorial4/articles3.htm

Final piece is code for the links to stories
and features
• See tutorial4/articles4.htm
Combining the outer and inner
tables

Now time to place the code from your
articles.htm into your page.htm file
• Copy and paste!
• See tutorial4/page5/htm
Tips for effective use of tables


Diagram the table layout before you start
writing your HTML code
First create a table structure with minimal
content
• Once the layout appears correct, start
formatting the content within the table cells and
add more content



Insert comment tags throughout the table
layout to document each section
Indent the code for the various levels of
nested tables to make your code easier to
interpret
Enter opening and closing table tags at the
same time in order to avoid the error of
either omitting or misplacing the closing tag


Test and preview your layout as you
proceed in order to catch errors early in the
design process
Limit the number and extent of nested
tables, since they can increase the amount
of time required to render a page and cause
accessibility problems for non-visual
browsers


Use cell padding and cell spacing to keep
the table content from appearing too
crowded
Use row spanning to vary the size and
starting point of articles within a columnar
layout
• Side-by-side articles that start and end at the
same location are often visually boring and can
be difficult to read

Avoid using more than three columns of
text
• Too many columns can result in column widths
that are too narrow

Use fluid elements to reduce the amount of
unused space in the browser window
• Use fixed-width elements when you need to
precisely place elements on the page
Creating frames and rules

Two additional properties introduced in
HTML 4.0 (and above) and supported by IE
but not Netscape are FRAME and RULE
properties
• As you’ve seen, when borders are displayed,
they surround entire table on all four sides
• FRAME property allows you to control which
sides of the table will have borders
<TABLE FRAME=value>
• where value is either BOX (default), ABOVE,
BELOW, HSIDES, VSIDES, LHS, RHS, or
VOID
• See Figure 4-60

By default, borders are drawn around each
cell in the table
• RULES property lets you control this by
specifying how you want the table grid to be
drawn
•
•
•
•
•
<TABLE RULES=value>
where value is either ALL, ROWS, COLS, or
NONE
ALL causes all cell borders to be drawn
ROWS and COLS values cause borders to be
drawn around only the table rows and columns
NONE suppresses display of any cell borders
See Figure 4-62

Once again, remember that when you use
these IE extensions, effects you see will not
be duplicated in other browsers
• Will display usual grid layout
• Always test under different browsers