Tables

Tables have many variations. This tutorial will only attempt to show some of the possible variations. This is a simple table:

This is a demonstration of a table.
JanuaryFebruaryMarch
Lunch expenditure$40$50$60
Weight gain (in lbs.)51015

It has rows and columns with headers and cells that contain data and a caption at the top. The five basic elements of a table are the <table>, <caption>, <th> (heading), <tr> (row), and <td> (data) tags. There are also three grouping tags: <thead> (header rows), <tbody> (body rows), and <tfoot> (footer rows).

<table {border="pixels" width="percent%|pixels" align="left|right|center" cellpadding="pixels" cellspacing="pixels" summary="description_of_table" rules="none|all|cols|rows|groups"}> table rows </table>
All data in the table is enclosed within TABLE tags. The attributes are:
For example:
Default spacing and padding (caption left)
This is a TABLE
with 5 rows
BORDER="10"
WIDTH="25%"
ALIGN="left"
CELLSPACING="10" (caption right)
This is a TABLE
with 5 rows
BORDER="10"
WIDTH="25%"
ALIGN="LEFT"
CELLPADDING="10"
This is a TABLE
with 5 rows
BORDER="10"
WIDTH="25%"
ALIGN="CENTER"

<caption {align="top|bottom|left|right"}> caption text </caption>
Provides a caption which appears at either the top (default), bottom, left or right of the table (NOTE: left and right are only supported on Firefox).

This is a table with no border and a bottom caption.
JanuaryFebruaryMarch
Lunch expenditure$40$50$60
Weight gain (in lbs.)51015

The HTML code necessary to create this table is:

<table>
<caption align="bottom">This is a table with no border and a bottom caption.</caption>
<tr>
<th></th><th>January</th><th>February</th><th>March</th>
</tr>
<tr>
<th>Lunch expenditure</th><td>$40</td><td>$50</td><td>$60</td>
</tr>
<tr>
<th>Weight gain (in lbs.)</th><td>5</td><td>10</td><td>15</td>
</tr>
</table>


<tr {align="left|center|right" valign="top|middle|bottom" bgcolor="literal|#RGB" background="picture_url"}>data elements</tr>
Delineates a row of data elements. The <th> and <td> tags enclose the table's data elements and must be within the row tags.

<th {align="left|center|right" valign="top|middle|bottom" nowrap rowspan="#" colspan="#" width="percent%|pixels" bgcolor="literal|#RGB" background="picture_url"}>heading</th>
Table Heading. The data within the tag will be centered and, if text, will be boldface. Table Headings and Table Data have the same attributes.
<td {align="left|center|right" valign="top|middle|bottom" nowrap rowspan="#" colspan="#" width="percent%|pixels" bgcolor="literal|#RGB"}>data</td>
Table data. The data within the tags will appear in a cell. Default alignment of text data is left justified. The data in cells is not limited to text. You can include images and hyperlinks within table cells.

Align Example
align="left"align="center"align="right"
123123123

The HTML code necessary to create this table is:

<table border="1">
<tr>
<th>align=&quot;left&quot;</th>
<th>align=&quot;center&quot;</th>
<th>align=&quot;right&quot;</th>
</tr>
<tr>
<td align="left">123</td><td align="center">123</td><td align="right">123</td>
</tr>
</table>

Example of Row and Column Spanning in Tables
This cell spans four columns
This cell spans three rows,VALIGN=BOTTOM Simple CellSimple CellSimple Cell
Simple Cell This cell spans two rows and two columns
Simple Cell


The HTML code necessary to create this table is:

<table border align="center">
<caption align="bottom">Example of Row and Column spanning in Tables</caption>
<tr><th colspan=4>This cell spans four columns</th></tr>
<tr><td rowspan="3" valign="bottom">This cell spans three rows,VALIGN=BOTTOM</td>
<td>Simple Cell</td><td>Simple Cell</td><td>Simple Cell</td></tr>
<tr><td>Simple Cell</td>
<td rowspan="2" colspan="2">This cell spans two rows and two columns</td></tr>
<tr><td>Simple Cell</td></tr>
</table>

Formerly, table heading and data tags without data are used as place holders to correctly align the cells within the table. To create an open looking blank cell, add the <br /> tag or the non-breaking space (&nbsp;)as data. Currently, only IE and Firefox retain support for this feature.

Closed cells
Closed cells

 Open cells
Open cells

Grouping Rows

<thead {align="left|center|right" valign="top|middle|bottom"}>table_rows</thead>

<tbody {font-size: 16px; align="left|center|right" valign="top|middle|bottom"}>table_rows</tbody>

<tfoot {align="left|center|right" valign="top|middle|bottom"}>table_rows</tfoot>

<colgroup span="#">{Col_statements}</colgroup>

<col {align="left|center|right" valign="top|middle|bottom" width="%|pixels|ems}>

These tags are used to group rows and columns in a table. They can be used to set the attributes for the group using Style Sheets. In some browsers, the footer rows will always come at the end of the table wherever they occur, and in some browsers, the body rows will scroll if the height of the table is less than its full size while the headers and footers will remain stationary. Support for these tags is spotty.

Table with border=1 and rules=groups thead background cyan tbody align left
JanFebMar
AprMayJun
123
123
123
JulAugSep
OctNovDec

Table with border=1 and rules=groups thead background cyan tbody align left two columns grouped column 1 magenta
JanFebMar
AprMayJun
123
123
123
JulAugSep
OctNovDec


Next Lesson Next Page

HTML Home