The Web Wizard

1
The Web Wizards Guide to HTML

• Chapter Six
• Tables

2
Chapter Objectives

• Examine the structure of HTML tables
• Explore the most important table attributes
• Learn how tables can be used to format text
• Learn how tables can be used to format graphics
• Explain some caveats and warnings associated with
  tables

3
The Table Element

• Each table tag pair lttablegtlt/tablegt can hold any
  number of table rows
• Each table row tag pair lttrgtlt/trgt can hold any
  number of table data items
• Each table data tag pair lttdgtlt/tdgt can hold text,
  images, and other HTML elements

4
Table Cells

• A table cell is another name for a table data
  element
• Tables cells can be distinguished by their own
  background colors, type fonts, alignments, etc.
• A table containing a single cell can be used to
  frame an image or offset important text

5
Table Attributes

• You can center HTML elements on a Web page by
  embedding them inside a single-celled table with
  a width100 table attribute and an
  aligncenter table data attribute
• A border5 table attribute creates a 3-D
  picture frame for a single-celled table
  containing an image

6
Tables and Text

• Text is hard to read against a busy background
  pattern, but you can lay a table containing text
  on top of a background pattern without
  sacrificing readability (just give the table a
  solid background color)
• Tables can also be used to separate text into two
  columns (a cellpadding20 table attribute will
  put white space between the two columns)

7
Web Page Borders

• Empty table columns can be used to create margins
  for text on a Web page
• Use a fixed width attribute (e.g. width50) for
  the empty table data element
• A left-hand margin is necessary if you want to
  run a graphical border down the left side of a
  Web page (by tiling a very wide background
  pattern)

8
Tables and Graphics

• Tables can be used to control a Web page layout
  for multiple images (or images mixed with text)
• Images of different sizes can be fit together in
  irregularly-shaped tables using cell-structure
  diagrams
• All tables have an underlying cell structure with
  a uniform number of table cells across each table
  row

9
colspan and rowspan

• colspan and rowspan are table data attributes
  that are used to create irregular tables
• A table cell can be extended horizontally with
  the colspan attribute
• A table cell can be extended vertically with the
  rowspan attribute

10
One vs. Many

• If you have one very large table, try to break it
  up into a sequence of smaller tables that can be
  stacked vertically on a Web page
• Browsers have to download the contents of an
  entire table before any of the table can be
  viewed
• Multiple tables will be displayed incrementally
  so the user will be able to see the first part of
  your page while the rest of the page is still
  downloading