Tables :
Merging Cells
-  
- Send Page To Friend 








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 >>  







Got unanswered questions related to this page?

Visit the Talk Back Page and post your questions!







DEVELOPER TIP!





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