Tables

–Example

–Basic Table Elements and Attributes

–Grouping Sections of a Table

–Splitting Up Tables Using a Head, Body, and Foot

–Nested Tables

Accessible Tables

Tables

••Display information in rows and columns

•Used to display all manner of data that fits in a grid such as train schedules, television listings, financial reports, and sports results.

•A row is made up of a set of cells on the same line from left to right

•A column is made up of a line of cells going from top to bottom.

•You create a table in XHTML using the < table > element.

•Inside the < table > element, the table is written out row by row.

•A row is contained inside a < tr > element — which stands for table row .

•Each cell is then written inside the row element using a < td > element — which stands for table data .

•Start each row and cell on a new line and to indent table cells inside table rows

Basic Table Elements and Attributes

< table >

•The < table > element is the containing element for all tables. It can carry the following attributes:

–All the universal attributes

–Basic event attributes for scripting

dir

•Indicate the direction of text

•Possible values are ltr for left to right text and rtl for right to left

  dir=“ltr”

Summary

•Provide a summary of the table ’ s purpose and structure

  summary=”Table shows the operating profit for the last four quarters. The first column indicates the quarter, the second indicates outgoings, the third indicates receipts, and the fourth indicates profit.”

< tr >

•Used to contain each row in a table

•Carry five attributes, three of which have been deprecated in favor of using CSS.

  align bgcolor char charoff valign

char

•Specify that the contents of each cell within the row will be aligned around the first instance of a particular character

  char=”.”

< td > and < th >

•Elements Represent Table Cells

•< th > element are usually displayed in a bold font

•<td> displayed left - aligned and not in bold

•< td > and < th > elements can also carry the following attributes:

–abbr align axis bgcolor char charoff colspan headers height nowrap rowspan scope valign width

< caption >

•Table should have a caption so that visitors to your site know what the table is for.

•appears directly after the opening < table > tag

•Associate the content of the table with its description

•

Splitting Up Tables Using a Head, Body, and Foot

•< thead> to create a separate table header

•<tbody> to indicate the main body of the table

•<tfoot> to create a separate table footer

•Note that the < tfoot> element must appear before the < tbody> element in the source document.

•

Accessible Tables

•Ensure your tables are easy to understand with following:

–Add captions to your tables

–Always try to use the < th > element to indicate a table heading

–Always put headings in the first row and the first column

–Avoid using nested tables

–Avoid using rowspan and colspan attributes

–Learn how a voice browser or screen reader would read a table, and the order in which the cells are read out;

–If you use the scope and headers attributes to clearly indicate which headings apply to which rows and columns, then screen readers can help users retrieve headings for a particular cell.