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

Step 1: Let us create a table first with header values.

<table border = “1”>

<tr>

        <th>Pakistan</th>

        <th>Afghanistan</th>

        <th>Iran</th>

        <th>KSA</th>

        <th>UAE</th>

       

      </tr>

</table>

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:

<tr>

        <td>A</td>

        <td >B</td>

        <td>B</td>

       <td >B</td>

       <td >C</td>

      </tr>

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

Let us now try to merge the three cells having common data value i.e. “B”.

 

Step 2: We shall now modify the HTML code for applying colspan:

Modified HTML Code

Actual HTML Code

<tr>

        <td>A</td>

        <td colspan = “3”>B</td>

        <td>C</td>

</tr>

 

<tr>

     <td>A</td>

        <td >B</td>

        <td>B</td>

       <td >B</td>

       <td >C</td>

   </tr>

 

We have asked HTML to expand the cell 2 upto cell 4 i.e. from Afghanistan to KSA. The output of above code in web browser would be something like:

HTML colspan explained


 

Leave a Reply