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.

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.

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.

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.

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.