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.
