HTML Tables

By /

A table is useful when information needs to be shown in rows and columns. For example, you could use a table to show student marks. A basic HTML table uses these tags:

  • <table> – Creates the table.
  • <tr> – Creates a table row.
  • <th> – Creates a heading cell.
  • <td> – Creates a normal data cell.

Understand HTML Tables with example.

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

    <h1>Student Marks</h1>

    <table border="1">

        <tr>
            <th>Name</th>
            <th>Marks</th>
        </tr>

        <tr>
            <td>Rahul</td>
            <td>85</td>
        </tr>

        <tr>
            <td>Anjali</td>
            <td>92</td>
        </tr>

    </table>

</body>
</html>

Output

Student Marks

NameMarks
Rahul85
Anjali92

Here:

  • <table> – Starts the table.
  • <tr> – Creates a row.
  • <th> – Creates a heading cell.
  • <td> – Creates a normal cell.
  • border="1" – Adds a simple border around the table.

We are using border="1" here so you can clearly see the rows and columns. Later, CSS is normally used to style tables.

Adding More Columns

You can create as many columns as you need. For example:

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

    <h1>Student Details</h1>

    <table border="1">

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

        <tr>
            <td>Rahul</td>
            <td>14</td>
            <td>85</td>
        </tr>

        <tr>
            <td>Anjali</td>
            <td>15</td>
            <td>92</td>
        </tr>

    </table>

</body>
</html>

Output

Student Details

NameAgeMarks
Rahul1485
Anjali1592

The first row contains the headings and the next rows contain the actual information.

Colspan

Sometimes you may want one cell to cover more than one column. For this, HTML provides the colspan attribute.

For example:

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

    <h1>Class Timetable</h1>

    <table border="1">

        <tr>
            <th colspan="2">Monday</th>
        </tr>

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

    </table>

</body>
</html>

Output

Class Timetable

Monday
HTML

The colspan="2" makes the Monday heading cover two columns. You don’t need to use colspan in every table. Use it only when you need to join columns.

Rowspan

You can also make one cell cover more than one row using rowspan.

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

    <h1>Class Timetable</h1>

    <table border="1">

        <tr>
            <th rowspan="2">Monday</th>
            <td>HTML</td>
        </tr>

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

    </table>

</body>
</html>

Output

Class Timetable

MondayHTML
CSS

Here, rowspan="2" makes the Monday cell cover two rows.

Quick Recap

  • <table> is used to create an HTML table.
  • <tr> creates a table row.
  • <th> creates a heading cell.
  • <td> creates a normal data cell.
  • Table can have multiple rows and columns.
  • colspan makes one cell cover multiple columns.
  • rowspan makes one cell cover multiple rows.

Mini Quiz

0%

HTML - QUIZ 6

1 / 5

Q1. You are creating a student marks table with Name and Marks as headings. Which type of cell should you use for Name and Marks?

2 / 5

Q2. You want to add Rahul's marks as 85 in a table. What should this information be placed in?

3 / 5

Q3. You want one table cell to cover two columns. Which attribute should you use?

4 / 5

Q4. You want the word “Monday” to cover two rows in a timetable. Which attribute should you use?

5 / 5

Q5. You are creating a table with Name, Age, and Marks. What should the first row contain?

Your score is

The average score is 0%

0%

By Wordpress Quiz plugin

Mini Project

Mini Project: Weekly Class Timetable

Question:

Create a simple weekly class timetable for a student. Use an HTML table to organize the days, subjects, and timings. Practice using rows, heading cells, data cells, colspan, and rowspan.

Requirements

  • Create a table with a border.
  • Add headings for Day, Time, and Subject using <th>.
  • Add at least three days and their class information using <td>.
  • Use <colspan> to create a heading that covers multiple columns.
  • Use <rowspan> to make one day cover more than one row.
  • Use <tr> to create separate rows for the timetable.
View Answer Code
<!DOCTYPE html>
<html>
<head>
    <title>My Class Timetable</title>
</head>
<body>

    <h1>My Class Timetable</h1>

    <table border="1">
        <tr>
            <th colspan="3">Weekly Timetable</th>
        </tr>

        <tr>
            <th>Day</th>
            <th>Time</th>
            <th>Subject</th>
        </tr>

        <tr>
            <td rowspan="2">Monday</td>
            <td>9:00 AM</td>
            <td>HTML</td>
        </tr>

        <tr>
            <td>11:00 AM</td>
            <td>Mathematics</td>
        </tr>

        <tr>
            <td rowspan="2">Tuesday</td>
            <td>9:00 AM</td>
            <td>Science</td>
        </tr>

        <tr>
            <td>11:00 AM</td>
            <td>English</td>
        </tr>

        <tr>
            <td>Wednesday</td>
            <td>9:00 AM</td>
            <td>Computer</td>
        </tr>

    </table>

</body>
</html>

Frequently Asked Questions (FAQs)

Q1. What is an HTML table?

An HTML table is used to display information in rows and columns. It is commonly used for student marks, prices, schedules, and other organized data.

Q2. What is the <table> tag in HTML?

The <table> tag is used to create an HTML table. It contains the rows, headings, and data that make up the table.

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

<th> is used for table headings, while <td> is used for normal table data. For example, Name can be a heading and Rahul can be table data.

Q4. What is the <tr> tag in HTML?

The <tr> tag is used to create a row in an HTML table. You place <th> or <td> elements inside it to add cells.

Q5. What is colspan in HTML?

The colspan attribute allows a single table cell to cover multiple columns. For example, colspan="2" makes the cell cover two columns.

Q6. What is rowspan in HTML?

The rowspan attribute allows a single table cell to cover multiple rows. For example, rowspan="2" makes the cell cover two rows.

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

Related Posts

Scroll to Top