[X(C)] CSS PROPERTY VALUE of colspan
| Extras | ||
| Fuel Tank Capacity | ⛽ 32 L | ⛽ 40 L |
| Seating Capacity | 👥 5 | 👥 4–5 |
| Ground Clearance | 🛡️ ~180 mm | 🛡️ ~210 mm |
| Drive Layout | 🛞 FWD | 🛞 4×4 AllGrip Pro |
| Vehicle Type | 🏷️ City Car / Hatchback | 🏷️ Compact SUV / 4×4 |
<table>
<body>
<tr style="background-color:#dcdcff;">
<td colspan="3"><strong>Extras</strong></td>
</tr>
<tr>
<td>Fuel Tank Capacity</td>
<td>⛽ 32 L</td>
<td>⛽ 40 L</td>
</tr>
<tr>
<td>Seating Capacity</td>
<td>👥 5</td>
<td>👥 4–5</td>
</tr>
<tr>
<td>Ground Clearance</td>
<td>🛡️ ~180 mm</td>
<td>🛡️ ~210 mm</td>
</tr>
<tr>
<td>Drive Layout</td>
<td>🛞 FWD</td>
<td>🛞 4×4 AllGrip Pro</td>
</tr>
<tr>
<td>Vehicle Type</td>
<td>🏷️ City Car / Hatchback</td>
<td>🏷️ Compact SUV / 4×4</td>
</tr>
</body>
</table>
What is colspan?
colspan (short for column span) is an HTML attribute used within table cells (<td> or <th>) to allow a single cell to stretch horizontally across multiple columns.
In your example, the code uses colspan="3", which means that specific table cell will take up the horizontal width of 3 columns combined.
Breakdown of Your Code
<tr style="background-color:#dcdcff;"><td colspan="3"><strong>Extras</strong></td></tr><tr style="background-color:#dcdcff;">: This creates a table row with a light blue background color.<td colspan="3">: This creates a single table cell that spans across 3 columns.<strong>Extras</strong>: This displays the bold text "Extras" across that extended 3-column width.
Why is it used here?
In the subsequent rows of your table, every row contains 3 distinct columns of data (e.g., Feature Name, Option A, Option B).
If you didn't use colspan="3" on the "Extras" header row, the word "Extras" would only fit into the first column, leaving the remaining two columns in that row completely empty and misaligned. By using colspan="3", the "Extras" title acts as a full-width section header stretching cleanly across all data columns below it.
Comments
Post a Comment