Table - HTML

TABLE

TABLE - (table): The TABLE tag defines a table. Inside the TABLE tag, use the TR tag to define rows in the table, use the TH tag to define row or column headings, and use the TD tag to define table cells.

The TABLE tag can also contain a CAPTION tag, which specifies the caption for the table.

You can specify the width of the border surrounding the table and the default background color of the table. (Individual rows and cells in the table can have their own background color.) You can use the CELLSPACING attribute to specify the distance between cells in the table and the CELLPADDING attribute to specify the distance between the border and content of every cell. If you specify the width and height of the table, the browser will do its best to make the table fit the specified dimensions, but in some cases this may not be possible. For example, if the table contains cells that contain non-wrapping long lines, the table may not fit in a specified width.

Syntax

<TABLE

ALIGN="LEFT|RIGHT"

BGCOLOR="color"

BORDER="value"

CELLPADDING="value"

CELLSPACING="value"

HEIGHT="height"

WIDTH="width"

COLS="numOfCols"

HSPACE="horizMargin"

VSPACE="vertMargin"

> 

...

</TABLE>

ALIGN specifies the horizontal placement of the table.

· LEFT aligns the table on the left (the default). The content following the table flows to the right of the table.

· RIGHT aligns the table on the right. The content following the table flows to the left of the table.

· CENTER aligns the table in the center. Content does not flow on either side.

BGCOLOR="color"sets the color of the background for the table. This color can be overridden by a BGCOLOR tag in the TH, TR, or TD tags.

BORDER="value" indicates the thickness, in pixels, of the border to draw around the table. Give the value as an integer. A value of 0 means the table has no border. You can also supply the BORDER attribute without specifying a value for it to indicate that the table has a border of the default thickness.

CELLPADDING="value" determines the amount of space, in pixels, between the border of a cell and the contents of the cell. The default is 1.

CELLSPACING="value"determines the amount of space, in pixels, between individual cells in a table. The default is 2.

HEIGHT="height" specifies the height of the table. The default is the optimal height determined by the contents of each cell. The height value can be a number of pixels, given as an integer, or a percentage of the height of the page or parent element, given as an integer followed by the percent sign. The table is scaled to fit the specified height and width.

WIDTH="width" defines the width of the table. The default is the optimal width determined by the contents of each cell.

The width value can be a number of pixels, given as an integer, or a percentage of the width of the page or parent element, given as an integer followed by the percent sign. The table is scaled to fit the specified height and width.

COLS="numOfCols" indicates how many virtual columns of equal width fit in the width of the window. Each actual column in the table occupies a virtual column. You would typically set the COLS attribute to be equal to the number of columns in the table to indicate that all the columns in the table have the same width.

If the WIDTH attribute is supplied, the COLS attribute indicates how many virtual columns fit in the specified width. If the WIDTH attribute is not supplied, the COLS attribute indicates how many virtual columns fit in the current window or frame. Each column in the table occupies one of the virtual columns. Suppose that the WIDTH attribute is "80%" and the COLS attribute is 4.

In this case, each virtual column takes up 20% of the width of the window. Each actual column in the table occupies a virtual column, so it occupies 20% of the width of the window, so long as the table has from 1 to 4 columns inclusive. Note, however, that if the minimum width needed to display the contents of an actual column is greater than the width of a virtual column, then the width of the column is expanded to fit its contents.

If the table has more actual columns than the COLS value, then the columns in excess of the COLS value are displayed in the minimum width required to fit their contents, and the other columns divide the remaining space equally between them.

For example, suppose the table has 4 columns, the WIDTH attribute is "80%", and the COLS value is 3. What happens here is that the table takes up 80% of the width of the window. The fourth column uses the minimum width necessary to display the contents of the column. The other 3 columns divide the remaining width of the table equally between them.

HSPACE="horizMargin" specifies the distance between the left and right edges of the table and any surrounding content.

VSPACE="vertMargin" specifies the distance between the top and bottom edges of the table and any surrounding content.

Example 1. A Simple Table.

The following example creates a three-column, four-row table, with a yellow background. The caption "Tables are as easy as one, two, three" is displayed at the bottom of the table.

<TABLE BORDER CELLPADDING="8" CELLSPACING="4" BGCOLOR=yellow>

<TR><TH> English </TH><TH> Spanish </TH><TH> German </TH></TR>

<TR><TD> one </TD><TD> uno </TD><TD> ein </TD></TR> <TR><TD> two </TD><TD> dos </TD><TD> zwei </TD></TR> <TR><TD> three </TD><TD> tres </TD><TD> drei </TD></TR> <CAPTION ALIGN="BOTTOM"> <B>Table 1</B>: Tables are as easy as one, two, three

</CAPTION>

</TABLE>

Example 2: A More Complex Table.

The following example creates a four-column table. Each row has a different background color. The last row contains only two cells, which both span two rows, and the second cell spans three columns.

<TABLE CELLPADDING=3 CELLSPACING=6 BORDER=2>

<CAPTION ALIGN=TOP> <BIG><BIG>Furniture Mart's Top Selling Furniture </BIG></BIG>

</CAPTION>

<!-- heading row -->

<TR BGCOLOR=#CCCCFF> <TH>NAME</TH> <TH>SKU</TH> <TH>PRICE</TH> <TH>DESCRIPTION</TH> </TR>

<!-- end of heading row --> <!-- furniture rows -->

<TR BGCOLOR=#DDEEAA> <TH>Harriet Smythe Armchair</TH>

<TD>100584</TD><TD>$2150</TD><TD>description goes here</TD> <TR>

<TR B GCOLOR=#CCFFCC>

<TH>St. Michael Sofa</TH> <TD>100789</TD><TD>$5000</TD><TD>description goes here</TD> <TR>

<TR BGCOLOR=#BBDDFF> <TH>Variety of prints</TH>

<TD>-</TD><TD>$100 to $5000</TD><TD>description goes here</TD> <TR>

<!-- more furniture rows go here -->

<!-- last row has cells that span rows and columns -->

<TR BGCOLOR=CYAN>

<TH ALIGN=CENTER VALIGN=MIDDLE ROWSPAN=2> <FONT SIZE=+3>JULY SALE!!</FONT></TH>

<TD ROWSPAN=2 COLSPAN=3 ALIGN=CENTER> <FONT SIZE=+1>

Don't miss our annual July sale.

All these prices will be slashed by 50%!!!

But on Aug 1, they go back up, so don't be late!! </FONT>

</TD>

<TR>

</TABLE>

CAPTION - (table caption)

The CAPTION tag defines a caption for a table. Place the CAPTION tag within the TABLE tag but not inside the TD or the TR tags, which indicate table cells and table rows respectively. Navigator 1.1.

Syntax

<CAPTION ALIGN="BOTTOM"|"TOP">...</CAPTION> ALIGN specifies the placement of the caption within a table.

· BOTTOM places the caption at the bottom of the table.

· TOP places the caption at the top of the table. TOP is the default.

Used Within TABLE

Example See example 1. Simple Table.

TR - (table row) The TR tag specifies a table row. Use the TR tag inside a TABLE tag. The TR tag can contain TH tags, which indicate table headings, and TD tags, which indicate table cells.

Syntax

<TR

ALIGN="CENTER|LEFT|RIGHT"

VALIGN="BASELINE|BOTTOM|MIDDLE|TOP"

BGCOLOR="color"

> 

...

</TR>

ALIGN specifies the horizontal placement of the table:

· CENTER centers the table .

· LEFT aligns the table to the left (the default).

· RIGHT aligns the table to the right.

VALIGN specifies the vertical placement of the content in the cell: ·

BASELINE aligns the content with the cell's baseline.

· BOTTOM aligns the content with the cell's bottom.

· MIDDLE centers the content within the cell (the default).

· TOP aligns the content with the cell's top.

BGCOLOR="color" sets the default color of the background of the table row. Table cells defined with the TD tag inside the row can set their own background color.

Used within TABLE

Example See example 1. Simple Table.

TD - (table data)

The TD tag specifies text in a cell in a table. Use the TD tag inside a TR tag inside a TABLE tag.

You can set the background color of a cell by specifying its BGCOLOR attribute. For each cell, you can use the COLSPAN and ROWSPAN attributes to specify how many columns and rows the cell spans.

To specify the distance between cells, set the CELLSPACING attribute in the TABLE tag. To specify the distance between the borders of each cell and its contents, set the CELLPADDING attribute in the TABLE tag. All cells in a table have the same padding and spacing.

If a cell is empty, that is, the <TD> tag is immediately followed by the </TD> tag, the space occupied by the cell in the table is completely empty. That is, the cell has no content, no background color, and no border. However, suppose you have a four column table, but you have no data for the second column in one of the rows. You should still provide the second TD tag for that row, because if you leave it out the table will close the gap and move the third cell into the second column. The row will end up having three columns only, and it will not be aligned with the rest of the table

If you want an empty cell to look like other cells in the table, you can give it a period or a dash to indicate that the data is unknown, for example, <TD> -

</TD>.

Syntax

<TD

ALIGN="CENTER|LEFT|RIGHT"

VALIGN="BASELINE|BOTTOM|MIDDLE|TOP"

BGCOLOR="color"

COLSPAN="value"

ROWSPAN="value"

HEIGHT="pixelHeight"

WIDTH="pixelWidth"

NOWRAP="value"

> 

...

</TD>

ALIGN specifies the horizontal placement of the contents of the table cell:

· CENTER centers the content within the cell.

· LEFT aligns the content with the cell's left edge (the default).

· RIGHT aligns the content with the cell's right edge.

VALIGN specifies the vertical placement of the contents of the cell:

· BASELINE aligns the content with the cell's baseline.

· BOTTOM aligns the content with the cell's bottom.

· MIDDLE centers the content within the cell (the default).

· TOP aligns the content with the cell's top. BGCOLOR="color" sets the color of the background of the table cell.

COLSPAN="value" indicates the number of columns the cell spans. Give the number as an integer.

ROWSPAN="value" indicates the number of rows the cell spans. Give the value as an integer. HEIGHT="pixelHeight" specifies the suggested height of the table cell, in pixels. WIDTH="pixelWidth" specifies the suggested width of the table cell, in pixels.

NOWRAP specifies that the lines within a cell cannot be broken (that is, they do not wrap onto the next line).

Used Within TABLE and TR

Example See example 1. Simple Table.

TH - (table heading) The TH tag specifies a table cell whose contents are usually displayed in a bolder font than those of regular table cells. The intent of the TH tag is that you use it for column or row headings.

Syntax

<TH

ALIGN="CENTER|LEFT|RIGHT"

VALIGN="BASELINE|BOTTOM|MIDDLE|TOP"

BGCOLOR="color"

COLSPAN="value"

ROWSPAN="value"

HEIGHT="pixelHeight"

WIDTH="pixelWidth"

NOWRAP

> 

...

</TH>

ALIGN specifies the horizontal placement of the heading in the table cell:

· CENTER centers the content within the cell.

· LEFT aligns the content with the cell's left edge (the default).

· RIGHT aligns the content with the cell's right edge. VALIGN specifies the vertical placement of the contents of the cell:

· BASELINE aligns the content with the cell's baseline.

· BOTTOM aligns the content with the cell's bottom.

· MIDDLE centers the content within the cell (the default).

· TOP aligns the content with the cell's top.

BGCOLOR="color" sets the color of the background of the table heading. This color can be overridden by a BGCOLOR tag in the TD tags within the TH tag.

COLSPAN="value" indicates the number of columns the cell spans. ROWSPAN="value" indicates the number of rows the cell spans. HEIGHT="pixelHeight" specifies the suggested height of the table cell, in pixels.

WIDTH="pixelWidth"specifies the suggested width of the table cell, in pixels. NOWRAP specifies that the lines within a cell cannot be broken; that is, they do not wrap onto the next line.

Table's Attributes

border (example)

This specifies the width in pixels of the border around the table This is in addition to the border around each cell (the "cellspacing"). The default is zero

cellspacing (example)

This gives the space in pixels between adjacent cells. The default is usually about 3

cellpadding (example)

Specifies the space between the cell walls and contents The default is usually about 1

width

This specifies the width of the table In pixels (<table width="250">), or

As a percentage of the current browser window width (<table width="75%">)

rules (example) Specifies the horizontal/vertical divider lines. Must be used in conjunction with the "border" attribute!

frame (example) Specifies which outer borders are drawn.All four are drawn if this attribute is omitted.

Table Row (tr) Define each row in the table

Each row may contain table header (th) and table data (td) elements Attributes:

align: Horizontal alignment

Values: "left", "center", "right", "justify", "char" valign: Vertical alignment

Values: "top", "middle", "bottom"

Table Header (th) and Table Data (td)

Define a table cell Attributes

Colspan: Defines a heading or cell data entry that spans multiple columns Rrowspan:Defines a heading or cell data entry that spans multiple rows align: "left", "right", "center", "justify", "char"

e.g.:, the following aligns entries on a decimal point <td align="char" char=".">…</td>

valign:"top", "bottom", "middle"

width, height: Cell width and height in pixels only (no percentages officially allowed)