Cara Sederhana
dan Mudah Membuat Tabel di HTML
Tag yang
digunakan untuk membuat tabel di HTML sebenarnya hanya ada 3, yaitu :
<table> </table>,
<tr> <tr/>, dan <td> </td>.
Keterangan:
Tag <table>
menunjukkan bagian awal dari tabel dan tag </table> menunjukkan akhir
dari tabel.
Tag <tr>
menunjukkan awal baris dan tag <tr/> menjukkan akhir baris.
Tag <td>
menunjukkan awal kolom dan tag </td> menunjukkan akhir kolom.
CATATAN :
Sebuah tabel HTML
minimum memiliki sepasang tag <table>, sepasang tag <tr> dan satu
pasang tag <td>. Sementara setiap tag <td> selalu diapit oleh tag
<tr>.
Bentuk Minimal
Tabel HTML :
<table>
<tr>
<td> . . . </td>
</tr>
</table>
Contoh Tabel
Sederhana :
Tuliskan kode
html dibawah ini di text editor Anda (saya menggunakan gedit). Simpan dengan
nama tabel.html
<table border="1">
<tr>
<td> isi kolom 1 baris 1</td>
<td> isi kolom 2 baris 1</td>
</tr>
<tr>
<td> isi kolom 1 baris 2</td>
<td> isi kolom 2 baris 2</td>
</tr>
</table>
Buka file tabel.
Html dengan browser (Saya menggunakan Mozilla Firefox). Maka hasilnya
menjadi seperti ini :
|
Isi kolom 1 baris 1
|
Isi kolom 2 baris 1
|
|
Isi kolom 1 baris 2
|
Isi kolom 2 baris 2
|
Jika kalian ingin
menghilangkan garis di table, cukup dengan mengganti nilai border menjadi 0. Jika
atribut border tidak disertakan, maka tabel dianggap mempunyai border dengan
nilai 0.
<table border="0">
<tr>
<td> isi kolom 1 baris 1</td>
<td> isi kolom 2 baris 1</td>
</tr>
<tr>
<td> isi kolom 1 baris 2</td>
<td> isi kolom 2 baris 2</td>
</tr>
</table>
Maka saat di buka
di browser hasilnya akan menjadi :
Isi kolom 1 baris 1 isi kolom
2 baris 1
Isi kolom 1 baris 2 isi kolom
2 baris 2
Cara Menggabungkan Kolom di Tabel HTML
Saat Anda ingin menggabungkan kolom atau
baris, sebaiknya sertakan border=”0”di bagian tabel. Ini berfungsi untuk
mengetahui apakah tabel yang kita inginkan sesuai atau tidak. Jika sudah
sesuai border bisa di hapus dengan mengubah nilai border menjadi 0 atau menghapus
tag border=”0”dari tag <table>. Jika ingin tetap menggunakan border maka
tidak perlu merubah apapun.
Contoh sederhana
Menggabungkan Kolom :
Misalnya kita
ingin menggabungkan 3 kolom menjadi satu. Namun kolom yang lain tetap.
Formatnya adalah
:
<td colspan=”jumlah kolom yang ingin disatukan”> ... </td>
Contoh tabel yang
belum disatukan (belum di colspan) kolomnya berdasarkan kasus diatas :
<table border="1">
<tr>
<td> 3 kolom jadi satu </td>
</tr>
<tr>
<td> isi kolom 1 baris 2</td>
<td> isi kolom 2 baris 2</td>
<td> isi kolom 3 baris 2</td>
</tr>
</table>
Berikut ini hasil
tabel yang belum di colspan kolomnya:
|
3 kolom jadi satu
|
|
|
Isi kolom 1 baris 2
|
Isi kolom 2 baris isi kolom
3 baris 2
|
Untuk
menggabungkan 3 kolom di baris pertama pada tabel maka kita harus mengubah kode
HTML tabel diatas menjadi seperti ini :
<table border="1">
<tr>
<td colspan="3"> 3 kolom jadi satu </td>
</tr>
<tr>
<td> isi kolom 1 baris 2</td>
<td> isi kolom 2 baris 2</td>
<td> isi kolom 3 baris 2</td>
</tr>
</table>
Maka hasilnya
akan menjadi seperti ini :
|
3 kolom jadi satu
|
|
|
Isi kolom 1 baris 2
|
Isi kolom 2 baris isi kolom
3 baris 2
|
Cara Menggabungkan Baris di Tabel HTML
Apabila kita
ingin menggabungkan 2 baris terakhir menjadi satu. Namun baris yang lain
tetap. Formatnya adalah :
<td rowspan=”jumlah baris yang ingin disatukan”> ... </td>
Contoh tabel yang
belum disatukan barisnya (belum di rowspan) berdasarkan kasus diatas :
<table border="1">
<tr>
<td> isi kolom 1 baris 1 </td>
<td> 2 baris jadi satu</td>
</tr>
<tr>
<td> isi kolom 1 baris 2</td>
</tr>
</table>
Berikut ini hasil
tabel yang barisnya belum disatukan (belum di rowspanbarisnya):
|
Isi kolom 1 baris 1
|
2 baris jadi satu
|
|
Isi kolom 1 baris 2
|
|
Untuk
menggabungkan 2 baris di kolom ke-2 pada tabel maka kita harus mengubah kode
HTML table diatas menjadi :
<table border="1">
<tr>
<td> isi kolom 1 baris 1 </td>
<td rowspan=”2”> 2 baris jadi satu</td>
</tr>
<tr>
<td> isi kolom 1 baris 2</td>
</tr>
</table>
Maka hasilnya akan menjadi seperti ini :
|
Isi kolom
1 baris 1
|
2 baris
jadi satu
|
|
Isi kolom
1 baris 2
|
|
Perataan Tabel di HTML
Untuk melakukan
pengaturan perataan tabel, kita harus menambahkan atribut align pada tag <table>.
Nilai atribut align adalah left, center, dan right. Tuiskan kode HTML dibawah
ini dan simpan dengan nama perataantabel.html
<table border="1" align="center">
<tr>
<td> align center </td>
<td> align center </td>
</tr>
<tr>
<td> align center </td>
<td> align center </td>
</tr>
</table>
<br/> <br/>
<table border="1" align="right">
<tr>
<td> align right </td>
<td> align right </td>
</tr>
<tr>
<td> align right </td>
<td> align right </td>
</tr>
</table>
<br/> <br/>
<table border="1" align="left">
<tr>
<td> align left </td>
<td> align left </td>
</tr>
<tr>
<td> align left </td>
<td> align left </td>
</tr>
</table>
Maka hasilnya
jika dilihat menggunakan browser akan seperti berikut ini :
|
Align center
|
Align center
|
|
Align center
|
Align center
|
|
Align right
|
Align right
|
|
Align right
|
Align right
|
|
Align left
|
Align left
|
|
Align left
|
Align left
|
Pengaturan Tinggi dan Lebar Tabel di HTML
Agar lebar atau
tinggi tabel tidak berubah-ubah, kita dapat menentukan ukuran Tinggi dan Lebar
tabel. Caranya dengan menambahkan atribut height untuk nilai tinggi tabel
sedangkan width untuk menyimpan nilai lebar tabel. Nilai tinggi dan lebar dalam
satuan pixels.
Simpan kode HTML
berikut ini dengan nama tinggidanlebartabel.html
<table height="150" width="400" border="1">
<tr>
<td> isi tabel </td>
<td> isi tabel </td>
</tr>
<tr>
<td> isi tabel </td>
<td> isi tabel </td>
</tr>
</table>
Maka akan
menghasilkan tabel dengan tinggi 150px dan lebar 400px seperti dibawah ini :
|
Isi table
|
Isi table
|
|
Isi tabel
|
Isi table
|
Mengatur Tinggi dan Lebar Kolom Tabel HTML
Untuk mengatur
tinggi dan lebar kolom kita tinggal menyisipkan atribut heigh tuntuk tinggi
kolom dan atribut width untuk lebar kolom di tag <td>. Nilai tinggi dan
lebar dalam satuan pixels.
Simpan kode
dibawah ini dengan nama tinggidanlebarkolom.html
<table width="400" border="1">
<tr>
<td align="left" width="200" height="100"> align left </td>
<td align="center"> align center </td>
<td align="right"> align right </td>
</tr>
</table>
Hasilnya jika
dibuka dibrowser akan seperti berikut ini :
|
Align left
|
Align
Center
|
Align
Right
|
Jika Kolom A tingginya 70px maka kolom B dan C
akan ikut menjadi 70 tingginya
meskipun tidak
diatur tingginya. Tinggi kolom akan mengkikuti tinggi salah satu kolom yang
tertinggi. Hal ini tidakberlaku untuk lebar kolom.
Mengatur Perataan Kiri Kanan Kolom Tabel HTML
Untuk meratakan
kolom secara kiri kanan kita tinggal menyisipkan atribut aligndi tag
<td>. Formatnya sebagai berikut :
<td align=”jenis perataan”> . . .</td>
silahkan simpan
kode di berikut dengan nama perataankikakolom.html
<table width="500" height="50" border="1">
<tr>
<td align="left"> align left </td>
<td align="center"> align center </td>
<td align="right"> align right </td>
</tr>
</table>
Hasil perataan
saat dibuka melalui browser akan seperti berikut ini :
|
Align left
|
Align
center
|
Align
right
|
Mengatur Perataan
Atas Bawah Kolom Tabel HTML
Untuk meratakan
kolom kita tinggal menyisipkan atribut valigndi tag <td>. Formatnya
sebagai
berikut :
<td valign=”jenis perataan”> . . .</td>
silahkan simpan
kode di berikut dengan nama perataanabkolom.html
<table width="500" height="150" border="1">
<tr>
<td valign="top"> vertical align top </td>
<td valign="center"> vertical align center </td>
<td valign="bottom"> vertical align bottom </td>
</tr>
</table>
Hasil perataan
saat dibuka lewat browser seperti berikut ini :
|
Vertical align top
|
Vertival align center
|
Vertical align bottom
|
Semoga bermanfaat!
Terima kasih J
Tidak ada komentar:
Posting Komentar