Friday, November 18, 2016

Cara membuat Tabel dalam Tabel pada HTML

Advertisement

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

Artikel Terkait

5 komentar dari Sahabat

kalau setting rata kiri atau kanan bagaimana? terima kasih

Terima kasih sudah membagi informasinya kak

untuk merubah setting rata kenan, kiri, atau tengah gunakan tag < p align="right">(tampa sepasi didepan p) sebelum teks / paragraf, dan ahiri dengan tag < / p > (tampa sepasi ) sesudah teks / paragra. Untuk setting kanan "right" untuk setiing kiri "left" untuk setting tengah "center"

iya gan sama-sama. terima kasih atas kunjungannya

Silahkan berkomentar dengan sopan sesuai topik yang dibahas. Mohon tidak meninggalkan URL. Silahkan berkomentar dengan sopan serta sesuai topik dan dimohon untuk tidak meninggalkan link aktif.

Terima Kasih.

EmoticonEmoticon