Computer Science 101

Lists and Tables

Lists

• Unordered lists - use a bullet

• Ordered lists - use a number, Roman numeral, or letter

Unordered Lists

<UL><LI>list item</LI>...<LI>list item</LI></UL>

A list item can be text, an image, a nested list, or anything that can be marked up

Ordered Lists

<OL><LI>list item</LI>...<LI>list item</LI></OL>

List Attributes

• TYPE - square (for unordered lists)

• TYPE - 1 (Arabic numerals), I or i (Roman numerals, a (letters)

• START - a number, indicates first number in the list

Tables

• A two-dimensional grid of cells that can contain any marked up stuff

• Useful for organizing tabular information and also for laying out any complex Web pages

Built by Rows

<TABLE><TR>...</TR>...<TR>...</TR></TABLE>

Cells in each row are specified with table data tags (<TD>cell item</TD>)

The Border Attribute

• <TABLE BORDER=aNumber>

• Default is 0, leaving no visible border

• Value gives the pixel width surrounding all cells

A Table With Four Cells in One Column

A 3 by 2 Table

Other Table Attributes

• CELLPADDING - space between cell border and its contents

• CELLSPACING - space between cells

• BGCOLOR - color of interior of cells

Cell Padding and Spacing

Other Table Attributes

• WIDTH and HEIGHT – defaults adjust to contents of cells– can be percentages or pixels

• ALIGN - same as for IMG element

Using Width and Height

Cell Properties: Headers

Substitute TH tags for TD tags in the top row

Other Cell Attributes

• ALIGN - the usual stuff

• BGCOLOR - as always

• BACKGROUND - tiles an image

• WIDTH and HEIGHT - % or pixels

Organizing a Page

• Table cells can contain anything

• Don’t use borders

Columnar Layout

• Set table’s WIDTH and HEIGHT to 100%

• Have a fixed-width column to the left with links (a navigation bar)

• Put other stuff in column to the right, which fills the rest of the page

Spanning Rows and Columns

• Use ROWSPAN or COLSPAN to merge cells vertically or horizontally

• Defaults are 0

• Applied to the right and down

• Fewer cells result

Draw Pictures of the Grid