MEMBUAT TABEL HTML

Struktur tabel html digunakan untuk membuat tabel dalam halaman website, baik tabel
untuk menampilkan data atau tabel untuk layout halaman web kita.
Apa itu tabel ?? tabel adalah penggabungan antara baris dan kolom

Gambar di atas adalah salah satu layout halaman web yang menggunakan tabel.

Sebelum kita membuat sebuah layout web dengan tabel, kita pelajari dahulu
bagaimana cara membuat tabel tersebut

Elemen dasar tabel

Ada beberapa tag dasar yang harus diingat untuk membuat tabel di HTML:
1. Tag <table> untuk membuat tabel
2. Tag <tr> (tabel row) untuk membuat baris
3. Tag <td> (tabel data) untuk membuat kolom
 Berikut adalah hasil dari kode di atas ….

Kok gak ada garisnya….???? Ya, jika kita memerlukan garis pada tabel, kita harus
menambahkan atribut border pada tabel tersebut, bagaimana contoh kode nya

Maka akan menghasilkan

Selain tag-tag tadi ada lagi tag lain yang berkaitan dengan pembuatan tabel dalam html,
yaitu:
1. Tag <thead> untuk membuat bagian header tabel
2. Tag <tbody> untuk membuat bagian body dari tabel
3. Tag <th> (table head) untuk membuat judul/header pada kolom tabel
4. Tak <caption> untuk membuat Judul Tabel
Kesimpulan:
Dalam pembuatan table ada 3 komponen utama yang harus diketahui, yaitu <table>, <tr>,
dan <td>.
Tag yang lain adalah tambahan (opsional), boleh digunakan boleh tidak.
 Elemen Header Pada Tabel

Misalkan kita akan membuat sebuah data tabel, kita memerlukan sebuah header tabel.
Header tabel berguna memberikan informasi data dalam kolom sebuah tabel. Biasanya,
header diletakkan pada baris pertama sebuah tabel. Untuk mendeklarasikan sebuah
header tabel menggunakan tag <th>

Contoh penulisan kode pada dokumen html nya adalah seperti dibawah ini.

Kode disamping adalah kode untuk

membuat sebuah data tabel, atau
menampilkan data ke dalam bentuk
tabel,
kita-kira ada berapa kolom dan
baris yang akan terbentuk dari kode
tersebut …. ??

berapa …. ???

yups ada 3 kolom dan 3 baris yang

terbentuk dari tabel tersebut , dari
mana menghitung jumlah kolom
???

dari jumlah pasangan <td> </td> pada

setiap pasangan <tr> </tr>
Tampilan hasil dari script di atas:

MENGGABUNGKAN CELL

Kamu dapat menggabungkan cell pada kode HTML sebagaimana kita menggunakan
merge cell pada aplikasi Microsoft excel, tapi mohon maaf, tidak semudah yang
dibayangkan seperti halnya pada Microsoft excel dengan hanya menekan tombol marge
cell, kita memerlukan sebuah atribut baru untuk melakukan penggabungan cell, baik itu
menggabungkan baris atau menggabungkan kolom.

1. colspan
Atribut colspan digunakan untuk menyatukan satu atau lebih cell berdasarkan kolom,
sebagai contohnya, colspan = “2” berarti menggabungkan dua cell menjadi satu

2. rowspan
Atribut rowspan digunakan untuk menyatukan satu atau lebih cell berdasarkan baris,
sebagai contohnya, rowspan =”2” berarti menggabungkan dua cell menjadi satu.
Perhatikan kode di bawah ini

Kode HTMl Hasilnya

Dengan menggunakan kode ini, menghasilkan

halaman tabel seperti di atas.

Kode di samping, merupakan bentuk tabel

yang normal
Kode di samping menghasilakan tampilan
seperti di atas, kode diatas merupakan
penggabungan dua buah kolom, coba
perhatikan pada <tr> pertama, <td>
berbeda jumlahnya dengan <tr> kedua,
karena apa?? Karena ada colspan, colspan
menjadikan 2 kolom menjadi 1

Pada kode di samping ini, bentuk tabel yang

berbeda lagi, coba perhatikan, pada tabel di
atas ada penggabungan 2 buah baris menjadi
1
 TABEL DI DALAM TABEL

Format tabel menjadi sanat penting sekali untuk dijadikan layout sebuah tampilan
halaman web. Dengan menggunakan tabl, kamu dapat menentukan struktur utama
sebuah web, mulai dari heading, body, dan footing nya, Teknik sederhana untuk
membuat layout adalah dengan meletakkan tabel didalam tabel, perhatikan gambar-
gambar dibawah ini

Hati -hati penyimpanan tabel kedua harus disimpan didalam TAG <td> , perhatikan
penyimpanan nya jangan sampai salah menyimpan tag <table> keduanya ya….
LATIHAN:

1. Membuat Tabel untuk menampilkan data siswa

2. Membuat Tabel untuk membuat layout website

 Hasilnya:

TUGAS:
A. Buatlah Script HTML untuk menampilkan tabel dalam halaman web sebagai berikut:
1.

2.

3.

4.

5.
B. Buatlah Layout Web dengan tampilan warna seperti berikut ini