2. A Brief Introduction to HTML Tables

Tables start with an optional caption followed by one or more rows. Each row is formed by one or more cells, which are differentiated into header and data cells. Cells can be merged across rows and columns, and include attributes assisting rendering to speech and braille, or for exporting table data into databases. The model provides limited support for control over appearence, for example horizontal and vertical alignment of cell contents, border styles and cell margins. You can further affect this by grouping rows and columns together. Tables can contain a wide range of content, such as headers, lists, paragraphs, forms, figures, preformatted text and even nested tables.

Example

   <TABLE BORDER>
     <CAPTION>A test table with merged cells</CAPTION>
     <TR><TH ROWSPAN=2><TH COLSPAN=2>Average
         <TH ROWSPAN=2>other<BR>category<TH>Misc
     <TR><TH>height<TH>weight
     <TR><TH ALIGN=LEFT>males<TD>1.9<TD>0.003
     <TR><TH ALIGN=LEFT ROWSPAN=2>females<TD>1.7<TD>0.002
   </TABLE>

On a dumb terminal, this would be rendered something like:

                 A test table with merged cells
       /--------------------------------------------------\
       |          |      Average      |  other   |  Misc  |
       |          |-------------------| category |--------|
       |          |  height |  weight |          |        |
       |-----------------------------------------|--------|
       | males    | 1.9     | 0.003   |          |        |
       |-----------------------------------------|--------|
       | females  | 1.7     | 0.002   |          |        |
       \--------------------------------------------------/

Next, a richer example with grouped rows and columns (adapted from "Developing International Software" by Nadine Kano). First here is what the table looks like on paper:

                     CODE-PAGE SUPPORT IN MICROSOFT WINDOWS
========================================================================
Code-Page| Name                      |ACP OEMCP| Windows Windows Windows
    ID   |                           |         |  NT 3.1 NT 3.51    95
------------------------------------------------------------------------
   1200  |Unicode (BMP of ISO 10646) |         |     X       X       *
   1250  |Windows 3.1 East. Europe   |  X      |     X       X       X
   1251  |Windows 3.1 Cyrillic       |  X      |     X       X       X
   1252  |Windows 3.1 US (ANSI)      |  X      |     X       X       X
   1253  |Windows 3.1 Greek          |  X      |     X       X       X
   1254  |Windows 3.1 Turkish        |  X      |     X       X       X
   1255  |Hebrew                     |  X      |                     X
   1256  |Arabic                     |  X      |                     X
   1257  |Baltic                     |  X      |                     X
   1361  |Korean (Johab)             |  X      |             **      X
------------------------------------------------------------------------
    437  |MS-DOS United States       |     X   |     X       X       X
    708  |Arabic (ASMO 708)          |     X   |                     X
    709  |Arabic (ASMO 449+, BCON V4)|     X   |                     X
    710  |Arabic (Transparent Arabic)|     X   |                     X
    720  |Arabic (Transparent ASMO)  |     X   |                     X
========================================================================

The markup for this uses COLGROUP elements to group columns and to set default column alignment. TBODY elements are used to group rows. The FRAME and RULES attributes are used to select which borders to render.

   <table border=2 frame=hsides rules=groups>
   <caption>CODE-PAGE SUPPORT IN MICROSOFT WINDOWS</caption>
   <colgroup align=center>
   <colgroup align=left>
   <colgroup align=center span=2>
   <colgroup align=center span=3>
   <thead valign=top>
   <tr>
   <th>Code-Page<br>ID
   <th>Name
   <th>ACP
   <th>OEMCP
   <th>Windows<br>NT 3.1
   <th>Windows<br>NT 3.51
   <th>Windows<br>95
   <tbody>
   <tr><td>1200<td>Unicode (BMP of ISO 10646)<td><td><td>X<td>X<TD>*
   <tr><td>1250<td>Windows 3.1 Eastern European<td>X<td><td>X<td>X<TD>X
   <tr><td>1251<td>Windows 3.1 Cyrillic<td>X<td><td>X<td>X<TD>X
   <tr><td>1252<td>Windows 3.1 US (ANSI)<td>X<td><td>X<td>X<TD>X
   <tr><td>1253<td>Windows 3.1 Greek<td>X<td><td>X<td>X<TD>X
   <tr><td>1254<td>Windows 3.1 Turkish<td>X<td><td>X<td>X<TD>X
   <tr><td>1255<td>Hebrew<td>X<td><td><td><td>X
   <tr><td>1256<td>Arabic<td>X<td><td><td><td>X
   <tr><td>1257<td>Baltic<td>X<td><td><td><td>X
   <tr><td>1361<td>Korean (Johab)<td>X<td><td><td>**<td>X
   <tbody>
   <tr><td>437<td>MS-DOS United States<td><td>X<td>X<td>X<TD>X
   <tr><td>708<td>Arabic (ASMO 708)<td><td>X<td><td><td>X
   <tr><td>709<td>Arabic (ASMO 449+, BCON V4)<td><td>X<td><td><td>X
   <tr><td>710<td>Arabic (Transparent Arabic)<td><td>X<td><td><td>X
   <tr><td>720<td>Arabic (Transparent ASMO)<td><td>X<td><td><td>X
   </table>