Cara Pembuatan Tabel dalam Tabel
1. Tabel di dalam Tabel (Tabel bersarang)
Coba
perhatikan gambar tabel berikut ini :
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>
|
Hasilnya
adalah sebagai berikut :
Trik
untuk tabel bersarang adalah untuk selalu menutup tag tabel dalam sebelum
menutup sel tabel luar.
0 Response to "Cara Pembuatan Tabel dalam Tabel"
Post a Comment