HTML Table Cell Merging: Rowspan and Colspan Guide

INTRODUCTION

HTML tables are used to display data in a structured, grid-like format. They consist of rows and columns, making them useful for organizing information such as schedules, reports, and comparisons.

HTML colspan Attribute

The colspan attribute in HTML is used to merge multiple columns in a table, allowing a single cell to extend across multiple columns. This attribute is used with <td> or <th> element.

The value of colspan attribute should be an non-negative integer indicating how many columns the cell spans or extends. Its default value is 1. Any value greater than 1000 is dismissed by browsers and defaults to 1 in such case.

<th colspan=""> --text-- </th>

<td colspan=""> --text-- </td>

<table>
    <tr>
        <th colspan="2">Full Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td>30</td>
    </tr>
</table>

<table>
  <thead>
    <tr>
        <th>Fruit</td>
        <th>Price</td>
        <th>Quantity</td>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Apple</td>
        <td>$1</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Banana</td>
        <td>$0.5</td>
        <td>100</td>
    </tr>
  </tbody> 
  <tfoot>
    <tr>
        <td>Total Cost</td>
        <td colspan="2">$100</td>
        
    </tr>
  </tfoot>   
</table>

HTML rowspan Attribute

The rowspan attribute in HTML is used to merge multiple rows in a table, allowing a single cell to extend across multiple rows. This attribute is used with <td> or <th> element.

The value of rowspan attribute should be an non-negative integer indicating how many rows the cell spans or extends. Its default value is 1. The maximum value is 65534. Any value greater than 65534 defaults to 65534 in such case. If the value is set to 0, the cell will extends to the end of the table.

<th rowspan=""> --text-- </th>

<td rowspan=""> --text-- </td>

<table>
    <tr>
        <th rowspan="2">Brand</th>
        <th rowspan="2">Model</th>
        <th colspan="2">Sales</th>
    </tr>
    <tr>
        <th>2023</th>
        <th>2024</th>
    </tr>
    <tr>
        <td rowspan="2">Toyota</td>
        <td>Corolla</td>
        <td>150,000</td>
        <td>160,000</td>
    </tr>
    <tr>
        <td>Camry</td>
        <td>120,000</td>
        <td>125,000</td>
    </tr>
    <tr>
        <td rowspan="2">Ford</td>
        <td>F-150</td>
        <td>200,000</td>
        <td>210,000</td>
    </tr>
    <tr>
        <td>Mustang</td>
        <td>90,000</td>
        <td>95,000</td>
    </tr>
</table>