Merge HTML Table Cells with rowspan:

Merge HTML Table Cells with rowspan: Though tables are handy, yet they require some skill to make them presentable and beautifully laden with data. HTML provides us a variety of ways to play with tables and their data cells. One of them is rowspan. Using rowspan one can merge data cells below. We can merge as many cells as we like. Let us begin with a sample table (placed below) and then try merging its cells.

Step 1: Creating an HTML table with rowspan:

We shall initiate with a simple html table provides information regarding countries. Our table will have three rows and six columns. One column for “Time” while others for Country names and country score. Our first column shall be our table heading and remaining two shall contain data score narrated as “A”, “B” and “C”.

Let us start building our table:

<table> </table>

Then add three table rows i.e. one heading and two data rows:

<table> <tr></tr> <tr></tr> <tr></tr> </table>

Now insert heading data in the first row of our table:

<tr> <th>Time</th>         <th>Pakistan</th>         <th>Afghanistan</th>         <th>Iran</th>         <th>KSA</th>         <th>UAE</th> </tr>

Let us see the result in our browser:

This is the first row of our table that contains headings.

Let us now insert data in our table’s 2^nd and 3^rd row: note that we have asked HTML to spread rows to 2 and show data as “B”.

<tr style=”color:blue”>          <td>Day</td>         <td rowspan = “3”>B</td>        <td>B</td>        <td>B</td>        <td >B</td>        <td >C</td>       </tr>                                              <tr style=”color:blue”>                                                        <td>Night</td>           <td>A</td>         <td >B</td>         <td>B</td>        <td >C</td>       </tr>

Output of the above code is displayed thus in the browser: