HTML

Membuat Tabel pada HTML

Konsep Tabel
• Tabel merupakan cara untuk menampilkan
informasi dalam bentuk sel yang terdiri dari
baris dan kolom
Tabel terdiri dari 4 unsur utama yaitu:
1. Baris
2. Kolom
3. Sel
4. Garis
Tag untuk membuat tabel
Ada beberapa tag yang harus diingat untuk membuat
tabel di HTML:
• Tag <table> untuk membuat tabel
• Tag <tr> (table row) untuk membuat baris pada tabel
• Tag <td> (table data) untuk membuat kolom tabel
• Tag <th> (table head) untuk membuat judul pada
header tabel

Tag yang paling penting untuk diingat adalah

tag <table>, <tr>, dan <td>. Sementara tag yang lain
adalah tambahan (opsional), boleh digunakan boleh
tidak.
Hasilnya:
• Agar Tabelnya memiliki garis, silahkan
tambahkan atribut border="1" di dalam
tag <table>.
• Sehingga akan menjadi seperti ini:
• Nilai "1" pada atribut border adalah ukuran
garisnya. Semakin besar ukurannya, maka
akan semakin besar pula ukuran garisnya.
• Nilai "1" adalah ukuran garis yang paling kecil.
• Hasilnya akan sepert ini:
Mengatur Jarak Sel dengan Cellpadding
• Atribut cellpadding adalah atribut untuk
mengatur jarak teks dengan garis di dalam sel.
• Atribut ini dapat kita berikan kepada
tag <table>.
Contoh:
• Nilai "10" pada atribut cellpadding adalah
ukuran jarak antara teks sel dengan garis.
Maka hasilnya:
Menambahkan Warna pada Sel dan Baris

• Untuk menambahkan warna pada sel dan

baris, kita bisa menambahkan
atribut bgcolor di dalam tag <td> (untuk
kolom) atau <tr> (untuk baris).
• Contoh:
Hasilnya:
 Menggabungkan Sel Tabel
Atribut yang digunakan untuk menggabungkan
sel tabel adalah rowspan dan colspan:
• rowspan untuk menggabungkan baris;
• colspan untuk mebggabungkan kolom.
Atribut ini bisa kita berikan kepada
tag <td> atau <th>
Contoh:
Hasil:
Analisislah tampilan yang akan dikeluarkan oleh
kode program berikut :
Maka tampilan dari kode tsb adalah………….
Bagaimana cara membuat tampilan tabel diatas
menggunakan struktur pada HTML?
 Desain Halaman Web dengan Tabel
• Penggunaan tabel sangat membantu dalam
mendesai sebuah layout halaman web
• Layout merupakan sebuah desain yang
berupa penataan elemen-elemen dalam
sebuah halaman web
• Elemen-elemen dalam desain halaman web
dapat dikelompokkan menjadi 5 elemen,
diantaranya :
Elemen header, berisi judul dan slogan sebuah
website
Elemen navigasi, berisi menu-menu yang
memberikan akses navigasi ke halaman lain dalam
web
Elemen sidebar, dapat berada dikiri atau kanan
konten
Elemen konten, merupakan isi utama dari web
Elemen footer, penutup website
• Sebuat website dikatakan baik atau menarik
jika pengunjung website merasa mudah untuk
menemukan suatu hal yang dicari, dengan
desain yang simple dan jelas.
Berikut desain halaman web menggunakan tabel
 Menyisipkan Elemen yang Lain ke
dalam Sel
• Di dalam sel <td> dan <th>, kita bisa
menyisipkan elemen HTML yang lain, seperti
gambar, link, video, list, dsb.
• Contoh:
• Hasil: