INLS 461 Tables

1
INLS 461Tables Frames

2
Housekeeping

• Todays Presentation
• HTML quiz Thursday (3/8)
• Project 7 due midnight Thursday
• Request CGI Service for your Onyen
• Search for CGI Access at help.unc.edu
• Request Personal CGI Access for yourself
• Any questions about material so far?

3
Tables

• Common method to arrange information
• Also used for screen layout (controversial)
• Basic table syntax
• ltTABLEgt
• ltTRgt ltTDgtlt/TDgt ltTDgtlt/TDgt lt/TRgt
• ltTRgt ltTDgtlt/TDgt ltTDgtlt/TDgt lt/TRgt
• lt/TABLEgt

4
Table Examples

• Back to class notes page (examples)
• Class assignments page (uses tables)

5
COLSPAN ROWSPAN

• Browser looks at whole table before deciding how
  many ltTDgtlt/TDgt cells across down
• Column span
• ltTD COLSPAN2gt
• Make this cell as wide as 2 unmodified cells
• Row span
• ltTR ROWSPAN7gt
• Make this cell as high as 7 unmodified cells
• Combine COLSPAN and ROWSPAN attributes to create
  cells that are bigger in both directions

6
Layout Via Tables

• Use one big table to specify the general
  appearance of all pages
• Common header along the top
• Navigation area on the left
• Other cells for specific content
• Use that page as a template, and just fill in the
  content area for individual pages

7
Pattern ExamplesNavigation Bar
8
Frames

• Frames carve up the page horizontally,
  vertically, or both (can also be nested)
• Useful as a simple navigation system, or in cases
  where you want to load multiple HTML documents
  into one screen
• (Loading multiple HTML documents into one screen
  is not necessarily a good thing)

9
Frames Tutorials

• http//www.w3schools.com/html/html_frames.asp
• http//www.w3schools.com/html/tryit.asp?filenamet
  ryhtml_frame_navigation2

10
Frames Example

• ltHTMLgt
• ltHEADgt
• lt/HEADgt
• ltFRAMESET ROWS"60,"gt
• ltFRAME SRC"heading.html NAME"heading"gt
• ltFRAMESET COLS"160,"gt
• ltFRAME SRC"navigation.html"
  NAMEnavigation"gt
• ltFRAME SRC"main.html" NAME"main"gt
• lt/FRAMESETgt
• lt/FRAMESETgt
• lt/HTMLgt

11
Frames Exercise

• Back to class notes page
• Complete Frames_Example.html
• Use these file names
• heading.html
• Create some heading information
• navigation.html
• Invent some navigation information
• content.html
• Think up some content