Home / HTML / Pemograman Web

Cara Membuat Tabel di Dalam Tabel Dengan Benar di HTML

By Twin AnakIT Post a Comment

Tutorial dan Cara membuat tabel di dalam tabel html dengan benar bagi kamu yang masih belajar HTML dasar tentang membuat tabel didalam tabel pada html. Sebelumnya kamu harus benar-benar paham perbedaan dan fungsi pada tag <table>, tag <tr> dan tag <td> karena jika kita ingin membuat tabel didalam tabel html harus mengerti dimana kita memasukkan script tabel yang akan kita masukkan kedalam salah satu sel didalam tabel.


Dalam membuat tabel di dalam tabel html kita bebas menentukan di sel mana yang akan kita tempatkan tabel tersebut. Intinya kita harus tau sel yang mana perlu ditambah tabel.

Membuat Tabel Didalam Tabel di HTML

Membuat tabel didalam tabel sama halnya kita membuat tabel biasa, hanya perlu menambahkan tag-tag tabel seperti <table>, <tr>, <td> atau <th> di salah satu sel didalam tabel html

Semisal kita ingin menambahkan tabel pada salah satu sel dari yaitu tag <td>

cara membuat tabel didalam tabel didalam html dengan benar dan tepat
Gambar Membuat Tabel didalam Tabel di HTML

 Coba perhatikan baik, pada contoh membuat tabel di dalam tabel diatas sudah terdapat tabel didalam tabel, bisa dilihat bahwa dialam tag <td> dibangun lagi sebuah tabel. Mungkin anda bisa memahaminya dengan saya tandai pada gambar tersebut.

Jadi jika kita ingin menambah tabel dalam tabel, yang harus dilakukan adalah membuat tabelnya didalam tag <td> atau <th>, ini harus anda ingat. Bukan tag <tr>

Kita beralih lagi dalam contoh Cara Menambah Tabel di Dalam Tabel html dengan benar. Berikut ini adalah contoh script membuat tabel biasa di html


<html>
<head>
 <title>Cara Membuat Tabel di dalam Tabel HTML</title>
</head>
<body>
<table width="40%" border="1">
 <tr>
  <th> 1 </th>
  <th> 2 </th>
  <th> 3 </th>
  <th> 4 </th>
 </tr>
  <tr>
  <th> 5 </th>
  <th> 6 </th>
  <th> 7 </th>
  <th> 8 </th>
 </tr>
  <tr>
  <th> 9 </th>
  <th> 10 </th>
  <th> 11 </th>
  <th> 12 </th>
 </tr>
  <tr>
  <th> 13 </th>
  <th> 14 </th>
  <th> 15 </th>
  <th> 16</th>
 </tr>
</table>
</body>
</html>
Nah, hasil dari membuat tabel html diatas sebagai berikut ini.
cara membuat tabel didalam tabel di html, cara membuat tabel di dalam sel tabel di html
Gambar Membuat Tabel di HTML

Diatas adalah tabel sederhana yang mungkin bentuknya seperti biasa anda buat karena tidak ada tabel didalam tabel. Oia, saya beri menggunakan tag <th> biar tulisannya langsung bold. Anda ganti jadi <td> juga gpp, sama saja

Terus sebagai contohnya, bagaimana kalau membuat tabel didalam sel nomor 10.ingat bahwa kita menambahkan tabel harus pertimbangkan lebarnya juga.

Baik, contohnya kita ingin menambahkan tabel didalam tabel pada sel 10. 

cara menambah tabel didalam sel tabel di html. cara membuat tabel didalam tabel
Gambar Menambah Tabel di HTML

Jadi kita membuat lagi tabel bari didalam sel 10, dan memulainya sama seperti kita membuat tabel baru yaitu dengan tag <table> seperti berikut ini

menambah tabel didalam tabel di html
Gambar Membuat Menambah Tabel didalam Tabel HTML

Nah tinggal anda tambahkan atau lanjutkan seperti biasa membuat tabel. Sebagai contohnya saya tambahkan tabel dengan urutan a,b,c,d,e,f,g,h didalamnya seperti berikut ini

cara membuat tabel didalam tabel atau cara menambah tabel didalam tabel pada html
Gambar Menambah Tabel di Dalam Tabel di HTML

Atau berikut script membuat tabel didalam tabel html diatas ketika sudah ditambahkan tabel didalam tabel.


<!DOCTYPE html>
<html>
<head>
 <title>Cara Membuat Tabel di dalam Tabel HTML</title>
</head>
<body>
<table width="40%" border="1">
 <tr>
  <th> 1 </th>
  <th> 2 </th>
  <th> 3 </th>
  <th> 4 </th>
 </tr>
  <tr>
  <th> 5 </th>
  <th> 6 </th>
  <th> 7 </th>
  <th> 8 </th>
 </tr>
  <tr>
  <th> 9 </th>
  <th>
   <table width="100%" border="1" bgcolor="green">
    <tr>
     <td>a</td>
     <td>b</td>
     <td>c</td>
     <td>d</td>
    </tr>
    <tr>
     <td>f</td>
     <td>g</td>
     <td>h</td>
     <td>i</td>
    </tr>
   </table>
  </th>
  <th> 11 </th>
  <th> 12 </th>
 </tr>
  <tr>
  <th> 13 </th>
  <th> 14 </th>
  <th> 15 </th>
  <th> 16</th>
 </tr>
</table>
</body>
</html>
Maka hasil dari membuat tabel di dalam tabel html diatas sebagai berikut ini

menambah tabel didalam salah satu sel tabel didalam html sehingga akan terbentuk tabel didalam tabel
Gambar Membuat Tabel di Dalam Tabel di HTML

Nah yang warna polos adalah tabel luar, dan yang warna hijau adalah tabel didalam sebuah tabel pada html. 

Diatas adalah sebagai contoh dalam pembuatan tabel didalam tabel html, ini tergantung kebutuhan kamu dimana letak dari tabel didalam tabel yang kamu inginkan. 

Dan demikian pembahasan tentang cara membuat tabel didalam tabel html, semoga artikel ini bisa berguna dan bermanfaat bagi kamu yang masil belajar html terutama dasar membuat tabel didalam html. 

Apa Selanjutnya ?
Selanjutnya Kamu Harus Tau Cara Mempercantik Tabel HTML dengan Css agar tabel yang kamu buat menarik dan kemudian kamu juga harus tau Cara Membuat Tabel Responsif Agar Tabel tersebut nantinya tidak berantakan apabila dibuka pada layar kecil seperti Layar HP/Smartphone/sejenisnya.

Mempercantik Tabel di HTML dengan CSS
Membuat Tabel Responsif Dengan CSS di HTML

No comments for "Cara Membuat Tabel di Dalam Tabel Dengan Benar di HTML "

Post a Comment