Creating a table in HTML is very simple. First, you need to understand four basic HTML table elements.
<table> = Complete Table <tr> = Table Row <th> = Heading Cell <td> = Data Cell1. The Most Basic HTML Table
Suppose you want to create this table:
| Name | Age | City |
|---|---|---|
| Rahul | 18 | Delhi |
| Aman | 19 | Agra |
The HTML Code
<tr> creates a table row.
<th> creates a heading cell.
<td> creates a normal data cell.
2. Understanding the Code Line by Line
Step 1: Start the Table
This starts the HTML table.
Step 2: Start a Row
This starts one table row.
Step 3: Create Heading Cells
These create three heading cells.
Step 4: End the Row
This closes the current table row.
Step 5: Create Normal Data Cells
This creates one row containing three normal data cells.
3. The Easiest Way to Understand a Table
Suppose a table has 3 columns and 4 rows. Think about its structure like this:
Inside each <tr>, every <td> or <th> represents one cell.
4. Table With Headings
If the first row contains headings, use <th>.
| Student | Marks |
|---|---|
| Rahul | 85 |
| Aman | 90 |
5. Table With Only Normal Cells
If there are no headings, you can use <td> for all cells.
That means 2 rows and 2 columns.
6. When Do We Use colspan?
colspan is used when one cell needs to cover multiple columns horizontally.
| Student Information | |
|---|---|
| Name | Marks |
| Rahul | 80 |
Here, Student Information covers two columns.
7. When Do We Use rowspan?
rowspan is used when one cell needs to cover multiple rows vertically.
| Name | Subject | Marks |
|---|---|---|
| Rahul | English | 80 |
| Maths | 90 |
8. The Most Important Rule
colspan
Left → Right
One cell occupies multiple columns.
rowspan
Top → Bottom
One cell occupies multiple rows.
9. Easy Memory Trick
COLspan
Think: COL = Column
ROWspan
Think: ROW = Row
10. Complete Basic Formula for Creating a Table
Whenever you need to create an HTML table, start with this basic structure:
Then add more rows and cells according to the table shown in the question.
11. Think of an HTML Table as Boxes
The easiest way to understand an HTML table is to imagine that you are creating boxes.
| Box | Box |
| Box | Box |
12. Understanding colspan Visually
| Box | |
| Box | Box |
The top box occupies two columns.
13. Understanding rowspan Visually
| Box | Box |
| Box |
The left box occupies two rows.
14. How to Solve “Write Code to Produce the Following HTML Table”
When you see this question in an examination:
Do not immediately start writing code. First examine the table carefully.
Step 1 — Count the Rows
Determine how many horizontal rows are present.
Step 2 — Count the Columns
Determine how many vertical columns are present.
Step 3 — Identify Headings
Determine which cells are headings.
Step 4 — Identify Normal Data
Determine which cells contain ordinary information.
Step 5 — Look for Merged Cells
Does any cell extend downward?
Does any cell extend sideways?
Step 6 — Check the Borders
If the question shows borders, make the table borders visible.
Step 7 — Write the HTML
Create the table, then create its rows, and finally create the heading and data cells.
15. Important Difference Between HTML Table Elements
| Element | Purpose |
|---|---|
| <table> | Creates the complete table |
| <tr> | Creates a table row |
| <th> | Creates a heading cell |
| <td> | Creates a normal data cell |
| rowspan | Makes a cell span multiple rows |
| colspan | Makes a cell span multiple columns |
16. Common Mistakes
❌ Mistake 1 — Confusing rowspan and colspan
Remember:
Across = colspan
❌ Mistake 2 — Forgetting a Row
If the question contains four rows, your HTML structure should represent all four rows.
❌ Mistake 3 — Adding an Extra Cell After rowspan
If a cell already occupies two rows, do not create another cell for the same merged position in the next row.
❌ Mistake 4 — Adding Extra Cells After colspan
If one cell occupies three columns, those three columns have already been occupied by that cell.
❌ Mistake 5 — Not Looking at the Diagram Carefully
The most important part of these questions is understanding the structure of the given table.
17. The Complete Concept in One Sentence
An HTML table is made using <table>, rows are created with <tr>, heading cells with <th>, normal cells with <td>, vertical merging with rowspan, and horizontal merging with colspan.
18. Final Memory Trick
TABLE → ROW → CELL
<table> → Complete table
<tr> → Row
<th> → Heading
<td> → Data
rowspan → Down
colspan → Across
🧠 Final Exam Strategy
Whenever you see:
“Write code to produce the following HTML table”
Follow this order:
Look at the table → Count rows → Count columns → Identify headings → Identify cells → Find rowspan/colspan → Write the HTML structure.