CARA MEMBUAT TABEL DIDALAM TABEL HTML

Membuat tabel di dalam tabel HTML mungkin terdengar rumit, tetapi sebenarnya sangat sederhana bila kamu tahu bagaimana caranya. Tabel di dalam tabel, atau nested table, seringkali digunakan untuk mengatur layout situs web atau untuk menampilkan informasi terstruktur dalam tabel. Mari kita langsung saja ke pembahasan bagaimana cara membuatnya.

Langkah 1: Membuat Tabel Utama

Pertama-tama, kita harus membuat tabel utama. Tabel HTML diawali dengan tag <table> dan diakhiri dengan tag penutup </table>. Untuk membuat baris baru di dalam tabel, kita menggunakan tag <tr>, dan untuk membuat sel atau kolom di dalam baris, kita menggunakan tag <td>.

Berikut adalah contoh tabel sederhana:

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

Langkah 2: Membuat Tabel Dalam Tabel

Selanjutnya, kamu perlu membuat tabel kedua di dalam sel tabel utama. Seperti sebelumnya, kita akan menggunakan tag <table>, <tr>, dan <td>. Namun kali ini, kita akan memasukkannya di dalam tag <td> dari tabel utama.

Berikut contohnya:

<table>
  <tr>
    <td>
      <table>
        <tr>
          <td>Kolom 1 Baris 1 Tabel Dalam</td>
          <td>Kolom 2 Baris 1 Tabel Dalam</td>
        </tr>
        <tr>
          <td>Kolom 1 Baris 2 Tabel Dalam</td>
          <td>Kolom 2 Baris 2 Tabel Dalam</td>
        </tr>
      </table>
    </td>
    <td>Kolom 2 Baris 1</td>
  </tr>
  <tr>
    <td>Kolom 1 Baris 2</td>
    <td>Kolom 2 Baris 2</td>
  </tr>
</table>

Menambahkan Border

Karena default dari tabel HTML adalah tanpa border, kamu mungkin akan menemukan kesulitan untuk melihat tabel di dalam tabel. Kamu bisa menambahkan border dengan menggunakan atribut border di dalam tag <table>.

Berikut adalah contoh tabel dengan border:

<table border="1">
  <tr>
    <td>
      <table border="1">
        <tr>
          <td>Kolom 1 Baris 1 Tabel Dalam</td>
          <td>Kolom 2 Baris 1 Tabel Dalam</td>
        </tr>
        <tr>
          <td>Kolom 1 Baris 2 Tabel Dalam</td>
          <td>Kolom 2 Baris 2 Tabel Dalam</td>
        </tr>
      </table>
    </td>
    <td>Kolom 2 Baris 1</td>
  </tr>
  <tr>
    <td>Kolom 1 Baris 2</td>
    <td>Kolom 2 Baris 2</td>
  </tr>
</table>

Begitulah cara membuat tabel di dalam tabel HTML. Kamu dapat menyesuaikan jumlah baris, kolom, dan data sesuai keperluan. Selamat mencoba!