Transcript Lecture 5_ppt

Introduction to Programming
the WWW I
CMSC 10100-1
Winter 2003
Lecture 5
The Table Element
• Each table tag pair <table></table>
can hold any number of table rows
• Each table row tag pair <tr></tr> can
hold any number of table data items
• Each table data tag pair <td></td> can
hold text, images, and other HTML elements
• Each table head tag pair <th></th> has
a different appearnce than table data.
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
Table Attributes
• You can center HTML elements on a Web page by
embedding them inside a single-celled table with a
width=“100%” table attribute and an
align=“center” table data attribute
• A border=“5” table attribute creates a 3-D picture
frame for a single-celled table containing an image
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 cellpadding=“20” table attribute will
put white space between the two columns)
More on tables for page layout later
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
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
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. width=“50”) for
the empty table data element
• Put an internal table inside
• Better to control margins with CSS (later)
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
Page layout
• Example: bagpipe page
• Sets up header, navigation, main, and
footer information sections
• Need to write in content to each section
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