Table-related Tags

In this article, we explain table-related tags.

This explains how to describe tables and table captions in HTML along with examples.

YouTube Video

Table-related Tags

<table> Tag

 1<table>
 2    <tr>
 3        <th>Header 1</th>
 4        <th>Header 2</th>
 5    </tr>
 6    <tr>
 7        <td>Data 1</td>
 8        <td>Data 2</td>
 9    </tr>
10</table>

• The <table> tag is used to create a table that organizes and displays data in rows and columns.

  The <table> tag visually organizes data and creates tables with multiple rows and columns. Rows are defined with the <tr> tag, header cells with the <th> tag, and data cells with the <td> tag.

• You can customize the table's style and layout using CSS.

<tr> Tag

1<tr>
2    <td>Row 1, Cell 1</td>
3    <td>Row 1, Cell 2</td>
4</tr>

• The <tr> tag is used to define rows in a table.

  The <tr> tag is used to create each row of a table, containing cells (<td> or <th>).

• Each row can contain multiple cells, forming the overall structure of the table.

<th> and <td> Tags

1<th>Header 1</th>
2<td>Data 1</td>

• The <th> tag defines a table's header cell. Typically used in header rows, the content of the cells is bold and centered.
• The <td> tag defines a standard table data cell, which displays regular table data.

colspan and rowspan attributes

 1<table>
 2    <thead>
 3        <tr>
 4            <th>Header 1</th>
 5            <th>Header 2</th>
 6        </tr>
 7    </thead>
 8    <tbody>
 9        <tr>
10            <td colspan="2">Spanning Cell</td>
11        </tr>
12        <tr>
13            <td rowspan="2">Spanning Cell</td>
14            <td>Data 1</td>
15        </tr>
16        <tr>
17            <td>Data 2</td>
18        </tr>
19    </tbody>
20</table>

colspan and rowspan are attributes used when table cells span multiple columns or rows.

• The colspan attribute allows a cell to span across multiple columns.
• The rowspan attribute allows a cell to span multiple rows.

<thead>, <tbody>, <tfoot> Tags

 1<table>
 2    <thead>
 3        <tr>
 4            <th>Header 1</th>
 5            <th>Header 2</th>
 6        </tr>
 7    </thead>
 8    <tbody>
 9        <tr>
10            <td>Data 1</td>
11            <td>Data 2</td>
12        </tr>
13        <tr>
14            <td>Data 3</td>
15            <td>Data 4</td>
16        </tr>
17    </tbody>
18    <tfoot>
19        <tr>
20            <td>Footer 1</td>
21            <td>Footer 2</td>
22        </tr>
23    </tfoot>
24</table>

• The <thead> tag is used to define the header section of a table. It typically contains the column headers.

  The <thead> tag is positioned at the top of the table, defining the column titles or headers. This helps to clearly distinguish sections of data.

• The <tbody> tag defines the body section of the table. It contains the data rows.

  The <tbody> tag contains the main body of the table's data. It is positioned between the rows enclosed by the <thead> and <tfoot> tags.

• The <tfoot> tag defines the footer part of the table, which includes totals or notes.

  The <tfoot> tag is located at the end of the table and is used to display totals or other annotations. It is especially useful when summarizing or showing totals for large data sets.

<caption> and <colgroup> Tags

 1<table>
 2    <caption>Sample Table Caption</caption>
 3    <colgroup>
 4        <col style="background-color: #f2f2f2">
 5        <col style="background-color: #e6e6e6">
 6    </colgroup>
 7    <thead>
 8        <tr>
 9            <th>Header 1</th>
10            <th>Header 2</th>
11        </tr>
12    </thead>
13    <tbody>
14        <tr>
15            <td>Data 1</td>
16            <td>Data 2</td>
17        </tr>
18        <tr>
19            <td>Data 3</td>
20            <td>Data 4</td>
21        </tr>
22    </tbody>
23</table>

• The <caption> tag adds a caption (heading) to make the table's content clearer. It is usually placed at the top of the table and serves to summarize the table's overall content.

• The <colgroup> tag groups columns within a table and is used to apply styles or layouts. You can specify background colors or widths for specific columns by including the <col> tag.

Table example

 1<table>
 2    <caption>Table Title</caption>
 3    <colgroup>
 4        <col span="2" style="background-color: lightblue;">
 5    </colgroup>
 6    <thead>
 7        <tr>
 8            <th>Header 1</th>
 9            <th>Header 2</th>
10            <th>Header 3</th>
11            <th>Header 4</th>
12        </tr>
13    </thead>
14    <tbody>
15        <tr>
16            <td>Data 11</td>
17            <td>Data 12</td>
18            <td>Data 13</td>
19            <td>Data 14</td>
20        </tr>
21        <tr>
22            <td>Data 21</td>
23            <td>Data 22</td>
24            <td>Data 23</td>
25            <td>Data 24</td>
26        </tr>
27    </tbody>
28    <tfoot>
29        <tr>
30            <td colspan="3">Table Footer Title</td>
31            <td>Table Footer Summary</td>
32        </tr>
33    </tfoot>
34</table>

• The <table> tag is used to create a table that displays data in rows and columns.

• The <thead> tag groups the header rows of the table. It usually contains <th> tags, which serve as the headers.

• The <tbody> tag groups the main content of the table. It usually contains data rows composed of <td> tags.

• The <tfoot> tag groups the footer rows of the table. It is suitable for displaying totals or notes.

• The <colgroup> tag groups the columns of a table and is used to apply styles to them as a whole.

• The <caption> tag adds a caption or heading to the table, making it easier for users to understand the table's content.

• The colspan attribute allows a cell to span across multiple columns.

• The rowspan attribute allows a cell to span multiple rows.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video