Modul "FORMAT TABEL DALAM HALAMAN HTML"
MODUL
FORMAT TABEL DALAM HALAMAN HTML
A. Tujuan Pembelajaran
1. Peserta didik dapat menjelaskan tag-tag HTML yang digunakan untuk membuat tabel
2. Peserta didik dapat menentukan prosedur pembuatan tabel dalam HTML
3. Peserta didik dapat menentukan penerapan format tabel dalam web
4. Peserta didik dapat menentukan prosedur pembuatan tabel dalam tabel
5. Peserta didik dapat membuat program halaman web yang menampilkan tabel
B. Materi Pembelajaran
Cara Membuat Tabel HTML dengan Tag <table>, <tr>, <td>
Untuk membuat tabel di HTML kalian bisa menggunakan 3 tag, antara
lain :
1. Tag <table> : merupakan tag utama dari table, yang digunakan
untuk memulai pembuatan tabel
2. Tag <tr> : merupakan tag yang digunakan untuk membuat baris
pada tabel
3. Tag <td> : merupakan tag yang digunakan untuk membuat
kolom di masing – masing baris pada tabel
Attribute Border di Tabel HTML
Attribute border digunakan untuk mengatur ukuran garis tepi yang ada pada tabel html, satuan yang digunakan adalah satuan pixel.
Jika kalian tidak memberikan nilai pada bagian border maka tabel akan ditampilkan tanpa memiliki garis, baik langsung kita coba ya dan
kita coba bandingkan.
Attribute Border di Tabel HTML
Attribute border digunakan untuk mengatur ukuran garis tepi yang ada pada tabel html,
satuan yang digunakan adalah satuan pixel.
Attribute Cellspacing di Tabel HTML
Attribute cellspacing digunakan untuk mengatur jarak luar antar masing masing cell.
Attribute Cellpadding di Tabel HTML
Attribute cellpadding digunakan untuk mengatur ukuran dari garis di masing masing cell
dan objek yang ada didalamnya
Attribute Rowspan dan Colspan di Tabel HTML
Kedua Attribute ini hampir memiliki fungsi yang sama, yaitu untuk menggabungkan
beberapa bagian dari tabel, lalu apa yang membedakan, mari kita bahas…
Attribute Rowspan digunakan untuk menggabungkan bagian tabel (cell) yang berada di
bawahnya atau bisa kita sederhanakan untuk menggabungkan bagian tabel secara vertical.
Attribute Colspan digunakan untuk menggbungkan bagian tabel (cell) yang berada di sebelahnya
atau bisa kita sederhanakan untuk menggabungkan bagian tabel secara horizontal.
Attribute <th> di Tabel HTML
Attribute ini digunakan untuk menggantikan tag <td> pada bagian header dari tabel, bagian
header itu biasanya adalah baris pertama yang ada pada bagian tabel, biasanya digunakan sebagai
keterangan dari data masing masing kolom. perbedaanya adalah jika kita menggunakan tag <th>
maka text akan ditampilkan dengan huruf tebal (bold) serta textnya akan berada di
tengah (center).
Tag Caption di Tabel HTML
Tag caption digunakan untuk memberikan judul dari tabel, sebenarnya kalian bisa saja langsung menuliskan judul dari tabel dengan
langsung menuliskan text yang diletakkan di atas bagian tabel, tetapi dari pihak HTML sendiri telah menyediakan pembuatan judul langsung
dengan menggunakan tag caption. Tag Caption bisa kalian letakkan setelah tag tabel pembuka dan sebelum tag <tr> untuk baris pertama.
Tag <thead>, <tbody>, dan <tfoot> di Tabel HTML
Seperti yang kalian ketahui bahwa tabel biasanya digunakan untuk menampilkan data dalam
bentuk tabel, nah jika tabel diperlukan untuk menampilkan data yang kompleks. Kalian pasti
akan membutuhkan strukutur tabel yang mudah dipahami agar ketika merubah style tabel di css
dapat lebih mudah.
Nah di HTML terdapat fitur untuk membagi strukutur tabel menjadi beberapa bagian yang akan
diwakili oleh 3 tag antara lain :
<thead></thead> : untuk mendeklarasikan bagian header dari tabel
<tbody></tbody> : untuk mendeklarasikan bagian body dari tabel
<tfoot></tfoot> : untuk mendeklarasikan bagian footer dari tabel
Tag colgroup, dan tag col di Tabel HTML
Kedua tag ini digunakan untuk mengelompokkan kolom yang kalian buat, sehingga memudahkan untuk proses set style CSS di masing
– masing kolom. Secara default jika kalian ingin memberikan warna yang berbeda di masing masing kolom, pasti kalian harus menuliskan
style di masing – masing kolom, tetapi dengan menggunakan kedua tag ini kalian dapat dengan mudah memberikan style yang berbeda di
masing – masing kolom dengan hanya memberikan style di bagian tag colnya saja.
Attribute Rules pada Tabel HTML
Attribute Rules pada tabel digunakan untuk membuat dan mengatur garis yang ada pada di
antara cell satu dengan cell lain di tabel, dalam attribute rules html memiliki 4 values antara lain :
rows (digunakan untuk menampilkan garis pada bagian baris tabel di
html)
cols (digunakan untuk menampilkan garis pada bagian kolom tabel di
html)
all (digunakan untuk menampilkan garis pada bagian baris dan kolom
tabel di html)
none (digunakan untuk mengatur agar garis pada kolom dan tabel tidak
tampil)
Mengatur Ukuran Lebar pada Bagian Tabel
Secara default ukuran lebar dari tabel ditentukan dari panjang isi di dalam tabel itu sendiri,
jadi lebar tabel akan menyesuaikan, tetapi dari HTML sendiri memiliki attribute yang memang
digunakan untuk mengatur ukuran lebar dari tabel. Attribute width dapat digunakan untuk
mengatur ukuran lebar tabel itu sendiri, satuan yang digunakan adalah satuan pixel dan juga
persen, attribute width dapat kalian gunakan pada beberapa tag antara lain :
tag table
tag th
tag td
tag col
Mengatur Ukuran Tinggi pada Bagian Tabel
Setelah di bagian sebelumnya kita sudah mengenal attribute width yang digunakan untuk mengatur lebar tabel di HTML, nah di
tutorial kali ini kita akan membahas attribute yang digunakan untuk mengatur dari tinggi tabel HTML, berbeda dengan attribute width yang
dapat digunakan di beberapa tag seperti tabel, th, td ataupun col, untuk attribute height hanya bisa digunakan di bagian tag table dan tag tr
saja. Untuk satuan yang bisa kalian gunakan hanyalah satuan pixel saja, kalian tidak dapat menggunakan satuan persen di attribute ini.
C. Latihan Praktikum
1. Ketikkan kode program di bawah ini:
Hasil tampilan :
Berikan penjelasannya:
2. Ketikkan kode program di bawah ini:
Hasil Tampilan:
Berikan penjelasannya:
3. Ketikkan kode program di bawah ini:
Hasil Tampilan:
Berikan penjelasannya:
4. Ketikkan kode program di bawah ini:
Hasil Tampilan:
Berikan penjelasannya:
D. Tugas Praktikum
1. Buatlah kode program html dengan memanfaatkan thead, tbody, dan tfoot seperti tampilan di bawah ini:
Kode Program:
Tampilan Hasil:
Berikan penjelasannya:
2. Buatlah kode program html dengan menggunakan attribute rules all dan rules none seperti tampilan di bawah ini:
Kode Program:
Tampilan Hasil:
Berikan penjelasannya:
3. Buatlah kode program html dengan menggunakan attribute width seperti tampilan di bawah ini:
Kode Program:
Tampilan Hasil:
Berikan penjelasannya: