Introduction to Programming the WWW I CMSC Winter 2003 Lecture 5

The Table Element Each table tag pair can hold any number of table rows Each table row tag pair can hold any number of table data items Each table data tag pair can hold text, images, and other HTML elements Each table head tag pair 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