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: