1. Tabel di dalam Tabel (Tabel bersarang)
Dapat
kita lihat bahwa di kolom “Email account note” ada table berisi tentang catatan
jenis email. Jadi ada tabel di dalam tabel atau istilahnya “nested table” atau tabel bersarang.
Dalam
penulisan HTML “tabel bersarang” ini adalah dengan menuliskan HTML Tabel di
dalam sebuah sel dari tabel, letaknya adalah pada <td>….</td>,
seperti berikut ini :
|
<table>
<tr>
<td>data baris 1 kolom 1</td>
<td> <table>
<tr>
<td>tabel ke 2</td>
<td>tabel ke 2</td>
</tr>
</table></td>
</tr>
</table>
|
Teknik tabel bersarang
adalah salah satu cara untuk menghasilkan layout tabel yang kompleks tanpa
membuat tabel yang sangat kompleks. Sehingga ketika harus membuat tabel yang
kompleks, maka cara sederhananya adalah membuat tabel di dalam sebuah sel
(<td></td>).
Berikut ini contoh
langkah-demi langkah :
·
Buatlah
tabel dengan 2 kolom dan 2 baris. HTML tag-nya adalah sebagai berikut :
|
<table
border=1>
<tr>
<td>kolom 1 baris 1</td>
<td>kolom 2 baris 1</td>
</tr>
<tr>
<td>kolom 1 baris 2</td>
<td>kolom 2 baris 2</td>
</tr>
</table>
|
·
Tentukan sel dimana kita
ingin menempatkan tabel bersarang. Kita akan menaruh di kolom 2 baris 2.
·
Ganti teks dalam sel itu
dengan tabel kedua. HTML akan terlihat seperti ini
|
<table border=1>
<tr>
<td>kolom 1 baris 1</td>
<td>kolom 2 baris 1</td>
</tr>
<tr>
<td>kolom 1 baris 2</td>
<td>
<table border=1>
<tr>
<td>kolom 1 baris 1</td>
<td>kolom 2 baris 1</td>
</tr>
<tr>
<td>kolom 1 baris 2</td>
<td>kolom 2 baris 2</td>
</tr>
</table>
</td>
</tr>
</table>
|
