How to combine or merge cells in an HTML table

2 years 2 months ago

You can combine two or more table cells together by using the colspan attribute in a HTML table data tag . For example, a table with three rows and three columns. If we want to combine the first two cells into one cell for second row, we should use the colspan="2" attribute for the first td tag within second tr tag.

<table>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Using the above code gives you a table similar to the table shown below. As can be seen, the first cell is using two cell spots.

     
   
     

If you want to use first three columns to merge together for first row then use colspan value to 3 as there are three columns for this table. You will get following table as shown below.

 
     
     

 

Rauf Aamir

I'm a Graphic & Web Designer with over 10 years of experience in print and web, highly motivated, creative, and eager to learn new. Able to take an idea from conception and transform it into a highly marketable end product.