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.
Figure #2
Simplified code green:
<tr><td colspan="7"></td><td></td><td></td></tr>
Simplified code blue:
<tr><td colspan="5"></td><td></td><td></td><td></td><td></td></tr>
Responsive Table
Free Tools and Resources
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!