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
| Name | Marks |
|---|---|
| Rahul | 85 |
| Anjali | 92 |
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
| Name | Age | Marks |
|---|---|---|
| Rahul | 14 | 85 |
| Anjali | 15 | 92 |
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
| Monday | HTML |
|---|---|
| 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.
colspanmakes one cell cover multiple columns.rowspanmakes one cell cover multiple rows.
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.
