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

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

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

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

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

Copyright (c) 2004 Prentice-Hall. All rights reserved. 6 Effects of,, and Tags Tables By default, no border and narrow columns

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

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

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

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:

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:

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

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

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

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)

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

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

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

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

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

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

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

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

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

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

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

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:

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

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

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