HTML Tables

---

In HTML, you can create tables for your website using the <table> tag in conjunction with the <tr>, <td> and <thead> tags.

The HTML tables allow displaying the data (e.g. image, text, link) in columns and rows of cells. Table rows can be grouped into a head, foot, and body sections through the <thead>, <tfoot> and <tbody> elements, respectively.

In HTML5, we can place <tfoot> either before or after <tbody> tag. They must come after any <caption>, <colgroup>, and <thead> elements

Most of the attributes of the <table> element are not used in HTML5. If you want to style the appearance of the table, you can use CSS instead.

---

Spanning Multiple Rows and Columns

It is possible to extend rows and columns of a table across many other rows and columns.

Commonly, a table cell cannot pass into the space, which is below or above another cell. But, if you want to span several rows or columns in a table, you can use the colspan or rowspan attributes.

Adding Captions to Tables

You can use the <caption> element to specify a caption for tables. It should be placed immediately after the opening <table> tag. By default, the caption will be at the top of the table, but its position can be changed with the CSS caption-side property.

Syntax

The <table> tag comes in pairs. The content is written between the opening <table> and the closing </table> tags.

Example of the HTML <table> tag:

Result

In the given example, we use the <table> tag to create a table. Then, we use the <tr> tag to divide the table into rows. The <th> tag is used for the table header cells, where the title is written. In other words, the table row is divided into headings. The <td> tag is used for table cells where the information is written.

---

If you want to show the heading in one cell, you can use the colspan attribute.

Example of the HTML <table> tag with the colspan attribute:

Result

---

Example of the HTML <table> tag with the rowspan attribute:

Result

Click Here to Donwload Background Images