1. Kevin Murphy Introduction to Tables Masters Project CS 490

2. Kevin Murphy Tables n Tables are useful for organizing large bodies of information so that the reader can quickly see the overall picture. n Tables on Web pages are similar to spreadsheets or tables in word processing programs. n Tables are organized in columns (vertical) and rows (horizontal). n A cell, where data is placed, is the intersection of a column and a row.

3. Kevin Murphy Tables in HTML n Since it is difficult to picture how a table will appear on a Web page when looking at the HTML code, plan and sketch your table on paper first. n Plan for a lot of experimenting, testing, re- adjusting code, and testing again until you get what you want. n HTML editors, spreadsheet programs, and word processing table programs can help with table creation.

4. Kevin Murphy Basic Table Tags 1. 2. 3. Other:

5. Kevin Murphy Some Attributes BorderRowspan Width, HeightColspan AlignCellspacing NoWrapCellpadding (In addition, any cell can contain text and/or HTML codes including lists, links, forms, or other tables.)

6. Kevin Murphy Sample: Final Table Our Daily Offerings

7. Kevin Murphy Create the Table First, Plan the Table on Paper Our Daily Offerings

8. Kevin Murphy Then, Type the Table Contents Our Daily Offerings

9. Kevin Murphy Add the Tags Crab Scallop Lamb Rib Lunch $10 $14 $16 $14 Dinner $21 $24 $29 $23

10. Kevin Murphy Add a Caption Our Daily Offerings OR Our Daily Offerings Crab Scallop Lamb Rib

11. Kevin Murphy NOWRAP Example Use NOWRAP to get this Not this

12. Kevin Murphy Code the NOWRAP Attribute Our Daily Offerings Crab Scallop Lamb Prime Rib

13. Kevin Murphy Enhance the Table Span a heading across 2 columns To get this Our Daily Offerings Seafood Meat Add this

14. Kevin Murphy Enhance the Table Add a Border, Cell Spacing, and Cell Padding Syntax: Border or Border=value (default is 1 pixel) Cellspacing=value (default is 2 pixels) —Adds space between cells— Cellpadding=value (default is 1 pixel) —Adds space around cell contents—

15. Kevin Murphy Aligning Cell Contents n ALIGN=Left, Center, Right -Attribute for table row tag -Attribute for and cell tags default is center default is left n VALIGN=Top, Bottom, Middle -Attribute for table row tag -Attribute for and cell tags Default value is middle

16. Kevin Murphy Width and Height Attributes n Browsers generally display a table as large as it needs to be for the contents. n A column or row is as wide as the widest cell within that column or row. n The size of the table, column, or row can be controlled with attributes expressed in pixels or as a percentage.

17. Kevin Murphy Height, Width Examples (Displays the table as a % of browser window) (Displays as a 100 pixel square) (Displays as 2% of the width and height of the entire table)