<!-- index.
html -->
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Practicing Table Design</title>
</head>
<body>
<h1>Gita Mittal Foundation</h1>
<h2>The th tag</h2>
<table>
<tr>
<th>[Link]</th>
<th>Book</th>
<th>Author</th>
</tr>
<tr>
<td>1</td>
<td>Intro to C++</td>
<td>E Bala.</td>
</tr>
<tr>
<td>2</td>
<td>Programming Fundamentals</td>
<td>GFG</td>
</tr>
</table>
</body>
</html>
Gita Mittal Foundation
**************THEAD Example************Table Head, Body, and Footer
The HTML table can be divided into three parts: a header, a body, and a footer.
1. Table Header
We use the <thead> tag to add a table head. The <thead> tag must come before any other tags
inside a table. For example,
<table>
<thead>
<tr>
<th>Head1</th>
<th>Head2</th>
</tr>
</thead>
...
...
</table>
The content of <thead> is placed on the top part of the table and we usually place the rows with
table headers inside the <thead> tag.
2. Table Body
We use the <tbody> tag to add a table body. The <tbody> tag must come after <thead> and before
any other tags inside a table. For example,
<table>
<thead>
...
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>
...
...
</table>
The content of <tbody> is placed on the center part of the table and we usually place the rows with
the content we want to represent in the <tbody>.
3. Table Footer
We use the <tfoot> tag to add a table footer. The <tfoot> tag must come after <tbody> and before
any other tags inside a table. For example,
<table>
<thead>
...
</thead>
<tbody>
,,,,
</tbody>
<tfoot>
<tr>
<td>foot 1</td>
<td>foot 2</td>
</tr>
</tfoot>
</table>
The content of <tbody> is placed on the bottom part of the table and we usually place the rows with
the footer in the <tfoot>.
All these tags must be placed inside a <table> tag and must contain at least one <tr>. For example,
Example: HTML Table Head, Body, and Footer
<table>
<thead>
<tr>
<th>S.N</th>
<th>Item</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Apple</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>Mango</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>Orange</td>
<td>1</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>Total</td>
<td>5</td>
</tr>
</tfoot>
</table>
Browser Output
Colspan and Rowspan
Colspan
The colspan attribute merges cells across multiple columns. For example,
<table>
<tr>
<th>S.N</th>
<th>Item</th>
<th>Quantity</th>
</tr>
<tr>
<td>1</td>
<td>Apple</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>Mango</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>Orange</td>
<td>1</td>
</tr>
<tr>
<td colspan="2">Total</td>
<td>5</td>
</tr>
</table>
Browser Output
In the above example, you can see that the last row only has 2 cells with one cell occupying 2
columns.
The value of the colspan attribute determines how many columns the cell occupies.
Rowspan
The rowspan attribute merges cells across multiple rows. For example,
<table>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td rowspan="3">Mark Smith</td>
<td>English</td>
<td>67</td>
</tr>
<tr>
<td>Maths</td>
<td>82</td>
</tr>
<tr>
<td>Science</td>
<td>91</td>
</tr>
</table>
Browser Output
In the above example, you can see that the first column only has 2 cells with one cell
occupying 2 rows.
The value of the rowspan attribute determines how many rows the cell occupies.
Caption in HTML TABLE
The <caption> element acts as the title of the table. It is used to give a short description of the table.
It shows up on top of the table.
The <caption> tag must be the first child of the <table> element.
<table>
<caption>Employee Details</caption>
<tr>
<th>Name</th>
<td>Sam</td>
<td>Steve</td>
<td>Peggy</td>
</tr>
<tr>
<th>Age</th>
<td>31</td>
<td>42</td>
<td>29</td>
</tr>
<tr>
<th>Gender</th>
<td>M</td>
<td>M</td>
<td>F</td>
</tr>
</table>
