Practical 3 - CSU953 - CSE 2026 - Shoolini University

Create a static web page using table tags of HTML.

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:
  1. table is declared insie the body of the html
  2. caption is defined at the top incase you want caption at the top or bottom if tou want caption at the bottom.
  3. thead is defined to start a header section
  4. tr is defiend to start a row
  5. th is used to define the header row of the table
  6. tr is used to close the header section and subsequently start the data section
  7. tbody is used to define th body of the table
  8. 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

Table briefing about different ministries of India:
# 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