blank.gif (43 bytes)

Church Of The
Swimming Elephant

Search:
2. A Brief Introduction to HTML Tables Connected: An Internet Encyclopedia
2. A Brief Introduction to HTML Tables

Up: Connected: An Internet Encyclopedia
Up: Requests For Comments
Up: RFC 1942
Prev: 1. Recent Changes
Next: 3. Design Rationale

2. A Brief Introduction to HTML Tables

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>


Next: 3. Design Rationale

Connected: An Internet Encyclopedia
2. A Brief Introduction to HTML Tables

Cotse.Net

Protect yourself from cyberstalkers, identity thieves, and those who would snoop on you.
Stop spam from invading your inbox without losing the mail you want. We give you more control over your e-mail than any other service.
Block popups, ads, and malicious scripts while you surf the net through our anonymous proxies.
Participate in Usenet, host your web files, easily send anonymous messages, and more, much more.
All private, all encrypted, all secure, all in an easy to use service, and all for only $5.95 a month!

Service Details

 
.
www.cotse.com
Have you gone to church today?
.
All pages ©1999, 2000, 2001, 2002, 2003 Church of the Swimming Elephant unless otherwise stated
Church of the Swimming Elephant©1999, 2000, 2001, 2002, 2003 Cotse.com.
Cotse.com is a wholly owned subsidiary of Packetderm, LLC.

Packetderm, LLC
210 Park Ave #308
Worcester, MA 01609