Spanning cells

Most real-world tables have cells that stretch across two or more rows or columns in the table. In the publishing world, these cells are said to straddle the related rows and columns. Often, the straddling cells contain information relevant to straddled rows and columns, such as a common heading or shared data.

In HTML, these straddling cells are known as spanning cells. You can create spanning cells across rows or columns or both using two attributes defined for <td> and <th> tags. The colspan attribute creates a cell that spans two or more columns. The rowspan attribute creates a cell that spans two or more rows.

 Let us have this example table with a spanning row heading cell. We will add a row whose single cell spans both heading cells in the next row.

HTML Table Source Code shows sample code of HTML table emphasizing colspan attribute. 

 

<table style="border:1px solid black">
    <tr>
        <th style="border-style: solid; border-width: 1px; border-color: black"></th>
        <th  colspan="2" style="border-style: solid; border-width: 1px; border-color: black">Fruit</th>
    </tr>
    <tr>
        <th style="border-style: solid; border-width: 1px; border-color: black"></th>
        <th style="border-style: solid; border-width: 1px; border-color: black">Oranges</th>
        <th style="border-style: solid; border-width: 1px; border-color: black">Grapefruit</th>
    </tr>
    <tr>
        <th style="border-style: solid; border-width: 1px; border-color: black">Flavor</th>
        <td style="border-style: solid; border-width: 1px; border-color: black">Sweet</td>
        <td style="border-style: solid; border-width: 1px; border-color: black">Tart</td>
    </tr>
     <tr>
        <th style="border-style: solid; border-width: 1px; border-color: black">Size</th>
        <td style="border-style: solid; border-width: 1px; border-color: black">Small</td>
        <td style="border-style: solid; border-width: 1px; border-color: black">Large</td>
    </tr>
</table>

This will produce the following output:

 Output 1


Notice that the first row of this table only has two cells. The first cell is empty, lining up with the empty cell in the beginning of the second row. The next cell has the colspan attribute set to 2, causing it to span the next two cells in the next row. You can verify this by seeing that the cell containing “Fruit” spans the two cells containing “Orange” and Grapefruit.”

 We can create a similar row-spanning cell by adding an additional column to the table:

HTML Table Source Code 3.2.2 shows sample code of HTML table emphasizing rowspan attribute. 
 




<table style="border:1px solid black">
    <tr>
        <th style="border-style: solid; border-width: 1px; border-color: black"></th>
        <th style="border-style: solid; border-width: 1px; border-color: black"></th>
        <th  colspan="2" style="border-style: solid; border-width: 1px; border-color: black">Fruit</th>
    </tr>
    <tr>
        <th style="border-style: solid; border-width: 1px; border-color: black"></th>
        <th style="border-style: solid; border-width: 1px; border-color: black"></th>
        <th style="border-style: solid; border-width: 1px; border-color: black">Oranges</th>
        <th style="border-style: solid; border-width: 1px; border-color: black">Grapefruit</th>
    </tr>
    <tr>
        <th rowspan="2" style="border-style: solid; border-width: 1px; border-color: black">Feature</th>
        <th style="border-style: solid; border-width: 1px; border-color: black">Flavor</th>
        <td style="border-style: solid; border-width: 1px; border-color: black">Sweet</td>
        <td style="border-style: solid; border-width: 1px; border-color: black">Tart</td>
    </tr>
     <tr>
        <th style="border-style: solid; border-width: 1px; border-color: black">Size</th>
        <td style="border-style: solid; border-width: 1px; border-color: black">Small</td>
        <td style="border-style: solid; border-width: 1px; border-color: black">Large</td>
    </tr>
</table>


This will produce the following output

Output 2

Rowspans make things a bit more complicated. Since we are creating a new column when we insert a row-spanning cell, we have to add corresponding cells to every other row, except the rows corresponding to the spanning cell.

 Checking the HTML, we added another blank cell to the first two header rows, and the spanning cells to the third row. We did not add another cell to the first two header rows, and the spanning cell to the third row. We did not add another cell to the fourth row, since its first cell is actually the spanning cell from the preceding row. The fourth row already has four cells: the first comes from the third row, and the remaining three are explicitly defined.

You need to be careful when defining tables with multiple spanning rows and columns, as shown in the given example. Make sure you count columns carefully, ensuring that the right cells line up with the corresponding spanning cells.