1. Web Development & Design Foundations with XHTML Chapter 8 Key Concepts

2. Learning Outcomes In this chapter, you will learn how to: ◦ Create a table on a web page ◦ Apply attributes to format tables, table rows, and table cells ◦ Format the layout of a Web page with a table ◦ Use nested tables ◦ Use CSS to configure an XHTML table 2

3. Table Tables are commonly used on Web pages in two ways: ◦ To organize information ◦ To format the layout of an entire Web page

4. XHTML Using Tables Composed of rows and columns – similar to a spreadsheet. Each individual table cell is at the intersection of a specific row and column. Configured with,, and elements 4

5. XHTML Table Elements Element Contains the table Common attributes: border, width, align Element Contains a table row Element Contains a table cell Element ◦ Configures a description of the table 5

6. XHTML Table Example Birthday List Name Birthday James 11/08 Karen 4/17 Sparky 11/28 6 Birthday List

7. XHTML Table Example 2 Name Birthday James 11/08 Karen 4/17 Sparky 11/28 7 Using the Element

8. Hands-On Practice 8.1 Pages 314-5 Chapter8/starters/services.html Chapter8/8.1/services.html

9. XHTML Common Table Attributes align (deprecated) bgcolor (deprecated) border cellpadding cellspacing summary width ◦ Percentage or pixels? 9

10. XHTML Common Table Cell Attributes align bgcolor (deprecated) colspan rowspan valign height (deprecated) width (deprecated) 10

11. XHTML colspan Attribute Birthday List James 11/08 Karen 4/17 11

12. XHTML rowspan Attribute James 11/08 12

13. Hands-On Practice 8.2 Pages 321-322 Chapter8/8.2/services.html

14. Accessibility and Tables Use elements to indicate column or row headings. Table element summary attribute ◦ provide an overview of the table contents Complex tables: Associate table cell values with their corresponding headers ◦ tag id attribute ◦ tag headers attribute

15. School Attended Years Subject Degree Awarded Schaumburg High School 2000 - 2005 College Prep H.S. Diploma

16. Table Row Groups <table border="1" width="75%" summary="This table lists my educational background."> School Attended Years Schaumburg High School 2005 - 2009 Harper College 2009 - 2010 table head rows table body rows table footer rows

17. Examples Chapter8/tables/table1.html Chapter8/tables/table1a.html