In the previous post, we have learned how to add images and videos to an HTML page. In this post, we will learn how to add tables with rows and columns to an HTML page.
Table Tag:
A table is a collection of rows and columns. To add a table to an HTML page, we use the <table> tag. To define a row inside the table we use the <tr> tag and to define a column inside a row, we use the <td> tag. See the following code example:
Code:
<table>
<tr>
<td>Row 1, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 3, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</table>Output:
| Row 1, Column 1 | Row 2, Column 2 | Row 3, Column 3 |
| Row 2, Column 1 | Row 2, Column 2 | Row 2, Column 3 |
As you can see above that even though the table is correctly displaying the rows and columns but it’s not looking like a table. So let’s add a border to the table. The “border” attribute is used to add a border to the table. See the following code example:
Code:
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 3, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</table>Output:
| Row 1, Column 1 | Row 2, Column 2 | Row 3, Column 3 |
| Row 2, Column 1 | Row 2, Column 2 | Row 2, Column 3 |
Table Header:
To define head/header for the table, we can use the <thead> tag. The cells/columns inside the <thead> tag are added using the <th> tag. See the following code example:
Code:
<table border="1">
<thead>
<tr>
<th>Column 1 Head</th>
<th>Column 2 Head</th>
<th>Column 3 Head</th>
<tr>
</thead>
<tr>
<td>Row 1, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 3, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</table>Output:
| Column 1 Head | Column 2 Head | Column 3 Head |
|---|---|---|
| Row 1, Column 1 | Row 2, Column 2 | Row 3, Column 3 |
| Row 2, Column 1 | Row 2, Column 2 | Row 2, Column 3 |
Table Body:
The table body defines the main content of the table other than the table header or table footer. To define the table body area, we use the <tbody> tag.
Code:
<table border="1">
<thead>
<tr>
<th>Column 1 Head</th>
<th>Column 2 Head</th>
<th>Column 3 Head</th>
<tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 3, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</tbody>
</table>Output:
| Column 1 Head | Column 2 Head | Column 3 Head |
|---|---|---|
| Row 1, Column 1 | Row 2, Column 2 | Row 3, Column 3 |
| Row 2, Column 1 | Row 2, Column 2 | Row 2, Column 3 |
Table Footer:
To define the table footer, we use the <tfoot> tag. See the following code example:
Code:
<table border="1">
<thead>
<tr>
<th>Column 1 Head</th>
<th>Column 2 Head</th>
<th>Column 3 Head</th>
<tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 3, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer Section</td>
</tr>
</tfoot>
</table>Output:
| Column 1 Head | Column 2 Head | Column 3 Head |
|---|---|---|
| Row 1, Column 1 | Row 2, Column 2 | Row 3, Column 3 |
| Row 2, Column 1 | Row 2, Column 2 | Row 2, Column 3 |
| Footer Section |
Column Span:
To span a column across multiple columns, we use the “colspan” attribute of the <td> tag. See the following code example:
Code:
<table border="1">
<thead>
<tr>
<th>Column 1 Head</th>
<th>Column 2 Head</th>
<th>Column 3 Head</th>
<tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 3, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Footer Section</td>
</tr>
</tfoot>
</table>Output:
| Column 1 Head | Column 2 Head | Column 3 Head |
|---|---|---|
| Row 1, Column 1 | Row 2, Column 2 | Row 3, Column 3 |
| Row 2, Column 1 | Row 2, Column 2 | Row 2, Column 3 |
| Footer Section | ||
Table Title:
We can also define a title text for the table inside the table header. See the following code example:
Code:
<table border="1">
<thead>
<tr>
<td colspan="3">Table Title</td>
</tr>
<tr>
<th>Column 1 Head</th>
<th>Column 2 Head</th>
<th>Column 3 Head</th>
<tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 3, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Footer Section</td>
</tr>
</tfoot>
</table>Output:
| Table Title | ||
| Column 1 Head | Column 2 Head | Column 3 Head |
|---|---|---|
| Row 1, Column 1 | Row 2, Column 2 | Row 3, Column 3 |
| Row 2, Column 1 | Row 2, Column 2 | Row 2, Column 3 |
| Footer Section | ||
Video Tutorial:
Got Stuck? Any Questions?
In case of any questions, please feel free to ask in the comments section below. Thanks