1. Updated on: September 4, 2010 CIS67 Foundations for Creating Web Pages Professor Al Fichera

2. What This Lecture Covers In this third lecture on HTML Tables I will introduce the Summary feature for Tables. Use a Table Summary for Accessibility purposes. Introduce the thead, tfoot, and tbody, of a Table. Show examples of the thead, tfoot, and tbody. Designing with Table Frames and Table Rules. Using Rules in Web Tables by Professor Al Fichera http://profal2.com 2

3. HTML 4.0 Table Summary With simple tables, a good Caption is usually a sufficient summary, but complex tables may benefit from a more detailed overview via the summary attribute. Adding a summary to your Table will be the first step in making your Table Accessible to all. If you are only using a Table to layout your Web page, the summary tag could state this up front to not confuse people having the page read to them. Using Rules in Web Tables by Professor Al Fichera http://profal2.com 3

4. HTML 4.0 Table Summary Use the Table optional summary attribute to describe the purpose and/or structure of the table. The overview provided by the summary attribute is particularly helpful to users of non-visual browsers. Using Rules in Web Tables by Professor Al Fichera http://profal2.com 4

5. HTML 4.0 Table Summary Note that the summary could also be included in a paragraph before the table, which could be helpful if you run into a browser that doesn't support summary. Using Rules in Web Tables by Professor Al Fichera http://profal2.com 5

6. HTML 4.0 Table Elements If desired a table can contain three parts: A header (declared with the thead element) A footer (declared with the tfoot element) And one or more bodies (declared with the tbody element) These parts must be declared in the above order. Using Rules in Web Tables by Professor Al Fichera http://profal2.com 6

7. Keep Order in a Table The thead, tfoot, and tbody helps the browser to scroll through the separated data and keep the header and footer in place. The browser could repeat the header and footer when the page is printed, esp. if it spans more than one page. Using Rules in Web Tables by Professor Al Fichera http://profal2.com 7

8. HTML 4.0 thead Rules The thead element defines a group of header rows in a table. A table may have one thead, which must follow any caption, colgroup, or col elements, and precede the optional tfoot and required tbody elements. Using Rules in Web Tables by Professor Al Fichera http://profal2.com 8

9. HTML 4.0 thead Tags The double-sided tags hold Header information and will appear at the top of your Table. Example on next slide. Take particular notice of where these tags are placed in relation to the table row tags. Using Rules in Web Tables by Professor Al Fichera http://profal2.com 9

10. HTML 4.0 thead Tags header text Using Rules in Web Tables by Professor Al Fichera http://profal2.com 10

11. HTML 4.0 tfoot Rules The tfoot element defines a group of footer rows in a table. A table may have only one tfoot, which must follow the optional thead and precede the required tbody. Using Rules in Web Tables by Professor Al Fichera http://profal2.com 11

12. HTML 4.0 tfoot Tags The double-sided tags hold Footer information and should appear at the bottom row of your Table. This example shows the tfoot as one cell by merging all other columns with colspan. For example: data here Using Rules in Web Tables by Professor Al Fichera http://profal2.com 12

13. HTML 4.0 Table tbody The tbody element defines a group of data rows in a table. A table must have one or more tbody elements, which must follow the optional tfoot. The tbody end tag is always optional, however, plan on closing it in case the rules change on you in the months to come. See example of the code on the next slide. Using Rules in Web Tables by Professor Al Fichera http://profal2.com 13

14. HTML 4.0 tbody Tags body text Using Rules in Web Tables by Professor Al Fichera http://profal2.com 14

15. HTML 4.0 Table Example This example from MSIE 8 does not use the Colgroup and Col attributes seen in lecture 2, yet looks similar. Using Rules in Web Tables by Professor Al Fichera http://profal2.com 15 Note: The CSS code will be discussed in lecture 4 of the HTML 4.0 Table lectures.

16. HTML 4.0 Table Frames August 25, 2010 Basic HTML Coding by Professor Al Fichera http://profal2.com 16 Note: This works in MSIE only, it allows you to decide where the Border Lines appear in your table. – These are the 9 Options below: – For example: above below vsides hsides lhs rhs void box (the default) border (same as box)

17. HTML 4.0 MSIE Frames Example MSIE is the only Browser that can use the Frames attribute, this one is the below style. Using Rules in Web Tables by Professor Al Fichera http://profal2.com 17

18. HTML 4.0 Table Frames MSIE Not a big improvement, and it only works in MSIE Using Rules in Web Tables by Professor Al Fichera http://profal2.com 18

19. HTML 4.0 Table Rules August 25, 2010 Basic HTML Coding by Professor Al Fichera http://profal2.com 19 This works in Firefox and Safari only, it allows you to decide how the inside Table Grid Lines appear in your table. – These are the 5 Options below: – For example: all Cols groups none rows

20. HTML 4.0 Rules in Firefox and Safari Rules not working in MSIE any longer, but does in Firefox and Safari, go figure! Using Rules in Web Tables by Professor Al Fichera http://profal2.com 20

21. What This Lecture Covered In this third lecture on HTML Tables I introduced the Summary feature for your tables. I discussed the accessibility feature of using a Table Summary. Introduced the concepts of a tbody, thead, and tfoot. Showed examples of the tbody, thead, and tfoot. Designing with Table Frames and Table Rules and included three Browsers and how they handled the code. Using Rules in Web Tables by Professor Al Fichera http://profal2.com 21