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