Original version is available here
| Topic | |||||||||||||||||||||||||||||
| Overview |
The TABLE element defines a table for multi-dimensional 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>. | ||||||||||||||||||||||||||||
| Topic | |||||||||||||||||||||||||||||
| Overview |
The TABLE element defines a table for multi-dimensional 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"> <CAPTION>Mult-Column Formatting Example</CAPTION> <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> |
||||||||||||||||||||||||||||
| HTML 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>. | ||||||||||||||||||||||||||||
| Heading Tag |
<H1>, <H2>, ... , <H6> |
| Overview |
Headings are not always required but are useful to divide text into sections. They can be effectively used in electronic publishing to distinguish major sections and subsections of a document and provide a quick visual cue to content. There are six levels of headings, from the largest <h1> to the smallest <h6>. Whenever a heading tag is used, it automatically inserts a full carriage return (blank line) between the heading and whatever follows. Headings are automatically boldface, but never use a heading tag as a substitute for boldface within the text. Headings are used by several search engines to index documents, so some attention to wording is required. Unlike titles, they can be of any length and may use font style tags such as those found in the next chapter. Remember, however, that heading tags automatically insert a blank line between each line of text within the heading as well as after the heading. |
| Attribute | ALIGN="[ left | center | right | justify ] " (horizontal alignment) |
| Code Example | <H1 ALIGN="center">This is the H1 tag</H1> |
|
Description |
The ALIGN attribute suggests the horizontal alignment for the heading on visual browsers. Possible values are left, right, center, and justify. However, it is deprecated in favor of style sheets, which provide greater flexibility in suggesting alignment. |
| HTML Example |
<H1 ALIGN="center">This is the center H1 tag</H1> This is the center H1 tag<H2 ALIGN="left">This is the left H2 tag</H2> This is the left H2 tag<H3 ALIGN="right">This is the right H3 tag</H3> This is the right H3 tag<H4 ALIGN="justify">This is the justify H4 tag</H4>This is the right H3 tag |