1. Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Project 5: Working with Tables Kelly L. Valqui Essentials for Design XHTML

2. Copyright (c) 2004 Prentice-Hall. All rights reserved. 2 Parts of a Table  Table – tabular, grid-like layout of Web content  Rows – horizontal groupings in a table  Columns – vertical groupings in a table  Cells – individual units of a table

3. Copyright (c) 2004 Prentice-Hall. All rights reserved. 3 Visual Summary A typical table Rows Columns Cells

4. Copyright (c) 2004 Prentice-Hall. All rights reserved. 4 Tags for Table Creation   Beginning and end of the table  (table row)  Beginning and end of a row in the table  Several can be nested inside the  (table definition)  Beginning and end of a cell (column) in the table row  Several can be nested inside the   Special type of cell that contains headers  Text inside cell is bold and centered

5. Copyright (c) 2004 Prentice-Hall. All rights reserved. 5 Two Common Attributes  border  Pixel width of the lines surrounding cells  Default is 0 (no border)  width  Indicate how much of page width is taken by table  By default, each column is wide enough to handle the largest text in one of its cells

6. Copyright (c) 2004 Prentice-Hall. All rights reserved. 6 Effects of,, and Tags Tables 1 2 3 4 5 6 7 8 9 By default, no border and narrow columns

7. Copyright (c) 2004 Prentice-Hall. All rights reserved. 7 Effects of border and width attributes Lines surround cells Table width takes up ¾ of page width

8. Copyright (c) 2004 Prentice-Hall. All rights reserved. 8 Effects of border and width attributes First Column... Second... And Third Header cells have bold and centered text

9. Copyright (c) 2004 Prentice-Hall. All rights reserved. 9 The Tag's colspan and rowspan attributes  colspan  Specify number of columns to span  The cell will then take up that many columns in the table  Syntax:  text  rowspan  Specify number of rows to span  The cell will then take up that many rows in the table  Syntax:  text

10. Copyright (c) 2004 Prentice-Hall. All rights reserved. 10 Effects of Column and Row Spanning Column spanning: Today’s Objectives Note the space below "Today's Objectives", caused by making it a header (h3) Row spanning: Notes:

11. Copyright (c) 2004 Prentice-Hall. All rights reserved. 11 Applications of height and width attributes  Table width and height  Absolute pixel sizes:  Relative percentages:  Row height  Absolute pixel sizes:  Relative percentages:  Column width and height  Absolute pixel sizes:  Relative percentage of row:

12. Copyright (c) 2004 Prentice-Hall. All rights reserved. 12 How Width and Height Decisions are made  Widest cell width setting determines column width  Largest cell (or row) height setting determines entire row height  Percentages in table settings are based on page size  Percentages in cell and row settings are based on table size  If content is larger than size settings, element is made just large enough to satisfy content's needs

13. Copyright (c) 2004 Prentice-Hall. All rights reserved. 13 Effect of Changing Table Size changed to

14. Copyright (c) 2004 Prentice-Hall. All rights reserved. 14 Effect of Changing Cell Size First Column... changed to First Column...

15. Copyright (c) 2004 Prentice-Hall. All rights reserved. 15 Table and Table Data Alignment  tag's align Attribute  Controls horizontal alignment of table in the page  Options: left (default), right, center  tag's align attribute  Controls horizontal alignment of content in the cell  Options: left (default), right, center  tag's valign attribute  Controls vertical alignment of content in the cell  Options: top, bottom, center (default)

16. Copyright (c) 2004 Prentice-Hall. All rights reserved. 16 Effect of Table Alignment changed to

17. Copyright (c) 2004 Prentice-Hall. All rights reserved. 17 Effect of Cell Data Alignment Notes: changed to Notes:

18. Copyright (c) 2004 Prentice-Hall. All rights reserved. 18 Sections of a Table  Header  Appears at top of each printed page of a multi-page table   Footer  Appears at bottom of each printed page of a multi-page table   Body  Contains main content of the table   Headers and footers are not supported in all browsers

19. Copyright (c) 2004 Prentice-Hall. All rights reserved. 19 Effects of Headers and Footers Title of the Table The footer appears at the bottom

20. Copyright (c) 2004 Prentice-Hall. All rights reserved. 20 Planning a Table Design  Table design can be complex  Best to sketch table on paper before coding  Helps for:  Page layout  Structuring data

21. Copyright (c) 2004 Prentice-Hall. All rights reserved. 21 Borders and Colors  Concepts  Manipulating a table's border color  Manipulating a table's background colors

22. Copyright (c) 2004 Prentice-Hall. All rights reserved. 22 Attributes for Color Control  Border color control  bordercolor – sets the overall border color  bordercolorlight – sets color of the light portion of the border (Internet Explorer only)  bordercolordark – sets color of the dark portion of the border (Internet Explorer only)  Background color control  Bgcolor – sets the color of the fill area

23. Copyright (c) 2004 Prentice-Hall. All rights reserved. 23 About Attributes for Color Control  These can be applied to table, row, or cell  Local settings override global settings  Color control attributes are deprecated  XHTML 2.0 will not include them  Use CSS instead

24. Copyright (c) 2004 Prentice-Hall. All rights reserved. 24 Effects of Border Color Control

25. Copyright (c) 2004 Prentice-Hall. All rights reserved. 25 Effects of Background Color Control Global settings: Local settings:

26. Copyright (c) 2004 Prentice-Hall. All rights reserved. 26 Using Cellspacing and Cellpadding  Cellspacing – the gap between the cells in a table  Implemented with cellspacing attribute  Cellpadding – space between the content of a cell and its borders  Implemented with cellpadding attribute

27. Copyright (c) 2004 Prentice-Hall. All rights reserved. 27 Effect of Cellpadding and Spacing Gap between content and cell borders: Gap between different cells borders:

28. Copyright (c) 2004 Prentice-Hall. All rights reserved. 28 Spacer Images  Transparent images to expand cells a specific size  Not seen by the view  Often thin in width and long in height

29. Copyright (c) 2004 Prentice-Hall. All rights reserved. 29 Table Nesting and Mortised Pages  Nested table – one table inside another  Simple nesting can be hand coded  Mortised Web page design  Elaborately planned nested table structure  Use many tables to piece together images and other elements  Usually done in a Web editor, not hand coded

30. Copyright (c) 2004 Prentice-Hall. All rights reserved. 30 Effects of Table Nesting A table is nested inside the Notes cell Notes: 1. 2. 3. 4. 5. 6.