Modul 3

TABEL PADA HTML

5.1 Tabel
Untuk menyajikan informasi yang lebih menarik dan mudah
dimengerti bisa dilakukan dengan menggunakan tabel, tabel
terdiri dari baris dan kolom dimana data tersaji berdasarkan field
dan record untuk memudahkan membaca data, untuk lebih
jelasnya dapat dilihat pada gambar berikut.

Berikut contoh script dari pembuatan tabel pada HTML

Berikut adalah hasil dari script diatas:

Penjelasan:
❖ Tag table berfungsi untuk mendefinisikan pembuatan

tabel dan atribut border pada tag tabel untuk menentukan

tebal border semakin besar nilai border maka akan
semakin tebal border dan jika border diberi nilai “0” maka
garis pada tabel tidak ada.
❖ Tag tr adalah singkatan dari table row untuk menentukan

banyaknya jumlah baris, jumlah baris pada tabel di atas

ada sebanyak 4 jadi tr yang dibuat juga sebanyak 4
❖ Tag td adalah singkatan table yang berfungsi untuk

mengisi data atau membuat kolom pada tabel, pada tabel

di atas ada 5 kolom, oleh karena itu tag td ada sebanyak 5
di setiap tag tr
 ❖ Tag th adalah singkatan dari table header pada umumnya

sama seperti td akan tetapi th berfungsi untuk membuat

judul tabel atau nama field tag th ini akan membuat teks
otomatis tebal dan rata tengah.
5.2 Penggabungan Baris Dan Kolom Pada Tabel
Penggabungan baris dan kolom pada tabel biasa disebut
marge cell pada microsoft office, tetapi di HTML untuk membuat
penggabungan kolom dan baris memakai fungsi colspan dan
rowspan, berikut gambar lebih jelas untuk pengertian colspan dan
rowspan.

Berikut script colspan untuk gambar di atas

Berikut script colspan untuk gambar di atas

5.3 Penggunaan Colspan dan Rowspan

Berikut adalah contoh penggunaan colspan dan rowspan:
1. Colspan
Berikut adalah script HTML untuk membuat penggunaan
penggabungan kolom atau colspan
Berikut adalah hasil dari script di atas

Penjelasan:
❖ Atribut cellpadding pada tag table berfungsi untuk

❖ Atribut cellspacing berfungsi untuk mengatur lebar spasi

border pada tabel semakin besar angka yang diberikan

semakin memperlebar jarak, pada atribut diatas
cellspacing diberi nilai 0 yang bertujuan menghilangkan
spasi pada garis tabel
❖ Atribut colspan pada tag th menandakan adanya
penggabungan kolom pada tag th dan value atau nilai dari
atribut colspan adalah “5” yang menandakan
penggabungan kolom sebanyak 5 kolom.
❖ Atribut colspan pada tag td sama seperti pada tag th

menandakan adanya penggabungan baris pada td dan

value atau nilai dari atribut colspan adalah “5” yang
menandakan penggabungan kolom sebanyak 5 kolom.
1. Rowspan
Berikut adalah script HTML untuk membuat penggunaanpenggabungan Baris atau rowspan
Berikut adalah output dari script di atas
 Penjelasan:
❖ Atribut rowspan pada tag td merupakan fungsi dari penggabungan baris dalam

hal ini nilai atau value dari atribut rowspan adalah “3” yang menandakan
penggabungan 3 baris yang berisi konten teknik informatika ada sebanyak 3
orang
❖ Atribut rowspan pada tag td merupakan fungsi dari penggabungan baris dalam

hal ini nilai atau value dari atribut rowspan adalah “2” yang menandakan
penggabungan 2 baris yang berisi konten Manajemeninformatika ada sebanyak
2 orang.
❖ Atribut colspan pada tag th menandakan adanya penggabungan kolom pada tag

th dan value atau nilai dari atribut colspan adalah “5” yang menandakan
penggabungan kolom sebanyak 5 kolom.

❖ Dan warna pada tabel menggunakan kode hexa

Praktikum
- Silakan Anda tulis ulang kembali semua coding html nya. Buat laporan praktikumnya.