Belajar Cara Membuat Tabel Dalam Tabel HTML
Assalamua'laikum wr.wb
Pada kali ini kita akan membahas tentang Belajar Cara Membuat Tabel Dalam Tabel HTML.
Bagi teman-teman yang belum mempelajari bagaimana cara membuat list kombinasi silahkan kunjungi Belajar HTML Cara Membuat List Kombinasi HTML
Tujuan dari pembahasan kali ini adalah teman-teman dapat memahami apa itu tabel dalam tabel dan menyajikan tabel dalam tabel pada html.
Langsung saja kita lanjut ke pembahasannya, Silahkan teman-teman simak cara Cara Membuat Tabel Dalam Tabel HTML.
Langkah pertama yang harus teman-teman persiapkan adalah
1. Tabel di dalam tabel (tabel bersarang)
Silahkan teman-teman perhatikan table berikut ini:
2.Selanjutnya buatlah halaman web sebagai berikut (pemberian Style pada tabel):
Tambahkan kode diatas pada file yang telah kita buat tadi di bagian head lalu silakan simpan dengan nama tabel2.html. Apabila kita benar dalam penulisannya maka pada web browser akan tampil sebagai berikut:
3.Silahkan buat halaman web sebagai berikut (menghilangkan jarak pada border):
Nah untuk menggilangkan jarak dari setiap cell, kita pada menggunakan properti diatas dengan menambah property collapse. lalu save as file tersebut dengan nama table3.html. Apabila penulisannya benar nama akan tampil seperti gambar berikut:
Setelah teman-teman belajar mengenai pembahasan diatas, tibalah kita akan membuat table di dalam table
4.Silahkan buat web sebagai berikut (tabel dalam tabel)
Pada kali ini kita akan membahas tentang Belajar Cara Membuat Tabel Dalam Tabel HTML.
Bagi teman-teman yang belum mempelajari bagaimana cara membuat list kombinasi silahkan kunjungi Belajar HTML Cara Membuat List Kombinasi HTML
Tujuan dari pembahasan kali ini adalah teman-teman dapat memahami apa itu tabel dalam tabel dan menyajikan tabel dalam tabel pada html.
Langsung saja kita lanjut ke pembahasannya, Silahkan teman-teman simak cara Cara Membuat Tabel Dalam Tabel HTML.
Langkah pertama yang harus teman-teman persiapkan adalah
- PC/Laptop
- Aplikasi text Editor seperti (notepade++, sublime, dll).
- Web Browser
1. Tabel di dalam tabel (tabel bersarang)
Silahkan teman-teman perhatikan table berikut ini:
Teman-teman dapat melihat bahwa di kolom “Email account note” ada table berisi tentang catatan jenis email. Jadi pada tabel tersebut ada didalam tabel atau istilahnya 'nested table' atau kita bisa menyebutnya tabel bersarang.
Teknik tabel bersarang adalah suatu cara untuk mengahasilkan layout tabel yang kompleks tampa kita harus membuat table yang kompleks, langkah sederhananya adalah membuat tabel di dalam sebuah sel (<td></td>).
Teknik tabel bersarang adalah suatu cara untuk mengahasilkan layout tabel yang kompleks tampa kita harus membuat table yang kompleks, langkah sederhananya adalah membuat tabel di dalam sebuah sel (<td></td>).
2. Langkah pembuatan
Percobaan pertama
1.Silahkan buat web sebagai berikut (tHead, tBody dan tFoot):
- Silahkan buat folder pada drive D:, dengan nama folder nama anda. Misal: latihan_namaSiswa.
- Buatlah subfolder praktikum4 di dalam folder yang telah kita buat sebelumnya.
- Silahkan buka aplikasi teks editor kesayangan kita seperti notepade++/sublime sebegai web editor.
- Simpan elemen-element tersebut dalam dokumen HTML dengan format .html.
- Selanjutnya kita jalankan masing-masing contoh elemen struktur berikut dengan menggunakan web browser.
Percobaan pertama
1.Silahkan buat web sebagai berikut (tHead, tBody dan tFoot):
<html>
<head><title>Header Body dan
Footer</title></head>
<body>
<table border="1" width="600px">
<caption>Contoh Penggunaan Header,
Body dan Footer</caption>
<thead>
<tr bgcolor="lightblue">
<th>No</th>
<th>Nama
Barang</th>
<th>Harga</th>
</tr>
</thead>
<tfoot>
<tr
bgcolor="gray">
<td
colspan="2">Total Harga</td>
<td>Rp. 150.000</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>Mouse</td>
<td>Rp.40.0000</td>
</tr>
<tr>
<td>2</td>
<td>Keyboard</td>
<td>Rp.50.0000</td>
</tr>
<tr>
<td>3</td>
<td>Headset</td>
<td>Rp.60.0000</td>
</tr>
</tbody>
</table>
</body>
</html>
Silahkan simpan kode HTML diatas dengan nama tabel1.html lalu buka hasilnya dengan web browser. Apabila kita benar dalam penulisannya maka pada web browser akan tampil seperti gambar berikut:
<html><head> <title>Header Body dan Footer</title> <style> table{ border:1px solid #c6c6c6; } </style></head>
</html>
Tambahkan kode diatas pada file yang telah kita buat tadi di bagian head lalu silakan simpan dengan nama tabel2.html. Apabila kita benar dalam penulisannya maka pada web browser akan tampil sebagai berikut:
<html><head> <title>Header Body dan Footer</title> <style> table, tr, td{ border:1px solid #c6c6c6; border-collapse: collapse; } </style></head></html>
Nah untuk menggilangkan jarak dari setiap cell, kita pada menggunakan properti diatas dengan menambah property collapse. lalu save as file tersebut dengan nama table3.html. Apabila penulisannya benar nama akan tampil seperti gambar berikut:
4.Silahkan buat web sebagai berikut (tabel dalam tabel)
Silahkan Ketik dan simpan kode diatas dengan nama tabel4.html, lalu teman-teman buka hasilnya dengan menggunakan web browser. Apabila penulisannya benar maka akan tampil seperti gambah dibawah ini.
Selamat mencoba... bagi teman-teman yang menemukan error silahkan berikan komentarnya, Semoga bermanfaat :)
