HTML Colspan Attribute

Definition

The colspan attribute specifies the number of columns in a <table> element the <td> cell extends.

Applicable Elements

The colspan Attribute can be used with the following elements:

• <td>
• <th>

HTML <td> colspan Attribute

A <td> element represents a standard data cell in a table.

The colspan attribute, when used with the <td> element, specifies the number of cells the <td> element spans.

Syntax

<td colspan="3">Cell</td>

Usage

• The colspan attribute takes a value between 1 and 1000, representing the number of columns the cell should span.
• The attribute must not be used to overlap cells.

Values

Values can include:

• A positive integer greater than 0 and less than or equal to 1000.

Examples

The following example shows the use of the colspan attribute on a <td> element:

<table>
  <caption>
    Invoice
  </caption>
  <tr>
    <th>Item</th>
    <th>Qty.</th>
    <th>Cost</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Biscuits</td>
    <td>2</td>
    <td>17.99</td>
    <td>35.98</td>
  </tr>
  <tr>
    <td colspan="3">Total</td>
    <td>653.64</td>
  </tr>
</table>

HTML <th> colspan Attribute

A <th> element represents a table cell used for a heading. The exact nature of the heading is determined by the scope and header attributes.

The colspan attribute, when used with the <th> element, specifies the number of cells the <th> element spans.

Syntax

<th colspan="3">Cell</th>

Usage

• The colspan attribute takes a value between 1 and 1000, representing the number of columns the cell should span.
• The attribute must not be used to overlap cells.

Values

Values can include:

• A positive integer greater than 0 and less than or equal to 1000.

Examples

The following example shows the use of the colspan attribute on several <th> elements:

<table>
 <caption>Car Prices</caption>
 <thead>
   <tr>
     <th>Model</th>
     <th>Price</th>
   </tr>
 </thead>
 <tbody>
   <tr>
     <th colspan="2">BMW</th>
   </tr>
   <tr>
     <td>320d</td>
     <td>$30,000</td>
   </tr>
   <tr>
     <td>530d</td>
     <td>$50,000</td>
   </tr>
 </tbody>
 <tbody>
   <tr>
     <th colspan="2">Ford</th>
   </tr>
   <tr>
     <td>Fiesta</td>
     <td>$15,000</td>
   </tr>
   <tr>
     <td>Mondeo</td>
     <td>$32,000</td>
   </tr>
 </tbody>
</table>

Specification

The colspan HTML specification for each of the following elements is below:

• td, th
  • HTML Living Standard Specification

Browser Support

The colspan attribute has the following browser support:

Desktop

Mobile