web


Introduction

Tables are commonly used for page layout. Though CSS is the correct way to do page layout, many sites still use tables for layout. In this lab, you will create several pages that demonstrate use of tables for layout.

Instructions

If you have not already, browse table notes and examples. Create a folder named tableLab. In this folder, create 4 files: page1.htm, page2.htm, page3.htm, page4.htm.

page1

  1. Open page1.htm and type in "table settings" at the top of the page. Format this as Heading 1.
  2. Create a table with 4 rows and 3 columns.
  3. Top row:
    Name email phone
  4. enter data in rows 2-4 (any data is fine)
  5. table width = 600
  6. column widths each should be 200
  7. set top row as a header row. Change the background color.
  8. What happens if the image width is larger than the column width?

page2

  1. Open page2.htm
  2. Create a table with 1 row and 2 columns.
  3. Set table width to 760.
  4. left column width = 200
  5. right column width = 560
  6. set background color for left column
  7. create links to all 4 pages in left column
  8. in right column, type in "2 column fixed" at the top of the page. Format this as Heading 1. Then add and image and explain the advantages and disadvantages of having a fixed width page layout.
  9. add a page background color and center the table

page3

  1. Open page3.htm
  2. Create a table with 1 row and 2 columns.
  3. Set table width to 90%.
  4. left column width = 200
  5. right column width = blank
  6. create links to all 4 pages in left column
  7. in right column, type in "2 column fluid" at the top of the page. Format this as Heading 1. Then add and image and explain the advantages and disadvantages of having a fluid layout.
  8. add a page background image that emphasizes 2 column layout (right click and save one of the sample background images or one you choose or create).
  9. If necessary, change the width of the left column to fit the background image.

page4

  1. Open page4.htm
  2. Create a table with 1 row and 3 columns.
  3. Set table width to 90%.
  4. left column width = 200
  5. right column width = 200
  6. center column width undefined
  7. create links to all 4 pages in left column
  8. in center column, type in "3 column fluid" at the top of the page. Format this as Heading 1. Then add and image and explain the advantages and disadvantages of having a fluid layout.
  9. In right column, insert a favorite quote or an image.
  10. Set background colors for the columns

 

Turning this is

Upload files and link to page2.htm from 212portfolio.htm. This will be graded at the end of the semester.