Introduction to Programming the WWW I

1
Introduction to Programming the WWW I

• CMSC 10100-1
• Winter 2003
• Lecture 5

2
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
• Each table head tag pair ltthgtlt/thgt has a
  different appearnce than table data.

3
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

4
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

5
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)
• Example link from bagpipes page
• Tables can also be used to separate text into two
  columns (a cellpadding20 table attribute will
  put white space between the two columns)
• More on tables for page layout later

6
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

7
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

8
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
• Put an internal table inside
• Better to control margins with CSS (later)

9
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 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

10
Page layout

• Example bagpipe page
• Sets up header, navigation, main, and footer
  information sections
• Need to write in content to each section

11
Disadvantages of tables for layout

• Not all browsers can read tables
• Complex layout requires complex tables (lots of
  headaches, room for error)
• Complex tables can download, be rendered slowly
• Scalability issues