HTML5 Tables Practice Questions with Solutions

By /

Tables are used in HTML5 to display information in rows and columns. They are ideal for presenting structured data such as student marks, employee records, product prices, schedules, invoices, and reports. HTML5 Tables practice questions with solutions help to understand the concepts.

HTML tables are built using several elements that work together:

  • <table> → Creates the table
  • <tr> → Creates a table row
  • <th> → Creates a table header cell
  • <td> → Creates a table data cell

Modern websites use tables only for displaying tabular data, not for webpage layouts.

Why Learn HTML Tables?

HTML tables help you:

  • Display structured information clearly.
  • Present reports and records.
  • Create timetables and schedules.
  • Show product comparisons.
  • Display pricing tables.
  • Improve readability of data.

Basic Syntax

<table>

    <tr>

        <th>Name</th>

        <th>Age</th>

    </tr>

    <tr>

        <td>Ravi</td>

        <td>21</td>

    </tr>

</table>

Important Table Elements

TagPurpose
<table>Creates a table
<tr>Creates a row
<th>Creates a header cell
<td>Creates a data cell

1. Create a Simple HTML Table

Problem Statement

Create a table displaying two students with their ages.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Simple Table</title>

</head>

<body>

    <h1>Student Information</h1>

    <table border="1">

        <tr>

            <th>Name</th>

            <th>Age</th>

        </tr>

        <tr>

            <td>Ravi</td>

            <td>21</td>

        </tr>

        <tr>

            <td>Anita</td>

            <td>20</td>

        </tr>

    </table>

</body>

</html>

Expected Output

-------------------------

Name     Age

-------------------------

Ravi      21

Anita     20

-------------------------

Explanation

The table contains:

  • One header row
  • Two data rows

The border="1" attribute displays borders around the table.

Concepts Covered

  • <table>
  • <tr>
  • <th>
  • <td>

2. Create an Employee Details Table

Problem Statement

Create a table displaying:

  • Employee ID
  • Name
  • Department

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Employee Table</title>

</head>

<body>

    <table border="1">

        <tr>

            <th>ID</th>

            <th>Name</th>

            <th>Department</th>

        </tr>

        <tr>

            <td>101</td>

            <td>Rahul</td>

            <td>HR</td>

        </tr>

        <tr>

            <td>102</td>

            <td>Neha</td>

            <td>IT</td>

        </tr>

    </table>

</body>

</html>

Expected Output

------------------------------------

ID     Name      Department

------------------------------------

101    Rahul     HR

102    Neha      IT

------------------------------------

Explanation

Each employee’s information is stored in one table row.

Tables are commonly used in:

  • Employee Management Systems
  • Payroll Software
  • CRM Applications

Concepts Covered

  • Employee Table
  • Rows
  • Columns

3. Create a Student Marks Table

Problem Statement

Create a table displaying:

  • Student Name
  • HTML Marks
  • CSS Marks
  • JavaScript Marks

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Marks Table</title>

</head>

<body>

    <table border="1">

        <tr>

            <th>Name</th>

            <th>HTML</th>

            <th>CSS</th>

            <th>JavaScript</th>

        </tr>

        <tr>

            <td>Riya</td>

            <td>90</td>

            <td>85</td>

            <td>88</td>

        </tr>

        <tr>

            <td>Amit</td>

            <td>92</td>

            <td>89</td>

            <td>91</td>

        </tr>

    </table>

</body>

</html>

Expected Output

--------------------------------------------

Name     HTML    CSS    JavaScript

--------------------------------------------

Riya      90      85      88

Amit      92      89      91

--------------------------------------------

Explanation

Tables are ideal for displaying academic results because information is organized into rows and columns.

Concepts Covered

  • Student Marks Table
  • Structured Data
  • HTML Tables

4. Create a Product Price Table

Problem Statement

Create a table displaying the following product information:

  • Product Name
  • Price
  • Stock

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Product Price Table</title>

</head>

<body>

    <h1>Product List</h1>

    <table border="1">

        <tr>

            <th>Product</th>

            <th>Price</th>

            <th>Stock</th>

        </tr>

        <tr>

            <td>Laptop</td>

            <td>₹55,000</td>

            <td>15</td>

        </tr>

        <tr>

            <td>Keyboard</td>

            <td>₹1,200</td>

            <td>40</td>

        </tr>

        <tr>

            <td>Mouse</td>

            <td>₹800</td>

            <td>60</td>

        </tr>

    </table>

</body>

</html>

Expected Output

------------------------------------------

Product      Price      Stock

------------------------------------------

Laptop       ₹55,000      15

Keyboard     ₹1,200       40

Mouse        ₹800         60

------------------------------------------

Explanation

Tables are widely used in:

  • E-commerce websites
  • Inventory systems
  • Product catalogs
  • Billing software

Concepts Covered

  • Product Tables
  • Structured Data
  • HTML Tables

5. Add a Table Caption Using <caption>

Problem Statement

Create a table showing student details and add a title above the table using the <caption> element.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Table Caption</title>

</head>

<body>

    <table border="1">

        <caption>

            Student Information

        </caption>

        <tr>

            <th>Name</th>

            <th>Class</th>

        </tr>

        <tr>

            <td>Ravi</td>

            <td>BCA</td>

        </tr>

        <tr>

            <td>Anita</td>

            <td>B.Sc</td>

        </tr>

    </table>

</body>

</html>

Expected Output

Student Information

-----------------------------

Name      Class

-----------------------------

Ravi      BCA

Anita     B.Sc

-----------------------------

Explanation

The <caption> element provides a title for the table.

It improves:

  • Accessibility
  • Readability
  • SEO
  • User understanding

Concepts Covered

  • <caption>
  • Table Titles
  • Semantic HTML

6. Create a Weekly Class Timetable

Problem Statement

Create a timetable with:

  • Day
  • Subject

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Class Timetable</title>

</head>

<body>

    <table border="1">

        <tr>

            <th>Day</th>

            <th>Subject</th>

        </tr>

        <tr>

            <td>Monday</td>

            <td>HTML</td>

        </tr>

        <tr>

            <td>Tuesday</td>

            <td>CSS</td>

        </tr>

        <tr>

            <td>Wednesday</td>

            <td>JavaScript</td>

        </tr>

    </table>

</body>

</html>

Expected Output

--------------------------

Day         Subject

--------------------------

Monday      HTML

Tuesday     CSS

Wednesday   JavaScript

--------------------------

Explanation

Timetables are one of the most common uses of HTML tables.

Concepts Covered

  • Timetable
  • Rows
  • Columns

7. Display Contact Information in a Table

Problem Statement

Create a contact table displaying:

  • Name
  • Email
  • Phone

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Contact Table</title>

</head>

<body>

    <table border="1">

        <tr>

            <th>Name</th>

            <th>Email</th>

            <th>Phone</th>

        </tr>

        <tr>

            <td>Rahul</td>

            <td>rahul@example.com</td>

            <td>9876543210</td>

        </tr>

        <tr>

            <td>Priya</td>

            <td>priya@example.com</td>

            <td>9876501234</td>

        </tr>

    </table>

</body>

</html>

Expected Output

-------------------------------------------------

Name      Email                 Phone

-------------------------------------------------

Rahul     rahul@example.com     9876543210

Priya     priya@example.com     9876501234

-------------------------------------------------

Explanation

Tables are useful for displaying structured contact records in:

  • Schools
  • Companies
  • Customer databases
  • CRM systems

Concepts Covered

  • Contact Tables
  • HTML Tables
  • Structured Records

8. Create a Multiplication Table

Problem Statement

Create a table displaying the multiplication table of 5.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Multiplication Table</title>

</head>

<body>

    <table border="1">

        <tr>

            <th>Expression</th>

            <th>Result</th>

        </tr>

        <tr>

            <td>5 × 1</td>

            <td>5</td>

        </tr>

        <tr>

            <td>5 × 2</td>

            <td>10</td>

        </tr>

        <tr>

            <td>5 × 3</td>

            <td>15</td>

        </tr>

        <tr>

            <td>5 × 4</td>

            <td>20</td>

        </tr>

        <tr>

            <td>5 × 5</td>

            <td>25</td>

        </tr>

    </table>

</body>

</html>

Expected Output

--------------------------

Expression     Result

--------------------------

5 × 1             5

5 × 2            10

5 × 3            15

5 × 4            20

5 × 5            25

--------------------------

Explanation

Tables are useful for presenting mathematical data in a structured format.

Concepts Covered

  • Mathematical Tables
  • HTML Table Practice
  • Structured Data

9. Merge Columns Using colspan

Problem Statement

Create a table where the heading Student Details spans across two columns.

HTML Solution

<!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>Ravi</td>

            <td>21</td>

        </tr>

    </table>

</body>

</html>

Expected Output

----------------------------

      Student Details

----------------------------

Name          Age

----------------------------

Ravi          21

----------------------------

Explanation

The colspan attribute merges multiple columns into a single cell.

Example:

<th colspan="2">

This means the header occupies 2 columns.

Concepts Covered

  • colspan
  • Column Merging
  • HTML Tables

10. Merge Rows Using rowspan

Problem Statement

Create a table where one department name spans two employee rows.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Rowspan Example</title>

</head>

<body>

    <table border="1">

        <tr>

            <th>Department</th>

            <th>Employee</th>

        </tr>

        <tr>

            <td rowspan="2">

                IT

            </td>

            <td>Rahul</td>

        </tr>

        <tr>

            <td>Neha</td>

        </tr>

    </table>

</body>

</html>

Expected Output

----------------------------

Department      Employee

----------------------------

IT              Rahul

                Neha

----------------------------

Explanation

The rowspan attribute merges multiple rows into one cell.

Example:

&lt;td rowspan="2">

The cell occupies 2 rows.

Concepts Covered

  • rowspan
  • Row Merging
  • HTML Tables

11. Create Table Sections Using <thead>, <tbody>, and <tfoot>

Problem Statement

Create a table that separates the header, body, and footer sections.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Table Sections</title>

</head>

<body>

    <table border="1">

        <thead>

            <tr>

                <th>Product</th>

                <th>Price</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>Laptop</td>

                <td>₹55,000</td>

            </tr>

            <tr>

                <td>Mouse</td>

                <td>₹800</td>

            </tr>

        </tbody>

        <tfoot>

            <tr>

                <td>Total Products</td>

                <td>2</td>

            </tr>

        </tfoot>

    </table>

</body>

</html>

Expected Output

----------------------------

Product       Price

----------------------------

Laptop      ₹55,000

Mouse          ₹800

----------------------------

Total Products      2

----------------------------

Explanation

HTML5 divides tables into three logical sections:

  • <thead> → Table Header
  • <tbody> → Main Table Data
  • <tfoot> → Footer Information

These elements improve:

  • Readability
  • Accessibility
  • Maintainability

Concepts Covered

  • <thead>
  • <tbody>
  • <tfoot>

12. Build a Student Report Card

Problem Statement

Create a student report card displaying:

  • Subject
  • Marks

Include a final row showing the total marks.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Report Card</title>

</head>

<body>

    <table border="1">

        <tr>

            <th>Subject</th>

            <th>Marks</th>

        </tr>

        <tr>

            <td>HTML</td>

            <td>90</td>

        </tr>

        <tr>

            <td>CSS</td>

            <td>85</td>

        </tr>

        <tr>

            <td>JavaScript</td>

            <td>88</td>

        </tr>

        <tr>

            <th>Total</th>

            <th>263</th>

        </tr>

    </table>

</body>

</html>

Expected Output

------------------------

Subject      Marks

------------------------

HTML          90

CSS           85

JavaScript    88

------------------------

Total         263

------------------------

Explanation

Report cards use tables because data is naturally arranged into rows and columns.

Concepts Covered

  • Student Reports
  • HTML Tables
  • Summary Rows

13. Create an Invoice Table

Problem Statement

Create a simple invoice table displaying:

  • Item
  • Quantity
  • Price

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Invoice Table</title>

</head>

<body>

    <table border="1">

        <tr>

            <th>Item</th>

            <th>Quantity</th>

            <th>Price</th>

        </tr>

        <tr>

            <td>Laptop</td>

            <td>1</td>

            <td>₹55,000</td>

        </tr>

        <tr>

            <td>Mouse</td>

            <td>2</td>

            <td>₹1,600</td>

        </tr>

        <tr>

            <th colspan="2">

                Total

            </th>

            <th>

                ₹56,600

            </th>

        </tr>

    </table>

</body>

</html>

Expected Output

--------------------------------------------

Item      Quantity      Price

--------------------------------------------

Laptop        1        ₹55,000

Mouse         2         ₹1,600

--------------------------------------------

Total                  ₹56,600

--------------------------------------------

Explanation

Invoice tables are widely used in:

  • Billing software
  • E-commerce websites
  • POS systems
  • Accounting applications

The colspan attribute is used to merge the Total label across two columns.

Concepts Covered

  • Invoice Tables
  • colspan
  • Business Applications

14. Build a Complete Employee Management Table

Problem Statement

Create an employee management table displaying the following information:

  • Employee ID
  • Name
  • Department
  • Designation
  • Salary

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Employee Management Table</title>

</head>

<body>

    <h1>Employee Details</h1>

    <table border="1">

        <tr>

            <th>Employee ID</th>

            <th>Name</th>

            <th>Department</th>

            <th>Designation</th>

            <th>Salary</th>

        </tr>

        <tr>

            <td>101</td>

            <td>Rahul Sharma</td>

            <td>IT</td>

            <td>Software Developer</td>

            <td>₹65,000</td>

        </tr>

        <tr>

            <td>102</td>

            <td>Priya Verma</td>

            <td>HR</td>

            <td>HR Executive</td>

            <td>₹48,000</td>

        </tr>

        <tr>

            <td>103</td>

            <td>Amit Singh</td>

            <td>Finance</td>

            <td>Accountant</td>

            <td>₹52,000</td>

        </tr>

    </table>

</body>

</html>

Expected Output

--------------------------------------------------------------------------

Employee ID | Name | Department | Designation | Salary

--------------------------------------------------------------------------

101 | Rahul Sharma | IT | Software Developer | ₹65,000

102 | Priya Verma | HR | HR Executive | ₹48,000

103 | Amit Singh | Finance | Accountant | ₹52,000

--------------------------------------------------------------------------

Explanation

This type of table is commonly used in:

  • HR Management Systems
  • Company Portals
  • Employee Dashboards
  • Payroll Software

Each row represents one employee record.

Concepts Covered

  • Employee Records
  • Multi-column Tables
  • Structured Business Data

15. Create a Professional Student Dashboard Table

Problem Statement

Create a dashboard table displaying student performance with the following columns:

  • Roll No
  • Student Name
  • HTML
  • CSS
  • JavaScript
  • Total
  • Grade

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Student Dashboard</title>

</head>

<body>

    <h1>Student Performance Dashboard</h1>

    <table border="1">

        <thead>

            <tr>

                <th>Roll No</th>

                <th>Student Name</th>

                <th>HTML</th>

                <th>CSS</th>

                <th>JavaScript</th>

                <th>Total</th>

                <th>Grade</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>01</td>

                <td>Riya</td>

                <td>90</td>

                <td>88</td>

                <td>92</td>

                <td>270</td>

                <td>A+</td>

            </tr>

            <tr>

                <td>02</td>

                <td>Rahul</td>

                <td>82</td>

                <td>80</td>

                <td>85</td>

                <td>247</td>

                <td>A</td>

            </tr>

            <tr>

                <td>03</td>

                <td>Neha</td>

                <td>95</td>

                <td>94</td>

                <td>96</td>

                <td>285</td>

                <td>A+</td>

            </tr>

        </tbody>

    </table>

</body>

</html>

Expected Output

--------------------------------------------------------------------------------------------

Roll No | Student Name | HTML | CSS | JavaScript | Total | Grade

--------------------------------------------------------------------------------------------

01 | Riya | 90 | 88 | 92 | 270 | A+

02 | Rahul | 82 | 80 | 85 | 247 | A

03 | Neha | 95 | 94 | 96 | 285 | A+

--------------------------------------------------------------------------------------------

Explanation

This example combines everything you’ve learned about HTML tables into a practical dashboard.

Dashboard tables are widely used in:

  • School Management Systems
  • College Portals
  • LMS Platforms
  • Reporting Applications
  • Business Analytics Dashboards

Using <thead> and <tbody> improves semantic structure and makes styling easier with CSS later.

Concepts Covered

  • Dashboard Tables
  • Student Reports
  • <thead>
  • <tbody>
  • Structured Data Presentation

Chapter Summary

In this chapter, you learned how to create and organize tables in HTML5 to display structured data in rows and columns. Tables are an essential part of web development when presenting information such as student records, employee details, invoices, reports, schedules, and product listings.

You practiced creating:

  • Basic HTML tables
  • Student information tables
  • Employee records
  • Product price tables
  • Timetables
  • Contact tables
  • Multiplication tables
  • Tables with captions
  • Column merging using colspan
  • Row merging using rowspan
  • Table sections using <thead>, <tbody>, and <tfoot>
  • Report cards
  • Invoice tables
  • Dashboard-style tables

By mastering these concepts, you can confidently build professional tables for real-world websites and web applications.

Key Takeaways

  • <table> creates a table.
  • <tr> creates a table row.
  • <th> creates a table header cell.
  • <td> creates a table data cell.
  • <caption> adds a title to the table.
  • colspan merges multiple columns.
  • rowspan merges multiple rows.
  • <thead> defines the table header.
  • <tbody> stores the main table data.
  • <tfoot> contains summary information.
  • Tables should only be used for tabular data, not for webpage layouts.

Frequently Asked Questions (FAQs)

1. What is the purpose of the <table> tag?

The <table> tag creates a table to display structured information in rows and columns.

Example:

<table>

    <tr>

        <th>Name</th>

        <th>Age</th>

    </tr>

    <tr>

        <td>Ravi</td>

        <td>21</td>

    </tr>

</table>

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

<th><td>
Table HeaderTable Data
Usually boldNormal text
Center aligned by defaultLeft aligned by default

3. Why do we use the <caption> element?

The <caption> element provides a title for a table.

Example:

<table>

    <caption>

        Student Information

    </caption>

</table>

This improves readability and accessibility.

4. What is colspan?

colspan merges two or more columns into a single cell.

Example:

<th colspan="2">

Student Details

</th>

5. What is rowspan?

rowspan merges multiple rows into a single cell.

Example:

<td rowspan="2">

IT Department

</td>

6. Why do we use <thead>, <tbody>, and <tfoot>?

These elements divide a table into logical sections.

  • <thead> → Header
  • <tbody> → Main data
  • <tfoot> → Summary

They improve:

  • Accessibility
  • Readability
  • CSS styling
  • JavaScript manipulation

7. When should HTML tables be used?

Tables should only be used for displaying tabular data such as:

  • Student results
  • Employee records
  • Product prices
  • Timetables
  • Reports
  • Invoices

They should not be used for designing webpage layouts.

8. Can tables contain images and links?

Yes.

Table cells can contain:

  • Images
  • Hyperlinks
  • Buttons
  • Forms
  • Icons
  • Videos

Example:

<td>

    <a href="profile.html">

        View Profile

    </a>

</td>

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

Related Posts

Scroll to Top