Working with Web TablesMaureen Smith

Professor, Saddleback CollegeTutorial 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

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

Courier Times New Roman

• 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 two-sided<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, usevalign=“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 background-color 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 tablebackground-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 imagefloat: 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

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

Nesting div Containers

• 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