Topic Note 4 HTML4 Revised

Contents

1. Table Overview

1.0 Overview
1.1 Code Example
1.2 Output Example

2. Multi-Column Formatting(Column Groups)

2.0 Overview
2.1 Tag
2.2 <COLGROUP> Attribute
2.3 <COL> Attribute
2.4 Code Example
2.5 Output Example
2.6 Description

Overview

The TABLE element defines a table for multidimensional data arranged in rows and columns. TABLE is commonly used as a layout device. Notice that current visual browsers will not display anything until the complete table has been downloaded, which can have very noticeable effects when an entire document is laid out within a TABLE.

The TABLE may contain a number of optional elements to provide a rich structure to the table. The optional CAPTION element gives a caption for the table and is followed by optional COL and COLGROUP elements that specify column widths and groupings. The THEAD, TFOOT, and TBODY elements then follow with groups of rows. The optional THEAD and TFOOT elements contain header and footer rows, respectively, while TBODY elements supply the table's main row groups. A row group contains TR elements for individual rows, and each TR contains TH or TD elements for header cells or data cells, respectively.

Basic table structure is the following.

Table

Code Example

<TABLE WIDTH="80%" BORDER="1" ALIGN="CENTER">
  <TR>
    <TD>cell 1</TD>
    <TD>cell 2</TD>
  </TR>
  <TR>
    <TD>cell 3</TD>
    <TD>cell 4</TD>
  </TR>
</TABLE>

Output Example

Overview

The COLGROUP element establishes a common group of columns in the table. The COLGROUP element provides a big advantage for controlling the format of different columns. Without this element, formatting of cells in a table is only accessible on a row-by-row basis using TR and TD. The most common application of COLGROUP is to control the horizontal alignment of text in on or more columns. When displayed by the browser, the boundary of each COLGROUP is delimited by a vertical line. If individual columns within a COLGROUP require different formatting attributes, then provide individual control through the COL element. Note that the COL element must appear immediately after COLGROUP element.

Tag

<COLGROUP>, <COL>

<COLGROUP> Attributes

SPAN="Number" (number of columns in group)
WIDTH="MultiLength" (width of each column)
ALIGN="[ LEFT| CENTER | RIGHT | JUSTIFY | CHAR]"
(horizontal alignment of cells in group)
CHAR="Character" (alignment character for cells)
CHAROFF="Length" (alignment character offset)
VALIGN="[ TOP| MIDDLE | BOTTOM | BASELINE]" (vertical alignment of cells in group)

Content: Zero or more COL elements
Contained in : TABLE

<COL> Attributes

Same as <COLGROUP> attributes

Content: Empty
Contained in : COLGROUP, TABLE

Code Example

<TABLE BORDER="1" ALIGN="CENTER">
  <COLGROUP>
    <COL SPAN="2" WIDTH="40%">
    <COL SPAN="1" WIDTH="20%">
  </COLGROUP>
  <TR>
    <TD>column 1</TD>
    <TD>column 2</TD>
    <TD>column 3</TD>
  </TR>
</TABLE>

Output Example

Description

This table has a total of three columns. The <COLGROUP> element identifies the columns as part of the same structural group (there may be many column groups in a table). Within the COLGROUP, the first <COL> element identifies two columns ( SPAN="2" ), each within a width of 40% of the table. The remaining <COL> has a width of 20%. If all the columns in the table were to be the same width, the width could have been specified in the <COLGROUP>.