Inner Tables
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 :
<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>
<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 |
| 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 |
| Second Row |
