Cara Membuat Tabel di Dalam Tabel Dengan Benar di HTML
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>
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.
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.
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
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
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
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