Sabtu, 21 November 2015
PEMBUATAN TABEL
PADA HTML!
Sekarang kita akan membahas tentang cara menyajikan pembuatan
tabel pada HTML. Dimulai dari pengertian tabel à
tabel disini merupakan cara untuk menampilkan informasi dalam bentuk sel yang
terdiri atas baris dan kolom.
Untuk menampilkan data dalam bentuk table pada HTML, maka digunakan
Tag <table>. Elemen table berisi property <tr> untuk menentukan baris (table
row) yang didalamnya terdapat properti <td>
untuk menampkan data pada setiap sel table (table data).
Dan
hasilnya akan seperti ini
Tabelnya
tidak terlihat karna kita tidak menggunakan border dan semacamnya. Kita akan
belajar menggunakannya setelah tau atribut apa saja yang dipakai untuk menghiasi atau mempercantik tabel yang akan kita buat nantinya.
Contohnya...
tag ini
digunakan untuk mendifinisikan table heading atau judul tiap kolom.
BERBAGAI ATRIBUT YANG DIGUNAKAN UNTUK TABLE
Atribut untuk tag <table>
Width
|
=panjang (lebar table, pixel atau persen)
|
Height
|
=panjang (tinggi table, pixel atau persen)
|
Border
|
=pixel (tebal garis tepi)
|
Cellspacing
|
=pixel (spasi antar sel)
|
Cellpadding
|
=pixel (spasi di dalam sel)
|
Align
|
=[left|center|right] (perataan table)
|
Bgcolor
|
=warna (warna latar belakang table)
|
Atribut untuk tag <tr>
Align
|
=[left|center|right] (perataan sebaris sel
secara horizontal)
|
Valign
|
=[top|middle|bottom] (perataaan sebaris sel
secara vertical)
|
Bgcolor
|
=warna (warna latar belakang baris)
|
Atribut untuk tag <td>
Align
|
=[left|center|right] (perataan horizontal)
|
Width
|
=[top|middle|bottom] (perataan vertical)
|
Height
|
=pixel (tinggi sel, pixel atau persen)
|
Bgcolor
|
=warna (warna latar belakang sel)
|
Dan pada
intinya tag utama dalam menyajikan table adalah
<table> ….. </table>
|
Mendifinisikan Tabel
|
<tr> … </tr>
|
Mendifinisikan table row atau baris
|
<td> … </td>
|
Data pada tabel/sel
|
<th> … </th>
|
Mendifinisikan table heading atau judul
tiap kolom
|
Setelah
mengenal atribut-atributnya kita akan mempelajari bagaimana cara menggunakan
atribut tersebut kedalam HTML.
Untuk tag
<table> kita bisa mengatur panjang, tinggi, lebar, warna, tebal, spasi
didalam maupun antar sel, dan perataan kanan, tengah dan kiri. Contoh:
Penggunaan width
Dan hasilnya..
Penggunaan height
Hasilnya..
Penggunaan border
Hasilnya...
Penggunaan cellspacing
Hasilnya..
Penggunaan Cellpadding
Hasilnya...
Penggunaan Align
Hasilnya..
Untuk align
kita menggunakan center untuk rata tengah, jika mau rata kanan atau kiri sama
saja tinggal mengganti center dengan left untuk rata kiri dan right untuk rata
tengah.
Penggunaan bgcolor
Hasilnya..
Nah untuk
atribut yang digunakan pada tag <tr> dan <td> kalian bisa
mencobanya sendiri. Untuk singkat waktu ini adalah hasil contoh dari gabungan
diatas.
Setelah
mengetahui bagaimana untuk memasukan tabel menggunakan HTML sekarang kita akan
belajar caranya membuat nested table
atau tabel bersarang yang artinya tabel didalam tabel
Perhatikan
contoh gambar berikut..
Bisa
kita lihat bahwa di kolom “Email account note” ada tabel lagi berisi tentang
catatan jenis email. Ini yang dinamakan tabel didalam tabel. Dalam penulisan
HTML “tabel bersarang” ini ditulis dengan menuliskan HTML tabel di dalam sebuah
sel dari tabel, letaknya adalah pada <td>….</td>
Contoh:
Hasilnya..
Berikut
ini langkah-demi langkah untuk membuat tabel bersarang atau tabel didalam tabel
(nested table):
- Buatlah tabel dengan 2 kolom dan 2 baris. HTML tag-nya adalah sebagai berikut :
- Tentukan sel dimana kita ingin menempatkan tabel bersarang. Kita akan menaruh di kolom 2 baris 2.
- Ganti teks dalam sel itu dengan tabel kedua. HTML akan terlihat seperti ini:
Hasilnya adalah sebagai
berikut :
Trik untuk tabel bersarang adalah untuk
selalu menutup tag tabel dalam sebelum menutup sel tabel luar
Sekian untuk
penjelasan bagaimana cara menyajikan table pada HTML. Kalian bisa bereksperimen
sendiri dengan atribut-atribut yang digunakan untuk menghiasi table yang akan
kalian buat. Terimakasih~
