Using Tables >> Inner Tables - (PART_25)

Topic:  How to create tables inside table columns?  How to control space between table cells?

Explanation:

Table inside table: Many a times we will be using table inside tables Now we will create two row with three columns. The 2nd row, 2nd column will be split again to a table with two rows, two cols. Also we will be using the attributes cellpadding and cellspacing to handle table space. 

Example Code:
<table border=1 width=80% height=30% align=center cellpadding=1 cellspacing=1>
<tr height=30%>
<td>
First Row
</td>
<td>
First Row
</td>
<td>
First Row
</td>
</tr>
<tr height=70%>
<td>
Second Row
</td>
<td >

<table bgcolor=yellow border=1 width=80% height=80%>
<tr >
<td> Inner Table </td>
<td> Inner Table </td>
</tr>
<tr >
<td> Inner Table </td>
<td> Inner Table </td>
</tr>
</table> 
</td>
<td>
Second Row
</td>
</tr>
</table>


Result:

First Row	First Row	First Row
Second Row	Inner Table Inner Table Inner Table Inner Table	Second Row

Cellpadding and Cellspacing: The space and padding can be controlled by using the attributes cellpadding and cellspacing.

Usage:

<table border=0 bgcolor="#776655" width=80% height=150 align=center cellpadding=0 cellspacing=0> 

The above table can be made more elegant by changing the colors and borders and controlling cellspacing and cellpadding.

Result:

First Row	First Row	First Row
Second Row	1 2 3 4	Second Row