HTML Tables – Solved Practice Questions

By /

Introduction

HTML tables organize data into rows and columns, making information easy to read and compare. They are commonly used for timetables, price lists, reports, student records, and product details. In this chapter, you’ll practice creating HTML tables through simple, real-world solved questions. HTML tables help to understand the concepts.

Question 1

Problem Statement

Create a table that displays the names and ages of three students.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Student Table</title>
</head>
<body>

    <h1>Student Details</h1>

    <table border="1">
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>

        <tr>
            <td>Rahul</td>
            <td>15</td>
        </tr>

        <tr>
            <td>Priya</td>
            <td>14</td>
        </tr>

        <tr>
            <td>Ankit</td>
            <td>16</td>
        </tr>
    </table>

</body>
</html>

Output

NameAge
Rahul15
Priya14
Ankit16

Step-by-Step Explanation

  • <table> creates a table.
  • <tr> creates a table row.
  • <th> creates a table heading.
  • <td> creates table data.

Question 2

Problem Statement

Create a table that displays three products and their prices.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Product Price List</title>
</head>
<body>

    <h1>Product List</h1>

    <table border="1">
        <tr>
            <th>Product</th>
            <th>Price</th>
        </tr>

        <tr>
            <td>Laptop</td>
            <td>₹55,000</td>
        </tr>

        <tr>
            <td>Mouse</td>
            <td>₹700</td>
        </tr>

        <tr>
            <td>Keyboard</td>
            <td>₹1,200</td>
        </tr>
    </table>

</body>
</html>

Output

ProductPrice
Laptop₹55,000
Mouse₹700
Keyboard₹1,200

Step-by-Step Explanation

  • The first row contains headings.
  • The remaining rows contain product information.
  • Each row represents one product.

Question 3

Problem Statement

Create a table that displays employee names, departments, and salaries.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Employee Table</title>
</head>
<body>

    <h1>Employee Details</h1>

    <table border="1">
        <tr>
            <th>Name</th>
            <th>Department</th>
            <th>Salary</th>
        </tr>

        <tr>
            <td>Aman</td>
            <td>Sales</td>
            <td>₹35,000</td>
        </tr>

        <tr>
            <td>Neha</td>
            <td>HR</td>
            <td>₹42,000</td>
        </tr>

        <tr>
            <td>Rohit</td>
            <td>IT</td>
            <td>₹50,000</td>
        </tr>
    </table>

</body>
</html>

Output

NameDepartmentSalary
AmanSales₹35,000
NehaHR₹42,000
RohitIT₹50,000

Step-by-Step Explanation

  • Tables can contain multiple columns.
  • Every <tr> represents one employee.
  • <th> creates the table headings.

Question 4

Problem Statement

Create a weekly class timetable using an HTML table.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Class Timetable</title>
</head>
<body>

    <h1>Class Timetable</h1>

    <table border="1">
        <tr>
            <th>Day</th>
            <th>Subject</th>
        </tr>

        <tr>
            <td>Monday</td>
            <td>Mathematics</td>
        </tr>

        <tr>
            <td>Tuesday</td>
            <td>Science</td>
        </tr>

        <tr>
            <td>Wednesday</td>
            <td>English</td>
        </tr>
    </table>

</body>
</html>

Output

DaySubject
MondayMathematics
TuesdayScience
WednesdayEnglish

Step-by-Step Explanation

  • Tables are useful for timetables.
  • Each row contains one day’s schedule.
  • Columns organize related information.

Question 5

Problem Statement

Create a table showing the marks of three students in HTML.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Student Marks</title>
</head>
<body>

    <h1>Student Marks</h1>

    <table border="1">
        <tr>
            <th>Name</th>
            <th>HTML Marks</th>
        </tr>

        <tr>
            <td>Rahul</td>
            <td>95</td>
        </tr>

        <tr>
            <td>Priya</td>
            <td>91</td>
        </tr>

        <tr>
            <td>Ankit</td>
            <td>88</td>
        </tr>
    </table>

</body>
</html>

Output

NameHTML Marks
Rahul95
Priya91
Ankit88

Step-by-Step Explanation

  • The first row defines the headings.
  • Each remaining row stores one student’s marks.
  • Tables make numerical data easy to compare.

Question 6

Problem Statement

Create a table that displays the names, email addresses, and phone numbers of three employees.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Employee Contact List</title>
</head>
<body>

    <h1>Employee Contact Details</h1>

    <table border="1">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
        </tr>

        <tr>
            <td>Amit</td>
            <td>amit@example.com</td>
            <td>9876543210</td>
        </tr>

        <tr>
            <td>Neha</td>
            <td>neha@example.com</td>
            <td>9876501234</td>
        </tr>

        <tr>
            <td>Rohan</td>
            <td>rohan@example.com</td>
            <td>9812345678</td>
        </tr>
    </table>

</body>
</html>

Output

NameEmailPhone
Amitamit@example.com9876543210
Nehaneha@example.com9876501234
Rohanrohan@example.com9812345678

Step-by-Step Explanation

  • Each <tr> creates one employee record.
  • <th> defines the column headings.
  • <td> stores the employee information.

Question 7

Problem Statement

Create a table that displays three books along with their authors.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Book List</title>
</head>
<body>

    <h1>Library Books</h1>

    <table border="1">
        <tr>
            <th>Book</th>
            <th>Author</th>
        </tr>

        <tr>
            <td>Atomic Habits</td>
            <td>James Clear</td>
        </tr>

        <tr>
            <td>Clean Code</td>
            <td>Robert C. Martin</td>
        </tr>

        <tr>
            <td>The Alchemist</td>
            <td>Paulo Coelho</td>
        </tr>
    </table>

</body>
</html>

Output

BookAuthor
Atomic HabitsJames Clear
Clean CodeRobert C. Martin
The AlchemistPaulo Coelho

Step-by-Step Explanation

  • The first row creates the table headings.
  • Each remaining row contains one book.
  • Tables are useful for organizing records.

Question 8

Problem Statement

Create a table that uses the colspan attribute to merge two columns for the table title.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Colspan Example</title>
</head>
<body>

    <table border="1">

        <tr>
            <th colspan="2">Student Details</th>
        </tr>

        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>

        <tr>
            <td>Rahul</td>
            <td>15</td>
        </tr>

    </table>

</body>
</html>

Output

Student Details
Name
Rahul

Step-by-Step Explanation

  • colspan="2" merges two columns into one.
  • It is useful for creating table titles.
  • The heading spans across both columns.

Question 9

Problem Statement

Create a table that uses the rowspan attribute to merge two rows.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Rowspan Example</title>
</head>
<body>

    <table border="1">

        <tr>
            <th>Name</th>
            <th>Subject</th>
        </tr>

        <tr>
            <td rowspan="2">Rahul</td>
            <td>HTML</td>
        </tr>

        <tr>
            <td>CSS</td>
        </tr>

    </table>

</body>
</html>

Output

NameSubject
RahulHTML
CSS

Step-by-Step Explanation

  • rowspan="2" merges two rows.
  • The name Rahul appears across both subject rows.
  • It is useful when one value belongs to multiple rows.

Question 10

Problem Statement

Create a product price table with four columns: Product, Category, Price, and Stock.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Product Inventory</title>
</head>
<body>

    <h1>Product Inventory</h1>

    <table border="1">

        <tr>
            <th>Product</th>
            <th>Category</th>
            <th>Price</th>
            <th>Stock</th>
        </tr>

        <tr>
            <td>Laptop</td>
            <td>Electronics</td>
            <td>₹55,000</td>
            <td>15</td>
        </tr>

        <tr>
            <td>Mouse</td>
            <td>Accessories</td>
            <td>₹700</td>
            <td>80</td>
        </tr>

        <tr>
            <td>Keyboard</td>
            <td>Accessories</td>
            <td>₹1,200</td>
            <td>45</td>
        </tr>

    </table>

</body>
</html>

Output

ProductCategoryPriceStock
LaptopElectronics₹55,00015
MouseAccessories₹70080
KeyboardAccessories₹1,20045

Step-by-Step Explanation

  • Tables can have multiple columns.
  • Each row stores one product’s details.
  • This format is commonly used in inventory systems.
  • HTML tables make data easy to read and compare.

Key Takeaways

  • <table> creates a table.
  • <tr> creates a table row.
  • <th> creates table headings.
  • <td> creates table data cells.
  • border adds a visible border around the table.
  • colspan merges columns.
  • rowspan merges rows.
  • Tables are ideal for displaying structured data.

Frequently Asked Questions (FAQs)

1. Which HTML tag creates a table?

The <table> tag creates a table.

2. Which tag creates a table row?

The <tr> tag creates a table row.

3. What is the difference between <th> and <td>?

<th> creates a table heading, while <td> creates a table data cell.

4. What does the border attribute do?

It displays a border around the table and its cells.

5. What is colspan?

colspan merges two or more columns into one cell.

6. What is rowspan?

rowspan merges two or more rows into one cell.

7. Where are HTML tables commonly used?

HTML tables are used for timetables, reports, price lists, student records, invoices, and product inventories.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top