Tell a Friend About Our Cool Software
Chapter 4: Merging Cells
The tables I have presented so far have a standard structure in which each row has the same number of cells as any other row, and each column has the same number of cells as any other column. When you need more flexibility in your table layout you can merge cells, combining two or more adjacent cells into a single cell. The resulting merged cell can span two or more original cells horizontally, vertically, or both.
You create merged cells by using either or both of the following two attributes in a <td> tag:
- colspan: set to the number of cells to be spanned horizontally.
- rowspan: set to the number of cells to be spanned vertically.
<table border="1" cellpadding="5" width="100%">
<tr>
<td width="50%" rowspan="4">Merged cell</td>
<td width="50%">Original cell</td>
</tr>
<tr>
<td width="50%">Original cell</td>
</tr>
<tr>
<td width="50%">Original cell</td>
</tr>
<tr>
<td width="50%">Original cell</td>
</tr>
</table>
Figure 4-6. A table with a cell that is merged vertically over four rows.
When you look at the HTML code for this table, please note the following. The first <tr> tag contains two <td> tags, as you would expect. The other three <tr> tags, however, each contain only a single <td> tag. This is because the top left cell is merged down into these three rows, so they only need one additional cell to make up the overall two column structure of the table.
Next, let's look at an example of merging horizontally. The principle is the same but the details are slightly different. Here's the HTML code to define the table shown in Figure 4-7.
<table border="1" cellpadding="5" width="90%">
<tr>
<td width="33%">Original cell</td>
<td width="33%">Original cell</td>
<td width="34%">Original cell</td>
</tr>
<tr>
<td width="33%">Original cell</td>
<td width="67%" colspan="2">Merged cell</td>
</tr>
<tr>
<td width="33%">Original cell</td>
<td width="33%">Original cell</td>
<td width="34%">Original cell</td>
</tr>
</table>
Figure 4-7. A table with a cell that is merged horizontally over two
columns.
Finally, we'll look at a table that contains a cell that is merged both vertically and horizontally. This requires including both the colspan and rowspan attributes in the <td> tag of the merged cell. Here's the HTML; the table is shown in Figure 4-8.
<table border="1" cellpadding="5" width="90%">
<tr>
<td width="25%">Original cell</td>
<td width="25%">Original cell</td>
<td width="25%">Original cell</td>
<td width="25%">Original cell</td>
</tr>
<tr>
<td width="25%">Original cell</td>
<td width="50%" colspan="2" rowspan="2">Merged cell</td>
<td width="25%">Original cell</td>
</tr>
<tr>
<td width="25%">Original cell</td>
<td width="25%">Original cell</td>
</tr>
<tr>
<td width="25%">Original cell</td>
<td width="25%">Original cell</td>
<td width="25%">Original cell</td>
<td width="25%">Original cell</td>
</tr>
</table>
Figure 4-8. Merging a cell both vertically and horizontally.
When creating merged cells, the most important thing to remember is that
you must reduce the number of cells--the number of <td> tags--in the
rows and columns that the merged cell is being merged into. While
browsers are usually pretty forgiving in dealing with less-than-perfect
code, you may get unpredictable results if you ignore this warning.
CoffeeCup Software started in a real Coffee House 1996. Our first program was the HTML Editor. Over the last 10 years we have created a lot more Web Design & Flash Software. Our philosophy has always been to create software and services so you can make better Websites. We are dedicated to helping you by offering extraordinary support so we can succeed together. Consider us a partner and a friend, because we really are about Fresh Software and Warm People.
