table: This tag starts the table
tr: This tag defines the row of a table
td: This tag defines the table daat in the given row
tbody: This tag defines the body of a table.
thead: This tag defines the head of a table.
caption: This tag gives a caption to the table
rowspan: This tag merges the number of rows specified together
colspan: This tag merges the number of columns specified together
Following is the hierarchy required for the tags:
- table is declared insie the body of the html
- caption is defined at the top incase you want caption at the top or bottom if tou want caption at the bottom.
- thead is defined to start a header section
- tr is defiend to start a row
- th is used to define the header row of the table
- tr is used to close the header section and subsequently start the data section
- tbody is used to define th body of the table
- td is used to define the data in the respective tr (row) inside the body of the table
Code
<!doctype html>
<html lang="en">
<head>
<title>Practical 3 - CSU953 - CSE 2026</title>
</head>
<body>
<div class="row">
<div class="col">
<img src="https://shooliniuniversity.com/assets/images/logo.png" style="width:100px; height:50px;">
</div>
<div class="col" style="margin-left: -20%;">
<h1 style="font-size: 50px;">Table</h1>
</div>
</div>
<table class="table table-striped table-hover align-middle caption-top text-center">
<caption>Table briefing about different ministries of India:</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Role</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Shri Narendra</td>
<td>Modi</td>
<td>Prime Minister of India</td>
</tr>
<tr>
<th scope="row">2</th>
<td colspan="2">Smt. Draupadi Murmu</td>
<td>President of India</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Justice Sharad Arvind Bobde</td>
<td>Chief Justice of India</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Shri Rajnath</td>
<td>Singh</td>
<td>Defence Minister of India</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Smt. Nirmala</td>
<td>Sitharaman</td>
<td>Finance Minister of India</td>
</tr>
<tr>
<th scope="row">6</th>
<td rowspan="2">Ministry of Commerce and Industry</td>
<td rowspan="2">Looks After</td>
<td>Department of Commerce</td>
</tr>
<tr>
<th scope="row">7</th>
<td>and the Department for Promotion of Industry & Internal Trade</td>
</tr>
</tbody>
</table>
</body>
</html>
Output
Practical 3
# | First Name | Last Name | Role |
---|---|---|---|
1 | Shri Narendra | Modi | Prime Minister of India |
2 | Smt. Draupadi Murmu | President of India | |
3 | Justice Sharad Arvind Bobde | Chief Justice of India | |
4 | Shri Rajnath | Singh | Defence Minister of India |
5 | Smt. Nirmala | Sitharaman | Finance Minister of India |
6 | Ministry of Commerce and Indutry | Looks After | Department of Commerce |
7 | and the Department for Promotion of Industry & Internal Trade |