Using colspan & rowspan
In the centering, we created the following table:
| Breakfast | Lunch | Dinner |
|---|---|---|
| eggs | sandwich | steak |
| migas | burger | grilled salmon |
Each of the columns has a seperate heading. It is possible for the headings to span more than one column like this:
| Brunch | Dinner | |
|---|---|---|
| eggs | sandwich | steak |
| migas | burger | grilled salmon |
Headers that span across columns
The attribute that allows you to make the first header span two columns is colspan = "2". Since we are modifying a table header, the attribute goes in the opening <th> tag:
<th colspan = "2" >
Using the working document (workingdoc) you saved in centering, try changing the first header to span three columns.
Sample Results
| Full Menu Available All Day | ||
|---|---|---|
| eggs | sandwich | steak |
| migas | burger | grilled salmon |
HTML source code:
<table class="tableLocation tableBorder tableDataAlignment">
<caption class="alignCaption">Menu for Sunday</caption>
<tr>
<th colspan="3">Breakfast</th>
</tr>
<tr>
<td>eggs</td>
<td>sandwich</td>
<td>steak</td>
</tr>
<tr>
<td>migas</td>
<td>burger</td>
<td>grilled salmon</td>
</tr>
</table>
Spanning rows
The counterpart to colspan is rowspan. Both of these attributes may be used with either a table header <th> or table data <td>. Let's build the following tables which use colspan and rowspan.
Sample Results
| Entrees | eggs | sandwich | steak |
|---|---|---|---|
| migas | burger | grilled salmon |
HTML source code:
<table class="tableLocation tableBorder tableDataAlignment">
<caption class="alignCaption">Daily Menu</caption>
<tr>
<th rowspan="2">Entrees</th>
<td>eggs</td>
<td>sandwich</td>
<td>steak</td>
</tr>
<tr>
<td>migas</td>
<td>burger</td>
<td>grilled salmon</td>
</tr>
</table>
Additional Practice
| Full Menu Available All Day | |||
|---|---|---|---|
| Entrees | eggs | sandwich | steak |
| migas | burger | grilled salmon | |
Note that in this table, you will have to have an empty <th> tag in order to accomodate the extra row header. If you are unsure how to do so, view the source of this document.
Now you are ready to proceed to Cell Padding & Spacing.
