computer science 101 lists and tables. lists unordered lists - use a bullet ordered lists - use a...
Post on 05-Jan-2016
228 Views
Preview:
TRANSCRIPT
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
top related