Lecture: Tables

Table Tags (all container tags)

<TABLE> establishes a table

<TR>(________) establishes a row <TD>(________) says what’s in the row

more than one TD within a <TR> forces columns

More Table Tags

<TH ...> Table header

conceptually identical to data cells except in bold and have a default ALIGN=center.

More Table Tags

<CAPTION ..> inside TABLE tag but not table rows or cells. ALIGN defaults to top but can be set to

bottom

horizontally centered with respect to the table, may have lines broken to fit within the width of the table.

A Simple Table Example

Code Posted Separately

Table Attributes: 1. Borders

within the <TABLE> tag

Borders are expressed in pixels

The default is no border but space around

table

2. ALIGN

Within TABLE: ALIGN LEFT or RIGHT makes flow around the table (the way it did with images);

defaults left ,text above and below, NOT flowing

More On ALIGN

Used with CAPTION : whether the caption appears above or below the table -top or bottom

defaults to top

Used with TR, TH, or TD: how text inside the table is aligned- left, center, and right

3. VALIGN

controls where text within table cell(s) is aligned

used with TR, TD, or TH

main options top, middle, bottom

4. COLSPAN and ROWSPAN

Set column/ row width by the factor specified

COLSPAN=3 cell is 3 columns wide ROWSPAN=2 cell is 2 rows deep

More COLSPAN and ROWSPAN

Defaults are 1 and 1

If something greater than 1 is specified COLSPAN goes right ROWSPAN goes down (more on this later)

5. WIDTH and HEIGHT

Browsers automatically format table cells to fit content of largest entry

Use WIDTH and HEIGHT to override (in percentages or pixels)

6. CELLPADDING and SPACING

CELLPADDING- within cells (in pixels- defaults to 1)

CELLSPACING- between cells (in pixels, defaults to 2)

7. BACKGROUND

BACKGROUND=“url”

tiles automatically

Borderless Tables as Page Organizers

Set Width at 100%

All page contents are within TD tags

common for newpaper/magazine layout also for “Navigation bars” (Columns, usually on left, containing links)

Reprise: COLSPAN and ROWSPAN

Used for complex borderless tables

Set to the number of columns or rows

COLSPAN goes to the right ROWSPAN goes down

What you Do

Diagram your Layout

Count the rows and columns

Create a table with that many rows and columns

Use COLSPAN and ROWSPAN to reproduce your configuration

Count The Rows and Columns

Span them in Stages

For At-Home Practice

More Practice: Count the Steps

How to fit tables on user’s screen

OK if the the user has to scroll down to see all

the table, but not to scroll sideways.

Fitting on the screen depends on monitor Most common: 640 X 480 - 13% 800 X 600 - 55% 1024 X 768 - 26%

So…

commercial web sites make their page content around 600 pixels wide using fixed width tabular structure

Some Commercial Art Galleries

Waddington Galleries, LondonVose Galleries, PhiladelphiaOdon Wagner Gallery, TorontoGallery of West Indian Art, Montego Bay and internet