Tables :
Merging Cells








Tables seem to have no limits. To get the most out of tables, it's best to know everything about them.

Merging table cells can be very useful at times.
Here is an example of a table with merged cells:

This cell is merged with one on the right
Normal Cell This cell is merged with the one below it
Normal Cell


This is the code used to create the above example:
<table width="300" border="1" cellpadding="3" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td colspan="2">This cell is merged with one on the right</td>
</tr>
<tr>
<td>Normal Cell</td>
<td rowspan="2">This cell is merged with the one below it</td>
</tr>
<tr>
<td>Normal Cell</td>
</tr>
</table>


As you can see, the rowspan and colspan attributes were used to merge cells into missing cells, thus giving the effect of merging. You can learn more from EchoEcho's HTML Tables Tutorial.

Too much merging can create difficult to read code and editing it can become very tedious. Furthermore, it is difficult to control the height of normal cells that are next to merged cells.

Another powerful alternative is nesting tables inside other tables...


 << PREVIOUS
READ MORE >>  
















DEVELOPER TIP!





     "Better Than Books - As Easy As It Gets!"