Chapter 14: Using HTML Tables Effectively

In This Chapter

Gazing over the table landscape

Deciding to table or not to table

Tabling your HTML

Polishing your own custom tables

Evaluating some interesting table examples

First, Consider the Alternatives
HTML <table> Overview
HTML Table Markup
- The parts of a <table>
  - The table tag: <table> . . . </table>
  - The table row tag: <tr> . . . </tr>
  - The table data tag: <td> . . . </td>
  - The table header tag: <th> . . . </th>
  - The table caption tag: <caption> . . . </caption>
- Basic table attributes
  - align="[left or center or right]" [CI]
  - border="number" [CN]
  - cellpadding="number" [CN]
  - cellspacing="number" [CN]
  - summary="text" [CS]
  - width="number" or "%" [CN]
  - valign="TOP" or "MIDDLE" or "BOTTOM" [CI]
  - nowrap [CI]
  - colspan="number" [CN]
  - rowspan="number" [CN]
  - bgcolor="color" [CI]
Recent Additions to the Table Family
- The table body tag: <tbody> . . . </tbody>
- The table head tag: <thead> . . . </thead>
- The table foot tag: <tfoot> . . . </tfoot>
- The table colgroup tag: <colgroup> . . . </colgroup>
- The table col tag: <col>
Build Your Own Tables
- Laying out tabular data for easy display
- Multirow and multicolumn spans
- Mixing graphics and tables to add interest
- Tools automate tedious markup
Some Stunning Table Examples