How do you merge two table cells horizontally using HTML?
How to merge two table cells horizontally in HTML, including code and best practices.
✅ How Do You Merge Two Table Cells Horizontally in HTML?
To merge two or more table cells horizontally, you use the colspan attribute inside the <td> (table data) or <th> (table header) tag.
⭐ Key Concept
👉 colspan="2" merges two cells horizontally
👉 colspan="3" merges three cells horizontally
👉 Must be used inside <td> or <th> only.
When you apply colspan, the selected cell will stretch across multiple columns, combining them into one wider cell.
🧩 Basic Example (Merging 2 Cells Horizontally)
<table border="1">
<tr>
<td colspan="2">Merged Cell (2 Columns)</td>
</tr>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
JavaScript✔ What happens here?
- The first row has one cell that spans two columns.
- The second row shows the normal two-column layout, so the table remains aligned.
🧩 Example: Merging Header Cells Horizontally
<table border="1">
<tr>
<th colspan="3">Employee Details</th>
</tr>
<tr>
<th>Name</th>
<th>Department</th>
<th>Age</th>
</tr>
</table>
JavaScriptThis creates a section title that spans across 3 columns.
🧩 Example: Merging Cells in the Middle of a Row
<table border="1">
<tr>
<td>Item</td>
<td colspan="2">Description (Merged)</td>
</tr>
<tr>
<td>Pen</td>
<td>Blue Ink</td>
<td>Plastic Body</td>
</tr>
</table>
JavaScriptHere, only the middle two cells are merged in the first row.
📘 Deep Explanation & Best Practices
📌 1. colspan works horizontally only
If you need to merge vertically, use rowspan.
Horizontal = colspan
Vertical = rowspan
📌 2. The number in colspan must match the number of columns you want to span
For example:
colspan="2"→ merges 2 cellscolspan="4"→ merges 4 cells
If the table has 4 columns and you use colspan="5", layout will break.
📌 3. Always keep row structure consistent
Example of wrong structure:
❌ Incorrect
<tr>
<td colspan="2">Merged</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td> <!-- adds extra column -->
</tr>
JavaScript✔ Correct structure
<tr>
<td colspan="2">Merged</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
</tr>
JavaScript📌 4. Browsers automatically adjust width
Using colspan increases the width naturally, but you can still style using:
- CSS width
- Padding
- Text alignment
📌 5. Useful for table headings, forms, invoices, and reports
colspan helps build tables like:
- Result sheets
- Invoice descriptions
- Timetables
- Multi-column headers
- Summary rows
📌 6. Works the same with <th> and <td>
You can merge:
- header cells
- data cells
- or both
Example:
<th colspan="4">Monthly Report</th>
JavaScript🎉 Summary
To merge two table cells horizontally in HTML:


