Transcript Working with Web Tables Maureen Smith Professor, Saddleback College Tutorial 5 Lesson Plan   Review Tutorial 4 – Working with Web Tables • Session 4.1 • Session 4.2 •

Working with Web Tables
Maureen Smith
Professor, Saddleback College
Tutorial 5
Lesson Plan


Review
Tutorial 4 – Working with Web Tables
• Session 4.1
• Session 4.2
• Session 4.3

Review
Introducing Web Tables


You will design a Web site for a public
radio station
Kyle thinks the info is best conveyed in a
table

There are two ways to insert a table of
information on a Web page
• 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

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
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
• Proportional fonts lose alignment when the
font size is increased or decreased
• With fixed-width fonts, 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
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
Introducing Web Tables

You meet with Kyle to discuss design
• He has already created a basic page with the
logo and list of links
• See tutorial5/schedule.htm
• Then add the nightly schedule
Marking Tables and Table Rows

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 ten rows (you will do first
three now)
• Will include a class attribute, placing table in
the schedule class of elements to distinguish it
from other tables on the site
• See tutorial5/schedule1.htm

Nothing in those rows! Let’s look at cells
Marking Table Headings and
Table Data

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 and
remaining rows displaying time
• See tutorial5/schedule2.htm

Other type of cells is data cells, marked
with <td> tag and used for any content not
considered a heading
• Unformatted, left-aligned
• See tutorial5/schedule3.htm
• We now have 3 rows and 8 columns
Adding a Table Border

By default, browsers display tables without
borders
• Can add one with the border attribute
<table border=“value”>
• where value is the width of the border in pixels
• See Figure 5-7 for different sizes
• Note that the size of the internal gridlines is not
affected by the border attribute
• See tutorial5/schedule4.htm
• This will add a 1-pixel border and browser will
insert gridlines around each of the table cells

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)
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
• <th colspan=“2” rowspan=“3”> … </th>

Important to remember that when a cell
spans multiple rows/columns, must adjust
the number of cells used elsewhere
•
•
•
•
Let’s do some spanning!
See tutorial5/schedule5.htm
Let’s span rows!
See tutorial5/schedule6.htm

Let’s add the remaining KPAF evening
programs with lots more spanning!
• See tutorial5/schedule7.htm
• Kyle likes the clear structure
• Since some listeners live in different time
zones, let’s add a caption indicating Central
time zone
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 and only one is allowed per table
• 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 “All times listed in central time” to
the table in bold
• See tutorial5/schedule8.htm
Marking Row Groups

A table’s rows can be divided into row
groups
• Each group element contains different types of
content and can be formatted differently
• Three row groups are supported: one to mark
header rows, another for body rows, and a third
for footer rows
• Following marks 2 rows as belonging to header
row group
<thead>
<tr>
<th colspan=“2”>KPAF Programs</th>
</tr>
<tr>
<th>Time</th>
<th>Program</th>
</tr>
</thead>

Order is important
• thead element must appear first; tfoot element
second, tbody element third
• A table can contain only one set of thead and
tfoot elements, but any number of tbody
elements

One purpose of row groups is to allow you
to create different styles for groups of rows

Let’s use the thead element to mark header
row and tbody element to mark rows that
include broadcast times
• See tutorial5/schedule9.htm
Marking Column Groups

Can organize columns into column groups
and format one or more entire columns with
a single style declaration or attribute
• <colgroup columns</colgroup>
• where columns is number of columns in group
• The columns themselves are referenced using
the empty element <col />

Let’s create a column group for the
programming table
• These groupings will allow you to format the
two sets of columns in different ways later on
• See tutorial5/schedule10.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

See tutorial5/schedule11.htm
Formatting Tables with HTML
Attributes


Ready to format the table!
Two approaches:
• Use HTML attributes
• Use CSS styles
• Both are used on the Internet
Setting Cell Spacing with HTML

Cell spacing controls amount of space
between table cells
• Default is 2 pixels; to change:
<table cellspacing=“value”> … </table>
• where value is size in pixels (only pixels)
• See Figure 5-22 for different cell spacing
• Changing this value also impacts size of
interior gridlines
Setting Cell Padding with HTML

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 5-23 for different cell padding
• Let’s increase cell padding and spacing
• See tutorial5/schedule12.htm
Setting Table Widths and Heights
in HTML

Can set overall width/height of the table
• 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

Can also set width of individual columns
• <colgroup width=“100” span=“7” </colgroup>
• Sets width of each of 7 columns to 100 pixels
Setting Row Heights with HTML

Can set row heights
• <tr height=“value”> … </tr>
• Where value is height of row in pixels
• IE also allows specifying height as a
percentage of height of the table
• Now deprecated!
Formatting Table Borders with
HTML

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 border=“value” frame=“type”>
• where type is box (default), above, border,
below, hsides, vsides, lhs, rhs, void and value is
width of the table border
• See Figure 5-26 for frames values
• See Figure 5-27 for effects of these values on a
table grid

Rules attribute controls how gridlines are
drawn
• <table border=“value”>
• where value is all (default), cols, groups, or
none
• See Figure 5-28 for rules values
• See Figure 5-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
Aligning Cell Contents with
HTML

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 tutorial5/schedule13.htm

Kyle likes appearance
• But this is only evening schedule
• Still have morning and afternoon
• To have them match would have to insert
various attributes into each table
• He would rather use CSS so he can easily apply
formatting to all schedules at once
Formatting Tables with CSS

CSS includes support for tables
• Has gradually replaced HTML attributes
• Let’s replace the HTML table attributes with
external style sheet
• See tutorial5/table.css
• See tutorial5/schedule14.htm

Ready to begin creating the style sheet
Table Border Styles

Unlike HTML border attribute, can apply
one set of borders to the table itself and
another set of borders to individual cells
• See tutorial5/tables1.css
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
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

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
Using Tables for Page Layout

Page would look even better with
summaries of upcoming broadcasts
• See Figure 5-53 for a sketch of proposed
addition in a new column to the right of the
schedule table
• See tutorial5/schedule15.htm
• Then add styles to kpaf.css to set width
• See tutorial5/kpaf.css

Then will begin creating the bar that lists
upcoming programs
• To avoid looking “boxy,” Kyle wants list
placed in a rectangle with rounded corners
• No HTML element or CSS style to do that, but
can simulate effect using background images
and a table
Introducing the Jigsaw Layout

Tables can contain any page content
• Inline images, headings, paragraphs, lists, other
tables
• A 3-column layout could be simulated by
enclosing entire page within a table containing
a single row with 3 columns
• Table borders hidden, leaving only content visible

Tables support wide variety of possible
page layouts
• Jigsaw layout involves breaking up the page
content into separate cells that are then joined
together like pieces in a jigsaw puzzle
• See Figure 5-56
• 14 table cells!!
Defining the Structure of a
Jigsaw Table

Figure 5-57 shows a jigsaw layout for list of
upcoming programs
• Cell borders removed in final version
• 3 rows and 3 columns with 8 background
images
• Middle cell has content
• Browser renders it without gridlines so it
appears a rectangle with rounded borders
• See tutorial5/schedule16.htm
• Next we assign class names to the 9 cells
• Only the center cell will have content
• Remaining will display outside borders
• See tutorial5/schedule17.htm
• Let’s work on the design
• Will insert styles for the roundedBox table in an
external style sheet named rounded.css
• See tutorial5/rounded.css
• See tutorial5/schedule18.htm

In a jigsaw layout, don’t want seams to
appear between cells
• Have to collapse table borders and set cell
padding to 0 pixels
• And let’s add space between table and
surrounding page content
• See tutorial5/rounded1.css

Next will define sizes of the 8 cells that
constitute the outer edges
• Because box will vary in width and height
depending on content, different cells need to be
free to move in different directions
• Left/right sides should expand in vertical
direction to accommodate table content

Each cell must be large enough to display
border image files
• But the top border is free to expand
horizontally, but must be tall enough to display
top border image
• Remember that a width or height value of auto
allows browser to change element to match
content
• See tutorial5/rounded1.css

Won’t set width or height for boxContent
because that should expand to match
content
Adding the Rounded Border

Now put background images in 8 outside
cells
• See Figure 5-63

Each image is tiled in a different way
• Left and right images are tiled vertically, filling
up entire background of left/right cells
• Top and bottom images tiled horizontally,
filling backgrounds of top/bottom cells
• Corner cells do no tiling, remaining fixed
• See tutorial5/rounded2.css
Adding the Box Content

Now we can enter text into roundedBox
table
• Will test our styles first by inserting some
simple text to verify accuracy in design
• See tutorial5/schedule19.htm

This design is flexible and will expand to
match content placed in center cell

Now replace that text with the complete list
• Kyle has created a style sheet for that list
• Can copy and paste that code directly into
rounded box table and then link page to Kyle’s
style sheet
• See tutorial5/newshows.txt to copy code
• See tutorial5/schedule20.htm
Exploring the Controversy over
Table Layouts


Not all Web designers like tables for
anything but tabular info
Some challenges on page 324:
•
•
•
•
•
Table layouts are not in the spirit of HTML
Difficult to revise
Take longer to render
Can be code-heavy
Can be inaccessible to users with disabilities

Despite these challenges, most Web page
layout using tables will not disappear
• Layout techniques best suited to widest variety
of browsers and operating environments
Creating a Rounded Box Using
div Containers

Kyle wants to add another rounded box to
schedule page
• Will contain name and description of program
currently running
• Actually hundreds of techniques to create
rounded borders without using tables
• This one was introduced by a Web designer
Nesting div Containers

Basic idea is to nest several levels of div
elements within one another
• Since they have no padding and no margin
spaces, they will completely superimpose upon
one another—creating a stack of div elements
that all occupy the same space
• Any background image from an element lower
in the stack will be visible unless obstructed by
an image higher in the stack
• See Figure 5-70
• Notice the corner images obstruct the view of
the side images so it appears as one seamless
curve
• See tutorial5/schedule21.htm

You used the same class names earlier
• No accident!
• The 8 div elements fulfill same role of creating
rounded borders as the 8 table cells did in the
table layout
• But you need is add a style to place a 5-pixel
margin around roundedBox and 16 pixels of
padding to boxContent
• Because of how IE treats nested div elements,
will place box using relative positioning to
ensure all nested divs line up properly
• See tutorial5/rounded3.css

Kyle will talk to KPAF programmers to
write code that will automatically insert
name of currently-airing program into the
rounded box
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