How to use Colspan in HTML Tables

Webster 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.

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.

 

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

 

Free Tools and Resources

Have you found Thiings yet?.
Over 6000 Free 3D images that you can download (individually or the complete set) and use for personal or commercial projects. You have got to SEE this!!

 

Free Bullet Images, WingDings and WebDings
🔵 🔶 😀 🎈 🐝 🏀 👉 👲 💡 🍅

Have you tried our NEWEST template kit with scrolling columns?
Download Template Kit #601 - 4 Page Kit or Test Drive It!