HTML tables are used to present data in a grid format of rows and columns. Tables are defined with the <table> element, and each row is defined with the <tr> element. The individual cells of the table are defined with the <td> element (for table data) or the <th> element (for table headings).

Table Heading

Table heading can be defined using the <th> tag. This tag will be put to replace the <td> tag, which is used to represent actual data cells. Normally you will put your top row as a table heading as shown below, otherwise, you can use the <th> element in any row. Headings, which are defined in the <th> tag are centered and bold by default.

Colspan and Rowspan Attributes

You will use the colspan attribute if you want to merge two or more columns into a single column. Similar way you will use rowspan if you want to merge two or more rows.

Table Header, Body, and Footer

Tables can be divided into three portions − a header, a body, and a foot. The head and foot are rather similar to headers and footers in a word-processed document that remain the same for every page, while the body is the main content holder of the table.

The three elements for separating the head, body, and foot of a table are −

<thead> − to create a separate table header.

<tbody> − to indicate the main body of the table.

<tfoot> − to create a separate table footer.

A table may contain several <tbody> elements to indicate different pages or groups of data. But it is notable that <thead> and <tfoot> tags should appear before <tbody>