HTML Tables
HTML allows little control over layout. The table tag has been exploited to give designers additional control. Tables are used to create intricate designs and sophisticated. web page layouts. They are, of course, also used to present information in a tabular form.
Tables
- <table>...</table>: This is the basic container for a table
- align = left | right | center (deprecated): Tables are not normally inline objects, but can be if alignment is set.
- bgcolor = RGB_triplet | named_color
- background = image URL (non-standard)
- border = value (thickness of border) | "border"
- bordercolor = RGB_triplet | named_color (non-standard)
- cellpadding = value (pad between data and cell border)
- cellspacing = value (pad between cells)
- height = pixels | window%
- width = pixels | window%
- class, style (used with CSS)
- summary, title, dir, id, lang (not well supported yet)
- cols = value (non-standard, tells browser how many columns are in table)
- frame = box | void | above | below | lhs | rhs | hsides | vsides
specifies where border around table is drawn (HTML 4.0, IE4) - rules = all | groups | rows | cols | none
specifies where internal lines are drawn (HTML 4.0, IE4)
- <caption>...</caption>
- align = top | bottom
- class, style (used with CSS)
- dir, id, lang, title (HTML 4.0, not supported yet)
- <td>...</td>
- align = left | center | right
- valign = top | middle | bottom | baseline
- height = pixels | window% (only use in last cell rendered in row)
- width = pixels | window% (only use in last cell rendered in column)
- bgcolor = RGB_triplet | named_color
- nowrap
- colspan = value
- rowspan = value
- class, style (used with CSS)
- abbr, axis, headers, scope (HTML 4.0, not supported yet)
- char, charoff (HTML 4.0, used to align decimals)
- dir, id, lang, title (HTML 4.0, not supported yet)
- <th>...</th>
- align = left | center | right
- valign = top | middle | bottom | baseline
- height = pixels | window% (only use in last cell rendered in row)
- width = pixels | window% (only use in last cell rendered in column)
- bgcolor = RGB_triplet | named_color
- nowrap
- colspan = value
- rowspan = value
- class, style (used with CSS)
- abbr, axis, headers, scope (HTML 4.0, not supported yet)
- char, charoff (HTML 4.0, used to align decimals)
- dir, id, lang, title (HTML 4.0, not supported yet)
- <tr>...</tr>
Notes
- Tables can be nested.
- Images can be displayed within table cells.
- A table can be divided into sections with the new thead, tbody, and tfoot tags. This will come in handy when the rules attribute of the table tag is better supported.
- The colgroup tag allows you to format whole columns at a time. It has the attributes align, valign, and width. In addition, it includes the span attribute which lets you apply formatting to a number of adjacent columns all at once. This feature becomes even more useful when stylesheets are used.
- The col tag allows you to format columns within a colgroup tag. It has the attributes align, valign, and width. In addition, it includes the span attribute which lets you apply formatting to a number of adjacent columns all at once. This feature becomes even more useful when stylesheets are used. You should not use the span attribute if the enclosing colgroup tag is using the span attribute.
Table Layout Examples
The following links are examples of using tables to layout a web page.
Table: Eclectic Table of Contents
Table: Eclectic Table of Contents (Exposed)
Table: Clickable Image Gallery
Web Resources
- W3Schools table layout tutorial
http://www.w3schools.com/html/html_layout.asp (opens in a new window) - An example of table layout (view the source)
http://www.wowwebdesigns.com/ (opens in a new window)
Table Layout Exercise
Table layout exercise opens in new window.