CreateaFreeWebsite

How to use Colspan in HTML Tables

Table #1Webster defines a column as: a vertical division of typed or printed lines on paper.

In Figure #1 shown below we have divided a rectangle into 9 equal columns and colored them red and white.

columns
Figure #1

The code:

 
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

colspan is an attribute of the <td> tag. It tells the browser how many columns one cell of a row should span. It is used with multi row tables divided into multiple columns.

In Figure #2 shown below we illustrate the concept with a green row that spans 7 columns and a blue row that spans 5 columns.

Figure #2

Simplified code green:

 

<tr>
<td colspan="7"></td>
<td>Cell 8</td>
<td>Cell 9</td>
</tr>

Simplified code blue:

 
<tr><td colspan="5"></td>
<td>Cell 6</td>
<td></td>
<td></td>
<td></td>
</tr> 

Responsive Table