22 min read
Merging Cells: colspan and rowspan
Make cells span several columns or rows to build a serving-size chart and a product catalogue grouped by category.
colspan: Across Columns
A heading across three columnsHTML
<table> <tr> <th colspan="3">Afternoon tea sets</th> </tr> <tr> <th>Set</th> <th>Includes</th> <th>Price (LKR)</th> </tr> <tr> <td>Classic</td> <td>Pot of tea, love cake</td> <td>1,100</td> </tr></table>What the browser shows
colspan="3" makes one cell as wide as three columns. That row therefore has only one cell instead of three.
rowspan: Down Rows
A product catalogue grouped by categoryHTML
<table> <tr> <th>Category</th> <th>Item</th> <th>Price (LKR)</th> </tr> <tr> <td rowspan="2">Cakes</td> <td>Love cake</td> <td>550</td> </tr> <tr> <td>Chocolate Swiss roll</td> <td>480</td> </tr> <tr> <td rowspan="2">Short eats</td> <td>Kokis (four)</td> <td>400</td> </tr> <tr> <td>Vegetable roti</td> <td>250</td> </tr></table>What the browser shows
rowspan="2" makes the "Cakes" cell two rows tall. In the next row you leave that column out — it is already filled — so that row only has two cells.
Both Together: a Serving-Size Chart
Two header rowsHTML
<table> <caption>Serving sizes</caption> <thead> <tr> <th rowspan="2">Size</th> <th colspan="2">Amount</th> <th rowspan="2">Extra charge (LKR)</th> </tr> <tr> <th>Cups</th> <th>Millilitres</th> </tr> </thead> <tbody> <tr> <td>Cup</td> <td>1</td> <td>200 ml</td> <td>0</td> </tr> <tr> <td>Small pot</td> <td>2</td> <td>450 ml</td> <td>350</td> </tr> <tr> <td>Large pot</td> <td>4</td> <td>900 ml</td> <td>750</td> </tr> </tbody></table>What the browser shows
What the browser shows
Try it: Remove colspan="2" and see the row break. Then try making "Tea tasting" span two rows with rowspan="2" (and remove the Sunday afternoon cell).
Practice
What does colspan="2" do?
More lessons in HTML · Next: Forms and Text Inputs · Previous: HTML Tables