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.
Comments (0)