colspan

colspan attribute

The colspan attribute in HTML is used within <td> or <th> elements to allow a table cell to span across multiple columns. This effectively merges the cells horizontally, helping to organize or simplify a table's layout. It's particularly useful for creating headers that cover several columns or for grouping related data under a common heading, improving the table's readability and structure.

Syntax

<tagname colspan="number">

Example

Here’s an example of using the colspan attribute in HTML:

<table border="1">
  <tr>
    <th colspan="3">Monthly Sales Report</th>
  </tr>
  <tr>
    <th>Product</th>
    <th>Sales</th>
    <th>Revenue</th>
  </tr>
  <tr>
    <td>Apples</td>
    <td>150</td>
    <td>$300</td>
  </tr>
</table>

Values

• number
  • The number of columns that a table cell should extend across.

Applies To

The colspan attribute can be applied to the following HTML elements.

• <td>
• <th>

Example

<table border="1">
  <tr>
    <th colspan="2">Products</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apples</td>
    <td>Bananas</td>
    <td>$1.00</td>
  </tr>
  <tr>
    <td colspan="2">Description</td>
    <td>They're delicious!</td>
  </tr>
</table>

Conclusion

The colspan attribute in HTML allows a table cell to span across multiple columns, enhancing the organization and clarity of a table. It is useful for creating headings or grouping related data. When used effectively, it improves the readability and structure of tables.