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>

✔ 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>

This 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>

Here, 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 cells
• colspan="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>

✔ Correct structure

<tr>
  <td colspan="2">Merged</td>
</tr>
<tr>
  <td>One</td>
  <td>Two</td>
</tr>

📌 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>

🎉 Summary

To merge two table cells horizontally in HTML:

👉 Use colspan inside <td> or <th>

👉 Example: <td colspan="2">Merged</td>

👉 Used for creating wide cells and combined headings.