HTML Table

A table division in the HTML document can be defined by a <table> element. The table contents are enclosed by open tag <table> and end tag </table>.

The description of a table is defined by some nested child elements of the <table> element. According to the flow of document, a table is divided into rows and each row is then divided into data cells.

Table row <tr> and table data cell <td>

A nested <tr> element is used to define individual row. And nested <td> element inside the <tr> element is used to define a data cell to hold the content of table data in the individual cell.

Code Sample of simple table division:

HTML web page:

row 1 cell 1	row 1 cell 2	row 1 cell 3
row 2 cell 1	row 2 cell 2	row 2 cell 3
row 3 cell 1	row 3 cell 2	row 3 cell 3

Table caption <caption> and table header <th>

Some common features found in a table are the table caption and table header. A nested <caption> element is used to hold the contents of the table caption. In order to render the table correctly, it must be placed immediately after the table open tag <table>. A nested <th> element can also be used to define a table header cell and render the text contents distinctly, e.g. in bold format and center aligned.

Code Sample of captioned table with horizontal and vertical table header:

<table width="400" border="1">
<caption>table caption</caption>
<tr>
<th> row 1 cell 1 </th>
<th> row 1 cell 2 </th>
<th> row 1 cell 3 </th>
</tr>
<tr>
<th> row 2 cell 1 </th>
<td> row 2 cell 2 </td>
<td> row 2 cell 3 </td>
</tr>
<tr>
<th> row 3 cell 1 </th>
<td> row 3 cell 2 </td>
<td> row 3 cell 3 </td>
</tr>
</table>

HTML web page:

table caption
row 1 cell 1	row 1 cell 2	row 1 cell 3
row 2 cell 1	row 2 cell 2	row 2 cell 3
row 3 cell 1	row 3 cell 2	row 3 cell 3

Table column <col> and columne group <colgroup>

The <tr> element is used to render table row. For rendering table column, a <col> element can be used to render table column. Unlike the <tr> element, the <col> element can share its attributes throught the 'span' attribute. Besides there is also a <colgroup> element for grouping <col> elements.

Code Sample of captioned table with vertical table header:

<table border="1">
<caption>table caption</caption>
<colgroup span="2" width="60" style="background-color:green">
</colgroup>
<colgroup width="80">
<col span="2" style="background-color:orange">
<col style="background-color:green">
</colgroup>
<tr>
<th> r1c1 </th>
<td> r1c2 </td>
<td> r1c3 </td>
<td> r1c4 </td>
<td> r1c5 </td>
</tr>
<tr>
<th> r2c1 </th>
<td> r2c2 </td>
<td> r2c3 </td>
<td> r2c4 </td>
<td> r2c5 </td>
</tr>
<tr>
<th> r3c1 </th>
<td> r3c2 </td>
<td> r3c3 </td>
<td> r3c4 </td>
<td> r3c5 </td>
</tr>
</table>

HTML web page:

table caption
r1c1	r1c2	r1c3	r1c4	r1c5
r2c1	r2c2	r2c3	r2c4	r2c5
r3c1	r3c2	r3c3	r3c4	r3c5

Header row <thead>, footer row <tfoot>, and table body <tbody> group

Similar to column grounping, table contents can also rendered by row grouping. There are <thead> element to define the horizonal header division and <tfoot> element to define the horizonal footer division for holding the corresponding rows and data cells. Besides, a <tbody> element is also used to define a body content division by grouping continuous body content rows of same attributes.

In order to render the table correctly, the <thead> element should be placed after all <col> and <colgroup> element. Besides the <tfoot>element should be placed before the <tbody> <tbody> element before rending of any element content so that the <tfoot> element is independent from the length of a table.

Since there are only one header and one footer in a table, only one <thead> element and one <tfoot> element are allowed inside the <table> element. However, more than one <tbody> element can be defined in a table. The <tbody> element tag is required when there is the present of <tbody> element and <tfoot> element.

Code Sample of captioned table with <thead>, <tfoot>, and <tbody> divisions:

<table border=1>
<caption>table caption</caption>
<thead style="color:green">
<tr>
<th> head 1 cell 1 </th>
<th> head 1 cell 2 </th>
<th> head 1 cell 3 </th>
</tr>
<tr>
<th> head 2 cell 1 </th>
<th> head 2 cell 2 </th>
<th> head 2 cell 3 </th>
</tr>
</thead>
<tfoot style="color:red">
<tr>
<td> foot 1 cell 1 </td>
<td> foot 1 cell 2 </td>
<td> foot 1 cell 3 </td>
</tr>
<tr>
<td> foot 2 cell 1 </td>
<td> foot 2 cell 2 </td>
<td> foot 2 cell 3 </td>
</tr>
</tfoot>
<tbody style="color:blue">
<tr>
<td> row 1 cell 1 </td>
<td> row 1 cell 2 </td>
<td> row 1 cell 3 </td>
</tr>
<tr>
<td> row 2 cell 1 </td>
<td> row 2 cell 2 </td>
<td> row 2 cell 3 </td>
</tr>
</tbody>
<tbody style="color:orange">
<tr>
<td> row 3 cell 1 </td>
<td> row 3 cell 2 </td>
<td> row 3 cell 3 </td>
</tr>
<tr>
<td> row 4 cell 1 </td>
<td> row 4 cell 2 </td>
<td> row 4 cell 3 </td>
</tr>
</tbody>
</table>

HTML web page:

table caption
head 1 cell 1	head 1 cell 2	head 1 cell 3
head 2 cell 1	head 2 cell 2	head 2 cell 3
foot 1 cell 1	foot 1 cell 2	foot 1 cell 3
foot 2 cell 1	foot 2 cell 2	foot 2 cell 3
row 1 cell 1	row 1 cell 2	row 1 cell 3
row 2 cell 1	row 2 cell 2	row 2 cell 3
row 3 cell 1	row 3 cell 2	row 3 cell 3
row 4 cell 1	row 4 cell 2	row 4 cell 3

Data cells merging attributes, <rowspan> and <colspan>

The attributes of <th> and <td> elements are used to merge table data cells. Attribute <rowspan> can be used to specify the number of rows spanned by the corresponding cell for merging cells across rows. Attribute <colspan> can be used to specify the number of columns spanned by the corresponding cell for merging cells across columns. And by default, both <rowspan> and <colspan> attributes equal to one.

Code Sample of captioned table with <thead>, <tfoot>, and <tbody> divisions:

<table border=1>
<caption>table caption</caption>
<thead style="color:green">
<tr>
<th align="center" rowspan="2" style="width: 120px">
head 1 cell 1 head 2 cell 1</th>
<th align="center" colspan="2" >
head 1 cell 2 head 1 cell 3</th>
</tr>
<tr>
<th align="center" width="120">head 2 cell 2</th>
<th align="center" width="120">head 2 cell 3</th>
</tr>
</thead>
<tfoot style="color:red">
<tr>
<td rowspan="2"> foot 1 cell 1 foot 2 cell 1</td>
<td> foot 1 cell 2 </td>
<td> foot 1 cell 3 </td>
</tr>
<tr>
<td> foot 2 cell 2 </td>
<td> foot 2 cell 3 </td>
</tr>
</tfoot>
<tbody style="color:blue">
<tr>
<td> row 1 cell 1 </td>
<td rowspan="2"> row 1 cell 2row 2 cell 2 </td>
<td> row 1 cell 3 </td>
</tr>
<tr>
<td> row 2 cell 1 </td>
<td> row 2 cell 3 </td>
</tr>
</tbody>
<tbody style="color:orange">
<tr>
<td> row 3 cell 1 </td>
<td colspan="2" style="width: 240px"> row 3 cell 2 row 3 cell 3</td>
</tr>
<tr>
<td> row 4 cell 1 </td>
<td> row 4 cell 2 </td>
<td> row 4 cell 3 </td>
</tr>
</tbody>
</table>

HTML web page:

table caption
head 1 cell 1 head 2 cell 1	head 1 cell 2 head 1 cell 3
head 1 cell 1 head 2 cell 1	head 2 cell 2	head 2 cell 3
foot 1 cell 1 foot 2 cell 1	foot 1 cell 2	foot 1 cell 3
foot 1 cell 1 foot 2 cell 1	foot 2 cell 2	foot 2 cell 3
row 1 cell 1	row 1 cell 2 row 2 cell 2	row 1 cell 3
row 2 cell 1	row 1 cell 2 row 2 cell 2	row 2 cell 3
row 3 cell 1	row 3 cell 2 row 3 cell 3
row 4 cell 1	row 4 cell 2	row 4 cell 3

Content

HTML Table

Table row <tr> and table data cell <td>

Table caption <caption> and table header <th>

Table column <col> and columne group <colgroup>

Header row <thead>, footer row <tfoot>, and table body <tbody> group

Data cells merging attributes, <rowspan> and <colspan>