Lecture: Tables

Table Tags (all container tags) establishes a table (________) establishes a row (________) says what’s in the row more than one TD within a forces columns

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

More Table Tags 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 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 % 800 X % 1024 X %

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

Some Commercial Art Galleries Waddington Galleries, London Vose Galleries, Philadelphia Odon Wagner Gallery, Toronto Gallery of West Indian Art, Montego Bay and internet