updated on: september 4, 2010 cis67 foundations for creating web pages professor al fichera

3

Using Rules in

Web Page Tables

Updated on: September 4, 2010

C I S 6 7Fo u n d ati o n s fo r C re a ti n g We b Pa g e s

Professor Al Fichera

Using Rules in Web Tables by Professor Al Fichera http://profal2.com

3What This Lecture CoversIn 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.

2


3HTML 4.0 Table SummaryWith 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.

3


3HTML 4.0 Table SummaryUse 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.

4


3HTML 4.0 Table SummaryNote 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.">

5


3HTML 4.0 Table ElementsIf 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.

6


3Keep Order in a TableThe 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.

7


3HTML 4.0 thead RulesThe 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.

8


3HTML 4.0 thead TagsThe 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.

9


3HTML 4.0 thead Tags<thead> <tr>

<th> header text </th><th> header text </th><th> header text </th><th> header text </th>

</tr> </thead>

10


3HTML 4.0 tfoot RulesThe 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.

11


3HTML 4.0 tfoot TagsThe 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>

12


3HTML 4.0 Table tbodyThe 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.

13


3HTML 4.0 tbody Tags<tbody> <tr>

<td> body text </td> <td> body text </td> <td> body text </td>

</tr> </tbody> </table>

14


3HTML 4.0 Table ExampleThis example from MSIE 8 does not use the Colgroup and

Col attributes seen in lecture 2, yet looks similar.

15

Note: The CSS code will be discussed in lecture 4 of the HTML 4.0 Table lectures.

Basic HTML Coding by Professor Al Fichera http://profal2.com

3HTML 4.0 Table Frames

August 25, 201016

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">

abovebelowvsideshsides

lhsrhsvoidbox (the default)

border (same as box)


3HTML 4.0 MSIE Frames ExampleMSIE is the only Browser that can use the Frames

attribute, this one is the below style.

17


3HTML 4.0 Table Frames MSIENot a big improvement, and it only works in MSIE

18

Basic HTML Coding by Professor Al Fichera http://profal2.com

3HTML 4.0 Table Rules

August 25, 201019

• 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">

allColsgroupsnonerows


3HTML 4.0 Rules in Firefox and SafariRules not working in MSIE any longer, but does in Firefox

and Safari, go figure!

20


3What This Lecture CoveredIn 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.

21

updated on: september 4, 2010 cis67 foundations for creating web pages professor al fichera

Documents

table rules

web tables

table elements

html tables

table summary note

thead rules

table frames

table accessible