DevGuru HTML Tag: table

TAG: table

<table> ... </table>
Available in versions: 3.2, 4.0
Browser compatibility: Explorer 4, 5 Netscape 4, 6

The <table> tag is used to designate that this element is a table. A table is a structural presentation of data or information using rows and columns.

The default is that the flow of any text and images is stopped in the HTML document, the table element is inserted starting on the next line, and after the end of the table element is reached, the flow of text and images resumes on the following line. However, the use of attributes and style sheet properties will allow you to embed the table element within the text and images.

The insides of the table are constructed using the tr, th, td, and the caption tags. There are also three new table tags that were released with version 4.0. They are tbody, tfoot, and thead.

The closing tag is mandatory.

Core Attributes

class    dir    id    lang    onclick    ondblclick    onkeydown    onkeypress    onkeyup    onmousedown    onmousemove    onmouseout    onmouseover    onmouseup    style    title

Attributes

align    deprecated 4.0
The align attribute is used to align a table in the center, along the left margin, or the right margin of the display window. This permits the table to be embedded within the flow of the text and images. This attribute was deprecated effective with version 4.0. However, it remains in wide use and is recognized by most browsers. You are now to use the style sheets float or text-align property.

bgcolor    deprecated 4.0
The bgcolor attribute is used to set the background color of a table. It can be either a named color (such as red) or a six character hexadecimal RGB color code (such as #e26fa9). This will be treated as the default color, since individual tr and td cells can also have their color set. This attribute was deprecated effective with version 4.0. However, it remains in wide use and is recognized by most browsers. You are now to use style sheets.

border
The border attribute informs the browser to draw lines around the entire table and all of the rows and cells. The lines are shaded to give an embossed appearance. You declare the thickness of the border line in pixels as an integer. The default is no border (zero pixels).

cellpadding
The cellpadding attribute sets the amount of white space to place between a cell wall and the contents of a cell. You declare the amount in pixels as an integer. The default is one pixel.

cellspacing
The cellspacing attribute sets the amount of white space to place between each adjacent cell and between each cell and the outer border of the table. You declare the amount in pixels as an integer. The default is two pixels.

frame
The frame attribute is used to determine which of the four lines that make up the outside border of a table will be visible. The permitted values are above, below, border, box, hsides, lhs, rhs, void, and vsides.

rules
The rules attribute is used to control whether the border lines will appear around cells inside the table. You can specify rows only to have borders between rows, cols for only between columns, and none for no internal borders.

summary
The summary attribute is used with non-visual media such as braille and speech to provide information about a table.

width
The width attribute is used to set the width of a table. It can be declared either as an integer number of pixels or as a percentage of the width of the display window.

This example demonstrates the basic table tags:

Code:
<table width="80%" border="10" cellpadding="3" cellspacing="5" align="center">
<caption>
<center><b>How To Code A Table</b></center>
<br>
Use the caption tag to name the table and to provide useful information about the contents
</caption>
<tr>
<th colspan="2">Use the <b>th</b> tag to create the header which will display in bold</th>
</tr>
<tr>
<td width="50%">The <b>tr</b> tag creates the row</td>
<td width="50%">The <b>td</b> tag creates individual cells for each row</td>
</tr>
<tr>
<td width="50%">You should always use the closing tags</td>
<td width="50%">You can use a variety of HTML tags inside the cell</td>
</tr>
<tr>
<td width="50%">The three new version 4.0 table tags are <b>tbody, tfoot,</b> and <b>thead</b></td>
<td width="50%">The <b>colspan</b> attribute allows you span more than one cell</td>
</tr>
</table>

Output:

**How To Code A Table**
Use the caption tag to name the table and to provide useful information about the contents
Use the th tag to create the header which will display in bold
The tr tag creates the row	The td tag creates individual cells for each row
You should always use the closing tags	You can use a variety of HTML tags inside the cell
The three new version 4.0 table tags are tbody, tfoot, and thead	Setting colspan allows you span more than one cell