INLS 102 Tables

1
INLS 102Tables Frames

2
Housekeeping

• Project 6 received (not graded yet)
• Project 7 due next Tuesday
• Any questions about material so far?
• Todays Presentation (SILS Wiki)

3
For Next Week

• Read Web Design in a Nutshell
• Chapter 15 (pp. 253-279), Forms CGI
• Chapter 28 (pp. 461-474), Javascript
• Bring laptops

4
Tables

• Common method to arrange information
• Also used by web authors for more control of
  information layout on the screen
• Basic table syntax
• ltTABLEgt
• ltTRgt ltTDgtlt/TDgt ltTDgtlt/TDgt lt/TRgt
• ltTRgt ltTDgtlt/TDgt ltTDgtlt/TDgt lt/TRgt
• lt/TABLEgt

5
Table Examples

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

6
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

7
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

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.angelfire.com/fl5/html-tutorial/frames/
  index.htm
• 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
Class 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