Cara membuat Tabel dalam Tabel pada HTML

Advertisement

Rekomendasi

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.

Berikutnya : Membuat Desain Halaman Web dengan Konsep Tabel>>