Sometimes, you need a little more flexibility in your HTML5 table design. Take a look at a page from an evil overlord's daily planner. Being an evil overlord is clearly a complex business. From a code standpoint, the items that take up more than one cell are the most interesting. Designing traps takes two mornings, and improving the hideout takes three.
Take a look at the code, and you'll see how it works:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tableSpan.html</title> </head> <body> <h1>Using colspan and rowspan</h1> <table border = "1"> <caption>My Schedule</caption> <tr> <th></th> <th>Monday</th> <th>Tuesday</th> <th>Wednesday</th> <th>Thursday</th> <th>Friday</th> </tr> <tr> <th>Breakfast</th> <td>In lair</td> <td>with cronies</td> <td>In lair</td> <td>in lair</td> <td>in lair</td> </tr> <tr> <th>Morning</th> <td colspan = "2">Design traps</td> <td colspan = "3">Improve Hideout</td> </tr> <tr> <th>Afternoon</th> <td>train minions</td> <td>train minions</td> <td>train minions</td> <td>train minions</td> <td rowspan = "2">world domination</td> </tr> <tr> <th>Evening</th> <td>manaical laughter</td> <td>manaical laughter</td> <td>manaical laughter</td> <td>manaical laughter</td> </tr> </table> </body> </html>
The secret to making cells larger than the default is two special attributes: and .
How to span multiple columns
The morning activities tend to happen over several days. Designing traps will take both Monday and Tuesday morning, and improving the hideout will occupy the remaining three mornings. Take another look at the Morning row; here's how this is done:
<tr> <th>Morning</th> <td colspan = "2">Design traps</td> <td colspan = "3">Improve Hideout</td> </tr>
The Design Traps cell spans over two normal columns. The attribute tells how many columns this cell will take.
The Morning row still takes up six columns. The is one column wide, like normal, but the Design Traps cell spans two columns and the Improve Hideout cell takes three, which totals six columns wide. If you increase the width of a cell, you need to eliminate some other cells in the row to compensate.
How to span multiple rows
A related property — — allows a cell to take up more than one row of a table. Look back at the Friday column, and you'll see the World Domination cell takes up two time slots. (If world domination was easy, everybody would do it.) Here's the relevant code:
<tr> <th>Afternoon</th> <td>train minions</td> <td>train minions</td> <td>train minions</td> <td>train minions</td> <td rowspan = "2">world domination</td> </tr> <tr> <th>Evening</th> <td>maniacal laughter</td> <td>maniacal laughter</td> <td>maniacal laughter</td> <td>maniacal laughter</td> </tr>
The Evening row has only five entries because the World Domination cell extends into the space that would normally be occupied by a pair.
Sketch out what you want to accomplish first.