How to merge table columns in HTML

To merge table columns in HTML, you can use the colspan attribute within the <td> tag.

This attribute allows you to merge cells with each other, effectively spanning across multiple columns. The example is given below:

Create a table in HTML with 3 rows and 3 columns:

Example : #

<table>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
    <td>Row 1, Column 3</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
    <td>Row 2, Column 3</td>
  </tr>
  <tr>
    <td>Row 3, Column 1</td>
    <td>Row 3, Column 2</td>
    <td>Row 3, Column 3</td>
  </tr>
</table>

Merge columns using the colspan attribute. In this example, let's merge the first two columns:

Example :#

<table>
  <tr>
    <td colspan="2">Merged Column 1 and 2</td>
    <td>Row 1, Column 3</td>
  </tr>
  <tr>
    <td colspan="2">Merged Column 1 and 2</td>
    <td>Row 2, Column 3</td>
  </tr>
  <tr>
    <td colspan="2">Merged Column 1 and 2</td>
    <td>Row 3, Column 3</td>
  </tr>
</table>

The colspan attribute specifies the number of columns a cell should span. In the example above, we set colspan="2" for the first <td> tag, indicating that it should span across two columns.

By using the colspan attribute, you can easily merge multiple table cells, improving the layout and visual presentation of your HTML tables.