HTML 4 - User's Guide
The TABLE element
Consecutive rows can be enclosed in a table body.
A table can have a caption on top of it, and a head section on top of the table bodies and a foot section at the bottom.
Cells of the same rank in different rows make up a column. Cells in the same column all have the same width, so that they are vertically aligned.
1. SAMPLES
1.1 A simple table
<TABLE> <TFOOT> <TR><TD>* Gross Domestic Product <TBODY> <TR style="text-align:right"> <TH style="text-align:left">Country <TH>Area (sq km)<TH>Population<TH>GDP*<TH>per capita <TR style="text-align:right"> <TD style= style="text-align:left">Autralia <TD>7,686,850<TD>19.7 Million<TD>528 Billion<TD>$27,000 <TR style="text-align:right"> <TD style="text-align:left">Canada <TD>9,976,140<TD>32.2 Million<TD>928 Billion<TD>$29,400 <TR style="text-align:right"> <TD style="text-align:left">China <TD>9,596,960<TD>1,287.0 Million<TD>$5,700 Billion<TD>$4,400 <TR style="text-align:right"> <TD style="text-align:left">India <TD>3,287,590<TD>1,049.7 Million<TD>$2,660 Billion<TD>$2,540 <TR style="text-align:right"> <TD style="text-align:left">Japan <TD>377,835<TD>127.2 Million<TD>$3,550 Billion<TD>$28,000 <TR style="text-align:right"> <TD style="text-align:left">Russia <TD>16,995,800<TD>144.5 Million<TD>$1,350 Billion<TD>$9,300 <TR style="text-align:right"> <TD style="text-align:left">United States <TD>9,629,091<TD>290,3 Million<TD>$10,400 Billion<TD>$37,600 </TBODY> </TABLE>To display the page, please click here.
The elements needed to make up the table stand out in blue. Attributes that have been added for presentation are in purple.
| Rows and cells A table row is defined by a <TR> element. Cells in a row are defined by <TD> elements contained in the <TR> element of the row. You can see that the ending tag </TR> can be omitted, as a row terminates where the next row starts or the table ends. The </TD> ending tags are also omitted (all this is fine with HTML, but if sometimes you wish to convert to XML, there can be some problems) The contents of the <TD> elements constitute the information displayed in the cells. |
| Table body The table in the above example has one table body defined by the <TBODY> element. The row definition elements, <TR>, are enclosed in the contents of the <TBODY> element. |
| Foot section The table has a foot section defined by the <TFOOT> element. Although the foot row is to appear at the bottom of the table, the <TFOOT> element comes ahead of the table body element <TBODY>. The </TFOOT> tag is also omitted, as is allowable. |
| Attributes In its simplest form, a table does not require attributes. But when you wish to have some presentation, some attributes may be needed. The style="text-align:right" attribute/a> in the <TR> tag causes information of all cells in the row to be aligned to the right, unless otherwise stated. The country names in the first column seem to be nicer when aligned to the left. So the style="text-align:left" attribute present in all the first <TD> element in each row justifies the text in such an element to the left (a better way to achieve this is shown in 1.6 below - but it does not always work). |
1.2 Caption, header and footer
<HEAD>
<STYLE>sup {font-size: 70%;}</STYLE>
</HEAD>
<BODY>
<TABLE>
<CAPTION style="background: cyan; color: red; font-weight: bold">
BOOK CATALOG
</CAPTION>
<THEAD style="background: #FFCCCC;">
<TR><TD colspan="5">Our library has 3 sections,
the English section, the French section and the Italian section
<TR><TH> <TH>Author<TH><font color="blue">Title</font><TH>Publisher<TH>Year
</THEAD>
<TFOOT>
<TR><TD>
<TR><TD colspan="5" style="font-size: 90%;">
1. Jonathan Swift - 1667-1745<br>
2. Jane Austen - 1775-1817<br>
3. Lewis Carroll (Charles Ludwige Dodgson) - 1832-1898<br>
4. Mark Twain (Samuel L. Clemens - 1835-1910) 1863-<br>
5. Henry James - 1843-1916<br>
6. Jean de La Fontaine - 1621-1695<br>
7. Stendhal (Henri Beyle) - 1783-1842<br>
8. Alphonse Daudet - 1840-1897<br>
9. Marcel Proust - 1877-1921<br>
10. André Gide - 1869-1951<br>
11. Dante (Alighieri) - 1263-1321<br>
12. Dino Buzzati - 1906-1972<br>
13. Aberto Moravia - 1907-1990<br>
14. Umberto Ecco</font>
</TFOOT>
<TBODY style="background: #DDFFDD">
<TR><TD colspan="5"><font color="blue"><b>The English section</b></font>
<TR><TD>1.<TD><b>Jonathan Swift</b><sup>1</sup>
<TD><font color="blue">Gulliver's Travels</font>
<TD><i>Dover Publications</i><TD>1996
<TR><TD>2. <TD><b>Jane Austen</b><sup>2</sup>
<TD><font color="blue">Pride and Prejudice</font>
<TD><i>Penguin Book</i><TD>1994
<TR><TD>3. <TD><b>Jane Austen</b><sup>2</sup>
<TD><font color="blue">Northanger Abbey</font>
<TD><i>Penguin Book</i><TD>1995
<TR><TD>4. <TD><b>Lewis Carroll</b><sup>3</sup>
<TD><font color="blue">Alice in wonderland & Through the looking glass</font>
<TD><i>J.M Dent & Sons</i><TD>1966
<TR><TD>5. <TD><b>Mark Twain</b><sup>4</sup>
<TD><font color="blue">Adventures of Huckleberry Finn</font>
<TD><i>Dover Publications</i><TD>1994
<TR><TD>6. <TD><b>Henry James</b><sup>5</sup>
<TD><font color="blue">The Portait of a Lady</font>
<TD><i>Penguin Book</i><TD>1997
<TBODY style="background: #FFFFCC">
<TR><TD colspan="5"><font color="blue"><b>The French section</font></b>
<TR><TD>7. <TD><b>La Fontaine</b><sup>6</sup>
<TD><font color="blue">Fables</font>
<TD><i>Michel de l'Ormeraie</i><TD>1972
<TR><TD>8. <TD><b>Stendhal</b><sup>7</sup>
<TD><font color="blue">La Chartreuse de Parme</font>
<TD><i>Le Livre de Poche</i><TD>1983
<TR><TD>9. <TD><b>Alphonse Daudet</b><sup>8</sup>
<TD><font color="blue">Tartarin de Tarascon</font>
<TD><i>Librio</i><TD>1997
<TR><TD>10. <TD><b>Marcel Proust</b><sup>9</sup>
<TD><font color="blue">Du côté de chez Swann</font>
<TD><i>Gallimard</i><TD>1988
<TR><TD>11.<TD><b>André Gide</b><sup>10</sup>
<TD><font color="blue">L'immoraliste</font>
<TD><i>Mercure de France</i><TD>1954
<TBODY style="background: #CCCCFF">
<TR><TD colspan="5"><font color="blue">
<b>The Italian section</font></b>
<TR><TD>12.<TD><b>Dante</b><sup>11</sup>
<TD><font color="blue">La Commedia</font>
<TD><i>Jean de Bonnot</i><TD>1971
<TR><TD>13.<TD><b>Dino Buzzati</b><sup>12</sup>
<TD><font color="blue">Un amore</font>
<TD><i>Oscar Mondadori</i><TD>1973
<TR><TD>14.<TD><b>Alberto Moravia</b><sup>13</sup>
<TD><font color="blue">La Ciociara</font>
<TD><i>Bompiani</i><TD>1948
<TR><TD>15.<TD><b>Alberto Moravia</b><sup>13</sup>
<TD><font color="blue">La Romana</font>
<TD><i>Bompiani</i><TD>1947
<TR><TD>16.<TD><b>Umberto Ecco</b><sup>14</sup>
<TD><font color="blue">Il nome della rosa</font>
<TD><i>Bompiani</i><TD>1998
</TABLE>
To display the page, please click here
The code may appear to be lengthy. But it is repetitive. In the page there are 6 sections:
| - | The caption, defined by the CAPTION element |
| - | The head section, defined by the THEAD element |
| - | The foot section, defined by the TFOOT element |
| - | Three table-body sections, defined by the TBODY elements. |
| The caption The contents of the CAPTION element form the caption displayed on top of the table: 'BOOK CATALOG'. It is automatically centered. The CAPTION element is assigned properties through the style attibute:
| ||||||
| The head section The head section contains 2 rows:
| ||||||
| The foot section The foot section is to be displayed after the table body sections. However, in the source code, it must come before them. This section contains 2 table rows, defined by 2 <TR> elements: - the first row is empty (to create a blank line) - the second row contains the biographical notes on the authors This row contains but one cell defined by the <TD> element. However, information in the cell is displayed on multiple lines, by the use of the <br> tag. The <TD> tag contains a style attribute that set the font size of the text within the TD element to 90% of the normal size. The tokens represent one space each. This is to align the one-digit figures with those with 2 digits. | ||||||
| The table body sections The table body sections are defined by the <TBODY> elements. Each table body can have its own properties. Here they have different background colors through the background properties defined by the style attributes set in the TBODY tags. Note that each column has the same width across all of the table bodies. | ||||||
| The superscripts The author names in the table are followed by a superscript number that refers to a foot note of the foot section. A number is placed in a superscript position by being placed in the contents of the <sup> element. To have the superscripts in a size smaller than normal, the sup elements are assigned a font-size property that set them to 70% of the normal size. This is done in the <STYLE> element you can see at the beginning of the HTML page. | ||||||
| Column spanning Ordinarily, the longest text in a column sets the column width for all of the rows. For a text length to be accommodated by a number of columns you declare this number using the colspan attribute. This is done in the first row of the THEAD element and of each of the TBODY elements. In the THEAD element, the spanning includes only 4 columns. As the 5th column is empty, the color property does not extend to it, as you can see. In the TBODY elements however, the spanning includes 5 columns so that the color property extends to the 5th column. |
1.3 Column and row spanning
The following page shows examples of how to use row and column spanning.
<TABLE>
<CAPTION style="background:silver; color:red; font-size:bold">
ROW AND COLUMN SPANNING
</CAPTION>
<TR><TD style="background:red; color:white;">1.1
<TD style="background:red; color:white;">1.2
<TD style="background:red; color:white;">1.3
<TD style="background:red; color:white;">1.4.
<TD style="background:red; color:white;">1.5
<TR><TD style="background:yellow; color:blue;">2.1
<TD style="background:#FFCC00; color:blue;" colspan="2">2.2 - 2.3
<TD style="background:yellow; color:blue;">2.4.
<TD style="background:yellow; color:blue;">2.5
<TR><TD style="background:blue; color:white;">3.1
<TD style="background:blue; color:white;">3.2
<TD style="background:blue; color:white;" rowspan="2">3.3
<TD style="background:blue; color:white;">3.4.
<TD style="background:blue; color:white;">3.5
<TR><TD style="background:lime; color:black;">4.1
<TD style="background:lime; color:black;">4.2
<TD style="background:lime; color:black;">4.4.
<TD style="background:lime; color:black;">4.5
<TR><TD style="background:cyan; color:black;">5.1
<TD style="background:cyan; color:black;" colspan="3" rowspan="3">
5.2 - 5.3 - 5.4<br>
6.2 - 6.3 - 6.4<br>
7.2 - 7.3 - 7.4<br>
<TD style="background:cyan; color:black;">5.5
<TR><TD style="background:green; color:white;">6.1
<TD style="background:green; color:white;">6.5
<TR><TD style="background:#CC00CC; color:black;">7.1
<TD style="background:#CC00CC; color:black;">7.5
</TABLE>
Please click here to show the page.
The <TD> element for the cell in the 2nd row and 2nd column has the attribute colspan="2". This cell spans columns 2 and 3. The next <TD> element defines the cell in column 4.
The <TD> element for the cell in the 3rd row and 3rd column has the attribute rowspan="2". This cell spans rows 3 and 4, in column 3. On row 4, you must discount this column. After the cell in column 2, the next <TD> element defines the cell in column 4
The <TD> element for the cell in the 5th row and 2nd column has the attributes colspan="3" rowspan="3". This cell spans columns 2, 3 and 4, and rows 5, 6 and 7. Coumns 2, 3 and 4 must be discounted in rows 6 and 7.
1.4 Columns
Columns are not to be defined in a table. A cell pertains ipso facto to a column by being in a certain rank on its row. A column may be designated and assigned attributes which apply to all the cells pertaining to it.This the table from Sample 1, to which we give column properties.
<TABLE> <COL style="background: cyan;"> <COL span="3"> <!-- place holder --> <COL style="background: yellow;"> <TFOOT> <TR><TD style="background: none">* Gross Domestic Product <TBODY> <TR style="text-align:right"> <TH style="text-align:left">Country<TH>Area (sq km)<TH>Population<TH>GDP*<TH>per capita <TR style="text-align:right"> <TD style="text-align:left">Australia<TD>7,686,850<TD>19.7 Million<TD>528 Billion<TD>$27,000 <TR style="text-align:right"> <TD style="text-align:left">Canada<TD>9,976,140<TD>32.2 Million<TD>928 Billion<TD>$29,400 <TR style="text-align:right"> <TD style="text-align:left">China<TD>9,596,960<TD>1,287.0 Million<TD>$5,700 Billion<TD>$4,400 <TR style="text-align:right"> <TD style="text-align:left">India<TD>3,287,590<TD>1,049.7 Million<TD>$2,660 Billion<TD>$2,540 <TR style="text-align:right"> <TD style="text-align:left">Japan<TD>377,835<TD>127.2 Million<TD>$3,550 Billion<TD>$28,000 <TR style="text-align:right"> <TD style="text-align:left">Russia<TD>16,995,800<TD>144.5 Million<TD>$1,350 Billion<TD>$9,300 <TR style="text-align:right"> <TD style="text-align:left">United States<TD>9,629,091<TD>290,3 Million<TD>$10,400 Billion<TD>$37,600 </TBODY> </TABLE>Please click here to see the resulting page.
The COL elements are placed at the beginning of the TABLE contents:
| - | the first COL element is associated with the first column; its style attribute assigns a background property with the value cyan to this column; so the column will be displayed with a cyan back ground. The cell in the foot element does not have this background because its has a style="background:none;" attribute to override this assignment. |
| - | next come a COL element with the span="3" attribute, and nothing else; this is a place holder for the three columns 2, 3 and 4. |
| - | finally come the COL element associated with column 5; its style attribute assigns a yellow background to the column. |
1.5 Column groups
Columns that share properties can be grouped together,using the COLGROUP element.<TABLE rules="groups"> <COL style="background: cyan;"> <COLGROUP span="2" style="color: blue;"> <COLGROUP style="background:lime;" rules='all'> <COL style="color: red;"> <COL style="color: purple;"> </COLGROUP> <TFOOT> <TR><TD style="background: none">* Gross Domestic Product <TBODY> <TR style="text-align:right"> <TH style="text-align:left">Country<TH>Area (sq km)<TH>Population<TH>GDP*<TH>per capita <TR style="text-align:right"> <TD style="text-align:left">Australia<TD>7,686,850<TD>19.7 Million<TD>528 Billion<TD>$27,000 <TR style="text-align:right"> <TD style="text-align:left">Canada<TD>9,976,140<TD>32.2 Million<TD>928 Billion<TD>$29,400 <TR style="text-align:right"> <TD style="text-align:left">China<TD>9,596,960<TD>1,287.0 Million<TD>$5,700 Billion<TD>$4,400 <TR style="text-align:right"> <TD style="text-align:left">India<TD>3,287,590<TD>1,049.7 Million<TD>$2,660 Billion<TD>$2,540 <TR style="text-align:right"> <TD style="text-align:left">Japan<TD>377,835<TD>127.2 Million<TD>$3,550 Billion<TD>$28,000 <TR style="text-align:right"> <TD style="text-align:left">Russia<TD>16,995,800<TD>144.5 Million<TD>$1,350 Billion<TD>$9,300 <TR style="text-align:right"> <TD style="text-align:left">United States<TD>9,629,091<TD>290,3 Million<TD>$10,400 Billion<TD>$37,600 </TBODY> </TABLE>Please click here to see the resulting page.
This page is taken up from the preceding example. The first column is defined by the same COL element as before. Then come 2 column groups:
1.6 Embedded images and tables
<TABLE>
<COL style="background:#DDEEFF">
<COL style="background:#BBEEDD">
<CAPTION><b><font size="+2" color="blue">THE ECONOMY</font></b></CAPTION>
<TFOOT style="background:white">
<TR><TD colspan="2"><i>The information and images used in this page were donwloaded from
the US government address<br>http://www.cia.gov/download.html</i>
</TFOOT>
<TBODY>
<TR valign="top">
<TD><IMG src="../Images/flag-usa.gif" alt="The USA flag"
width="100" style="float:left">
<b><font color="black" size="+1">The United States</font></b><br>
The US has the largest and most technologically powerful economy in the world, with a per
capita GDP of $37,600. In this market-oriented economy, private individuals and business
firms make most of the decisions, and the federal and state governments buy needed goods
and services predominantly in the private marketplace. US business firms enjoy considerably
greater flexibility than their counterparts in Western Europe and Japan in decisions to
xpand capital plant, lay off surplus workers, and develop new products. At the same time,
they face higher barriers to entry in their rivals' home markets than the barriers to entry
of foreign firms in US markets. US firms are at or near the forefront in technological
advances, especially in computers and in medical, aerospace, and military equipment, although
their advantage has narrowed since the end of World War II.
<TD><b><font color="red">International trade</font></b>
<p>
Export: $687 billion (2002 estimate)<br>
Import: $1,165 billion (2002 estimate)<br>
<b>Trade partners</b>
<table rules="all">
<col style="font-weight:bold; color:blue; background:cyan;">
<col style="text-align: right; width:100; background:#CCFFCC;">
<col style="text-align: right; width:100; background:#FFFFCC;">
<tr><td><td>Export<td>Import
<tr><td>Canada<td>22.4%<td>19.0%
<tr><td>Mexico<td>13.9%<td>11.5%
<tr><td>Japan<td>7.9%<td>11.1%
<tr><td>UK<td>5.6%<td>-
<tr><td>Germany<td>4.1%<td>5.2%
<tr><td>China<td>-<td>8.9%
</table>
<TR valign="top">
<TD><IMG src="../Images/flag-china.gif" alt="China flag"
width="100" style="float:left">
<b><font color="red" size="+1">China</font></b><br>
In late 1978 the Chinese leadership began moving the economy from a sluggish, Soviet-style
centrally planned economy to a more market-oriented system. Whereas the system operates within
a political framework of strict Communist control, the economic influence of non-state
organizations and individual citizens has been steadily increasing. The authorities switched
to a system of household and village responsibility in agriculture in place of the old
collectivization, increased the authority of local officials and plant managers in industry,
permitted a wide variety of small-scale enterprises in services and light manufacturing, and
opened the economy to increased foreign trade and investment. The result has been a quadrupling
of GDP since 1978. In 2002, with its 1.3 billion people but a GDP of just $4,400 per capita,
China stood as the second-largest economy in the world after the US (measured on a purchasing
power parity basis). Agriculture and industry have posted major gains, especially in coastal
areas near Hong Kong and opposite Taiwan, where foreign investment has helped spur output of
both domestic and export goods.
<TD><b><font color="red">International trade</font></b>
<p>
Export: $325.6 billion (2002 estimate)<br>
Import: $295.3 billion (2002 estimate)<br>
<b>Trade partners</b>
<table rules="all">
<col style="font-weight:bold; color:blue; background:cyan;">
<col style="text-align: right; width:60; background:#CCFFCC;">
<col style="text-align: right; width:60; background:#FFFFCC;">
<tr><td><td>Export<td>Import
<tr><td>USA<td>22.4%<td>9.2%
<tr><td>Hong Kong<td>18.0%<td>3.6%
<tr><td>Japan<td>14.9%<td>18.1%
<tr><td>South Korea<td>4.8%<td>9.7%
<tr><td>Germany<td>3.5%<td>5.6%
<tr><td>Netherlands<td>2.8%<td>-
<tr><td>UK<td>2.5%<td>-
<tr><td>Singapore<td>2.1%<td>-
<tr><td>Taiwan<td>2.0%<td>12.9%
</table>
<TR valign="top">
<TD><IMG src="../Images/flag-japan.gif" alt="JAPAN flag"
width="100" style="float:left">
<b><font color="red" size="+1">Japan</font></b><br>
Government-industry cooperation, a strong work ethic, mastery of high technology, and a
comparatively small defense allocation (1% of GDP) helped Japan advance with extraordinary rapidity to the rank of second-most-technologically-powerful economy in the world after the
US and third-largest economy in the world after the US and China. One notable characteristic
of the economy is the working together of manufacturers, suppliers, and distributors in
closely-knit groups called keiretsu. A second basic feature has been the guarantee of
lifetime employment for a substantial portion of the urban labor force. Both features are now
eroding. Industry, the most important sector of the economy, is heavily dependent on imported
raw materials and fuels. The much smaller agricultural sector is highly subsidized and
protected, with crop yields among the highest in the world. Usually self-sufficient in rice, Japan must import about 50% of its requirements of other grain and fodder crops. Japan
maintains one of the world's largest fishing fleets and accounts for nearly 15% of the global
catch. Robotics constitutes a key long-term economic strength with Japan possessing 410,000 of the world's 720,000 "working robots." Internal conflict over the proper way to reform the
ailing banking system continue.
<TD><b><font color="red">International trade</font></b>
<p>
Export: $383.5 billion (2002 estimate)<br>
Import: $393.1 billion (2002 estimate)<br>
<b>Trade partners</b>
<table rules="all">
<col style="font-weight:bold; color:blue; background:cyan;">
<col style="text-align: right; width:60; background:#CCFFCC;">
<col style="text-align: right; width:60; background:#FFFFCC;">
<tr><td><td>Export<td>Import
<tr><td>USA<td>28.5%<td>18.3%
<tr><td>China<td>9.6%<td>17.1%
<tr><td>South Korea<td>4.6%<td>11.1%
<tr><td>Taiwan<td>6.3%<td>4.0%
<tr><td>Hong Kong<td>6.1%<td>5.2%
<tr><td>Indonesia<td>-<td>4.2%
<tr><td>Australia<td>-<td>4.2%
</table>
</TBODY>
</TABLE>
To display the page, please click here
| Table structure outline The structure of this realistically lengthy table is as follows:
<TABLE>
<COL grand table first column properties>
<COL grand table second column properties>
<CAPTION>caption text</CAPTION>
<TFOOT foot section properties>
<TR><TD colspan="2">foot section text
</TFOOT>
<TBODY>
<TR row properties>
<TD><IMG embedded image>
first column text
<TD>
second column text
<table embedded table properties>
<col embedded table 1st column properties>
<col embedded table 2nd column properties>
<col embedded table 3rd column properties>
<tr> embedded table 1st row cells
<tr> embedded table 2nd row cells
etc...
</table>
<TR row properties>
<TD><IMG embedded image>
etc...
</TBODY>
<TABLE>
The structure shows a grand table that contains embedded tables. As HTML processes upper and lower case indifferently, for visual recognition, elements of the grand table are in upper case, those of the embedded are in lower case. The grand table has 3 rows (that hold the information on 3 countries, the US, China and Japan), and 2 columns. | ||||
| Grand table column properties The 2 <COL> elements at the begining of the TABLE define the background color of the columns in the grand table, by means of the style attribute. | ||||
| The foot section The foot section defined by the TFOOT element contains an acknowledgement statement, as to the origin of the information displayed in the table. | ||||
| Table rows The grand table has one table body section, contains 3 rows, defined by a <TR> each. The valing="top" attribute aligns information on the top of the row. This is clearly seen only in the second column of the third row which has a wide gap at the bottom (under the statistics table). | ||||
| Grand table columns The grand table has 2 columns, each defined by a <TD> element:
| ||||
| The embedded tables The embedded tables have 3 columns. The table element contains a rule attribute that causes all the cells to be bordered with a rule. The col elements in the table definition assign background colors to the columns. |
2. USAGE
2.1 Plain table
2.1.1 Table structure
All the ending tags: </CAPTION>, </THEAD>, <TFOOT> and </TBODY> are optional. If there is only one table body section, the <TBODY> element may be omitted.
The rows in the head, table body and foot sections are defined by the | ||||||||||||||||||||||||
A cell is a rectangular space where the contents of the defining element, TH or TD, are rendered. Cell sizes conform to these rules:- all cells on the same row have the same height - all cells on the same column have the same width
Cells defined by the
The | ||||||||||||||||||||||||
| 2.1.2 Cellspacing, border and rules Space can separate adjoining cells in the table. The thickness of this space can be controlled by the cellspacing attribute of the <TABLE> element:
The table and its cells can be given a border using the border attribute in the <TABLE> tag:
| ||||||||||||||||||||||||
| 2.1.3 Style The style attribute can be used to define, among others, the bordering, background and character presentation properties of the table as a whole or of its components:
|
2.2 Table cells as a display units
Table cells, as defined by the <TH> and <TD> tags are rectangular display spaces where you can put almost anything you can in an HTML page:| - | <BR> and <P> elements to control line breaks and paragraph limits |
| - | <TABLE> elements to intert embedded tables |
| - | <IMG> elements to insert images |
| - | <OBJECT> elements to insert images, applets, and other objects |
| - | etc... |
2.3 Use for alignment and line control
As table cells in a column are vertically aligned, tables can be used for alignment purpose.| 2.2.1 Use in forms Tables can be used in forms to align the controls. | ||||||
| 2.2.2 Indent control Tables can also be used for indent control, instead of the space references. For example: <TABLE> <TR><TD colspan="2">This is the general text that starts at margin 0 <TR><TD width="50"><TD>This whole paragraph is indented. The text-indent CSS property indents only the first line of a block. Using a table cell you can shift the whole of a paragaph to the left. Obviously, there are other means, but this is one that you can use. <TR><TD colspan="2">Resume margin 0 from here </TABLE>produces this result:
| ||||||
3. SYNTAX
3.0 Overview
The general format of a table description is:
<TABLE attributes>
<CAPTION attributes>
caption text
</CAPTION>
<THEAD attributes>
<TH attributes>cell contents
<TH attributes>cell contents
...
</THEAD>
<TFOOT attributes>
<TD attributes>cell contents
<TD attributes>cell contents
...
</TFOOT>
<TBODY attributes>
<TD attributes>cell contents
<TD attributes>cell contents
...
</TBODY>
...
<TBODY attributes>
<TD attributes>cell contents
<TD attributes>cell contents
...
</TBODY>
</TABLE>
<TH> elements belong rather to the THEAD section as noted here. But they can appear in TBODY or TFOOT sections. Also, <TD> elements can appear in the THEAD section.
The ending tags: </CAPTION>, </THEAD>, </TFOOT> and </BODY> are all optional.
The CAPTION, THEAD and TFOOT elements are optional. If there is only one table body, the <TBODY> tag can be omitted.
3.1 Attributes
3.1.1 Attributes common to all the elements in the hierarchy
These are the common attributes that apply to almost all of the HTML elements. They apply to the TABLE element and all the elements contained in it.3.1.2 The TABLE element
| summary | summary="text provides a summary of the table purpose and structure for a user agent rendering to non-visual media such as braille | |||||||||||||||||||||||||||||||||||||
| width | width="length" Defines the table width - the length can be expressed as: - a number of pixel - as in width="500" - a percentage of the page width, as in width="40%" | |||||||||||||||||||||||||||||||||||||
| border | border="number" Sets borders on the table and cells, with the thickness specified by the value of the attribute | |||||||||||||||||||||||||||||||||||||
| frame | frame="value" Specifies where cell framing lines are to be rendered. The possible values of the attribute are:
| |||||||||||||||||||||||||||||||||||||
| rules | rules="value" The possible attribute values are:
| |||||||||||||||||||||||||||||||||||||
| cellspacing | cellspacing="number" Sets the pixel thickness of the space separating the table cells. This value defaults to "1" | |||||||||||||||||||||||||||||||||||||
| cellpadding | cellpadding="number" Sets the padding thickness around the table cells (the padding is the space comprised between the cell contents and the border of the cell, whereas spacing is on the outside of the border) | |||||||||||||||||||||||||||||||||||||
| dir | dir="RTL|LTR" Sets the direction of the column placement in the table. The values are: - LTR: columns are set from left to right - this is the default - RTL: columns are set from right to left |
3.1.3 The CAPTION element
The CAPTION element has all the common attributes, plus the following:3.1.4 Group defining elements
The group defining elements:3.1.5 The row defining element
The row defining element <TR> has the common attributes and cell alignment attributes.3.1.6 Column defining elements
The column defining elements:| span | span="number" Specifies the number of columns encompassed by the COL or COLGROUP element | |||||||||
| width | width="length" Specifies the total width of the columns encompassed by the COL or COLGROUP element - the attribute value can be expressed as:
|
3.1.7 Cell defining elements (TH and TD)
Row and columns spanning attributes| rowspan | rowspan="number" Specifies the number of rows allocated to the contents of the element, starting from the current row |
| colspan | colspan="number" Specifies the number of columns allocated to the contents of the element, starting from the current column |
| valign | valign="value" Vertically aligns the data lines in the cell - the possible attribute values are:
| ||||||||||||
| align | align="value" horizontally aligns data on each line - the possible values are:
| ||||||||||||
| char | char="character" used with the align="char" option - specifies the character on which data is to be aligned.
|
Speech rendering attributes
| abbr | abbr="text" Provides an abbreviated form of the cell content |
| headers | headers="idrefs" Specifies the list of IDs of TH cells which provide header information for the current cell. |
| axis | axis="cdata" Specifies a category name into which the cell is placed |
| scope | scope="" Used in a header (TH) cell - specifies the scope of the current cell contents - the possible values are: - row - the cell provides header information to the rest of the row - col - the cell provides header information to the rest of the column - rowgroup - the cell provides header information to the rest of the row group - colgroup - the cell provides header information to the rest of the column group |
3.2 Element contents
The contents of aTABLE element is composed of the following elements, in the order as shown:CAPTION element -- optionalCOLGROUP and COL elements in any number (from 0 on)THEAD element -- optionalTFOOT element -- optionalTBODY elements - the <TBODY> tag is optional, but there must be at least one TBODY elementThe THEAD, TFOOT and TBODY elements contain, in any order and number TH and TD elements.
The TH and TD, can contain text and almost any HTML elements that can be found in a page.