1 / 21

Using Rules in Web Page Tables

Using Rules in Web Page Tables. CIS67 Foundations for Creating Web Pages Professor Al Fichera. Updated on: September 4, 2010. 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.

sol
Download Presentation

Using Rules in Web Page Tables

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Using Rules inWeb Page Tables CIS67 Foundations for Creating Web Pages Professor Al Fichera Updated on: September 4, 2010

  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

  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 summaryattribute. • 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

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

  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. <table summary="Place a description of the table purpose here."> Using Rules in Web Tables by Professor Al Fichera http://profal2.com

  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

  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

  8. HTML 4.0theadRules • 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 colelements, and precede the optional tfoot and required tbody elements. Using Rules in Web Tables by Professor Al Fichera http://profal2.com

  9. HTML 4.0thead Tags • The double-sided <thead>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

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

  11. HTML 4.0tfootRules • 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

  12. HTML 4.0tfoot Tags • The double-sided <tfoot>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: <tfoot> <tr> <td colspan="n">data here </td> </tr> </tfoot> Using Rules in Web Tables by Professor Al Fichera http://profal2.com

  13. HTML 4.0 Table tbody • The tbody element defines a group of datarows 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

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

  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. Note: The CSS code will be discussed in lecture 4 of the HTML 4.0 Table lectures. Using Rules in Web Tables by Professor Al Fichera http://profal2.com

  16. HTML 4.0 Table Frames • 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: <table frame="below"> • above • below • vsides • hsides • lhs • rhs • void • box (the default) • border (same as box) Basic HTML Coding by Professor Al Fichera http://profal2.com

  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

  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

  19. HTML 4.0 Table Rules • 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: <table rules="rows"> • all • Cols • groups • none • rows Basic HTML Coding by Professor Al Fichera http://profal2.com

  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

  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

More Related