Tables

HTML tables are small structures in themselves. The table is conceptually divided into cells organized into rows and columns.

Tables were originally intended for displaying tabular scientific data.

They have also been used extensively to control the layout of a document on the screen. In early versions of HTML, there was no other way to create a columnar layout.

However CSS now provides the preferred way to control layout.

Examples

• A page using tables
• another page using tables (combined with CSS layout)
• A basic left-to-right table with three rows and four columns
  

Table components

The basic table code consists of nested container tags.

• The outer container is <table>.
• The child grouping components include
  • caption <caption>
  • header <thead>
  • footer <tfoot>
  • body <tbody>
• The thead, tfoot, and tbody are subdivided into rows <tr> (table row)
• The rows are subdivided into cells <td> or <th>

Basic structure of a table definition.

    <table summary="This example demonstrates the components of a table.
                  This summary attribute is for use by non-visual browsers.">
        <caption>
            Table Caption [Optional]
        </caption>
      <thead>
          <tr>
            <th>
                  Table head cell column 1.  
                  The head will be displayed as the first row.
            </th>
            <th>
                  Table  head  cell column 2. 
            </th>
          </tr>
      </thead>
      <tfoot>
          <tr>
            <th>
                  Table  foot cell column 1 
                  The foot will be displayed as the last row.
            </th>
            <th>
                  Table  foot cell column 2 
            </th>
          </tr>
      </tfoot>
      <tbody>
         <tr>
           <td>
                 First body row 
           </td>
           <td>
                 Table body cell 
           </td>
         </tr>
         <tr>
           <td>
                 Second body row
           </td>
           <td>
                 Table body cell
           </td>
         <tr>
         <tr>
           <td>
                 Third body row
           </td>
           <td>
                 Table body cell
           </td>
         <tr>
      </tbody>
    </table>

Link to the example.

Merging table cells

Table cells can be merged to create uneven rows and columns..

To make individual cells wider or longer than the others, you will need to specify that they span more than one row or column of the table

Use the rowspan and colspan attributes of the td and th elements.

For example, a cell with a colspan value of 2 (<td colspan="2">) will be two columns wide

A cell with a rowspan value of 3 (<td rowspan="3">) will be three rows high.

This linked example of rowspan and colspan shows a table with different rowspan and colspan values.

Styling tables

The W3C CSS2.1 documentation states "Authors may specify the visual formatting of a table as a rectangular grid of cells. Rows and columns of cells may be organized into row groups and column groups. Rows, columns, row groups, column groups, and cells may have borders drawn around them (there are two border models in CSS 2.1). Authors may align data vertically or horizontally within a cell and align data in all cells of a row or column."

Some style properties that apply only to tables

property	values	description
border-collapse	collapse | separate | inherit	Specifies the colapsing borders or separated borders model. In the collapsing borders model, borders are centered on the grid lines between the cells. You can specify borders that surround all or part of a cell, row, row group, column, and column group.
border-spacing	One or two length values	In the separated borders model, the lengths specify the distance that separates adjoining cell borders. If one length is specified, it gives both the horizontal and vertical spacing. If two are specified, the first gives the horizontal spacing and the second the vertical spacing. Lengths may not be negative.
border-style	hidden	The border style 'hidden' applies only to tables using the collapsing borders model. It is the same as 'none', but also suppresses any other border. Most other border-style values, such as 'solid' or 'dotted' are unchanged.
caption-side	top | bottom	Positions the caption box above or below the table box.
empty-cells	show | hide	In the separated borders model, controls the rendering of borders and backgrounds around cells that have no visible content. Empty cells and cells with the 'visibility' property set to 'hidden' are considered to have no visible content. When this property has the value 'show', borders and backgrounds are drawn around/behind empty cells (like normal cells). A value of 'hide' means that no borders or backgrounds are drawn around/behind empty cells . Furthermore, if all the cells in a row have a value of 'hide' and have no visible content, the entire row behaves as if it had 'display: none'.
vertical-align	baseline | top | bottom | middle	baseline: The baseline of the cell is put at the same height as the baseline of the first of the rows it spans top: The top of the cell box is aligned with the top of the first row it spans. bottom: The bottom of the cell box is aligned with the bottom of the last row it spans. middle: The center of the cell is aligned with the center of the rows it spans. See illustration in the W3C documentation

This next example illustrates border collapse models.

Table columns

Table columns are designated by designating <col /> elements. The first tag corresponds to the first column, the second to the scond, etc. Designating columns is useful in order to create distinct styles, as shown in the linked example illustrating columns. Browser support for columns is uneven. at this time.