Design for Web I - ART 116 - Matthew Ehrens
Fall 2002 - lastmod : 2002.10.17 @ 1334
Lesson 6- Tables (Ch. 12 - Pg. 271)

  • About : Tables, Rows, Columns, Cells
  • Basic Steps
    • Design your table on paper first!
    • Next create approximate Table Layout
    • Finally add content
  • Minimum size to fill maximum available/needed space
  • Insert -> Table
    • Rows, Columns
    • Cell Padding
    • Cell Spacing
    • Width (% or Pixels)
    • Border
  • Selecting Cells (Apple-Click)
  • Selecting Rows/Columns (Black Arrow)
  • Selecting entire Table (Tag Selector)
  • Cell Properties
    • Text Formatting
    • Links/Targets
    • Adjusting Column Widths
      • Set via Top Row
      • Units are relative to table width
    • Adjusting Row Heights (always Pixels)
      • Set for individual Rows
    • Other Cell Properties
      • Alignment (Horizontal/Vertical)
      • Nowrap (use line breaks to wrap)
      • Header
      • Background Color
      • Background Image (not browser compatible)
      • Border Color (not browser compatible)
  • Merging Cells (Modify -> Table -> Merge Cells)
  • Splitting Cells (Modify -> Table -> Split Cell...)
  • Insert Row/Column (Modify -> Table -> Insert Row/Column)
  • Delete Row/Column (Modify -> Table -> Delete Row/Column)
  • Nested Tables
    • Width of 100% will fill cell the table is in
    • Height is minimum it takes to display content (or pixel height).
    • Pad with Line Breaks to force larger.
    • Use these to fake border colors.
      • Outside table has background of desired color
      • Inside table's cellspacing allows color to show through
  • ADVANCED : Layout View
    • Adding New Layout Table
    • Adding Layout Cells
    • Adjusting Cell Width/Heights
    • Make Column Autostretch (only one per table)
      • Requires Spacer Images
  • Table Tips
    • Design on paper first!
    • Include Splits/Joins in design drawings
    • Build table layouts first to preview before putting real content in.
    • Test in all browsers (Dreamweaver does not preview well)
    • Compute your math for cell sizes in advance.
    • Avoid using Mouse to resize cells. Enter Pixel values manually.
    • VALIGN defaults to middle
    • Width has priority over Height, Most content has priority over both:
      • Text wraps after specified cell width is reached, unless nowrap is active.
      • Images larger than specified cell width will cause cell to expand.
      • Height %'s don't work in all browsers
      • Height expands beyond your specifications as content gets longer (or when width shrinks)
    • If not working, try building your table in a fresh document, then copy/paste into existing document.
    • Try nesting if merging/splitting doesn't seem to produce desired results.
    • Adjust page Margins to get table closer to edges.
    • Empty cells don't display (Dreamweaver puts a "Non-Breaking Space" in most empty cells to avoid this.)

LAB 6 - Tables
  1. Create a page layout using tables that looks like this: Sample 1
  2. Make sure it scales/shrinks like this: Sample 2
  3. Some columns are fixed width.
  4. Some rows are fixed heights.
  5. Include cell colors/alignment and font settings
  6. Include border/spacing properties
  7. Email your URL to instructor by 2pm 10/24