html Tables Basic Table Markup

How Tables are Used For Data Display Tables were originally designed to display and organize tabular data (charts, statistics, schedules). Tables consist of rows and columns that intersect to create cells

Tables

How Tables Are Used For overall page structure Have been used to control the entire layout of many sites. For controlling text alignment & white space For holding together a multipart (sliced) image. Before CSS - tables were the only way to create multi- column layouts CSS offers more control over website layout (semantically correct)

Basic Table Markup Determines the start and end of a table. You can specify the width of a table, whether or not it has a border, and the spacing between cells (best to handle this formatting with CSS). Places a text heading above the table, which labels the table for reference. Defines the start and end of a table row Defines a table header, acts as a label for a group of table cells. Defines a standard table cell.

Basic Table Structure

The XHTML code for tables The code for a table with 3 columns and 2 rows Heading 1 Heading 2 Heading 3 Content Content Content

Formatting Tables Attributes for the tag include: column span row span Cause the cell to stretch across a number of rows or columns

Formatting Tables Accessibility Title or brief description - displayed in visual browser Longer description of table and contents Not rendered in visual browsers Used by screen readers, assistive devices

Formatting Tables Presentational Table Attributes (can now be handled by CSS) Presentational Attributes for the tag include: controls the thickness of the border around the table controls the dimension of the table <td align=“left | right | center” valign=“left | right | center”> controls the cell content alignment applies a background color to the table

Formatting Tables Attributes for the tag include: controls the space around the cell contents (default value = 1 px) Used with table element only, this value applies to all cells in the table CSS padding property allows for more control (cell-by-cell) controls the space between cells

Tables – pros & cons Tables can be quirky Complex code Inconsistent browser interpretation of the code Expanding text in cells: cell will expand to accommodate content Collapsing cells Shifting columns: complex tables with lots of column spans may sometimes fall apart in a browser Still very useful…