HTML colspan Merging Table cells

HTML Colspan Merging Table Cells: 

HTML colspan Merging Table cells: While dealing with tables, at times we need to merge cells for manipulation of data and its better presentation. Word processors like MS office Word and Open Office suite does provide easy to use tools to merge and unmerge table cells. In HTML, we can merge cells across different columns using colspan. Below is a sample table with merged cells applying colspan. We shall create the same table and merge cells with colspan.

HTML colspan

<table border = “1”>










Code explanation: In above code, we have created a table with one row and five table headings i.e.

<tr>: begins the table row.

<th>: is used for table heading.

</th>: closes the table heading.

</tr>: marks the close of table row.


Now add the second row that shall contain data cells.


Code for HTML Data Cells:



        <td >B</td>


       <td >B</td>

       <td >C</td>


Code Explanation: We have created our second row within the <tr></tr> tags. There are 5 data cells inside the <td></td> tags. The first data cell contains data “A” whereas the next four cells have “B” as data in them while the last one has “C” as data value. The result of above code can be seen below:

My first html colspan