HTML Tabel
Sekilas tentang tabel.
Tabel (table) sangat diperlukan ketika kita ingin
menampilkan data yang berbentuk kolom-kolom. Dulu sebelum adanya CSS, table
digunakan untuk membuat layout website namun saat ini sudah jarang dipakai
sebagai layout karena faktor file yang cenderung lebih besar sehingga
mempengaruhi waktu akses yang lebih lama, dalam pengelolaan dan pengeditan pun
jauh lebih rumit karena banyaknya tag-tag yang dihasilkan.
Cara membuat tabel.
Untuk membuat table yang
sederhana ada 3 elemen utama yaitu table, tr dan td.
Tag <table> adalah untuk membuat tabel kemudian di ikuti dengan tag
<tr> (table rows) adalah untuk membuat baris pada tabel kemudian tag
<td> (table data) adalah untuk membuat kolom pada tabel, kolom-kolom
hasil dari tr dan td ini disebut dengan table cell yaitu
sebagai lokasi dimana kita memasukkan data-data yang akan di tampilkan.
Berikut adalah contoh tabel yang terdiri dari 3 baris
dan 2 kolom.
<table border="1"> <tr>
<td>Cell 1 - Baris 1 Kolom 1</td> <td>Cell 2 - Baris 1 Kolom
2</td> </tr> <tr> <td>Cell 3 - Baris 2 Kolom
1</td> <td>Cell 4 - Baris 2 Kolom 2</td> </tr>
<tr> <td>Cell 5 - Baris 3 Kolom 1</td> <td>Cell 6 -
Baris 3 Kolom 2</td> </tr>
</table>
Hasil:
|
Cell 1 – Baris 1 Kolom 1
|
Cell 2 – Baris 1 Kolom 2
|
|
Cell 3 – Baris 2 Kolom 1
|
Cell 4 – Baris 2 Kolom 2
|
|
Cell 5 – Baris 3 Kolom 1
|
Cell 6 – Baris 3 Kolom 2
|
Dalam contoh sengaja ditambah dengan atribut border
agar kita dapat melihat posisi dari tabel tersebut, karena secara default nilai
dari border ini adalah 0 jika tidak disertakan dengan tag <table>.
Mengatur lebar dan tinggi tabel.
Untuk mengatur lebar table digunakan atribut width
atau bisa juga dengan style CSS dengan properti width. Untuk lebar dan tinggi
dari td kita gunakan atribut style dengan properti width dan height.
Berikut adalah contoh tabel dengan lebar 75% dari
lebar dokumen dan lebar kolom masing 50% dengan tinggi pada baris pertama
adalah 40px.
<table border="1"
width="75%"> <tr> <td
style="width:50%;height:40px;">Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 1</td> </tr> <tr> <td>Baris 2
Kolom 1</td> <td>Baris 2 Kolom 2</td> </tr> <tr>
<td>Baris 3 Kolom 1</td> <td>Baris 3 Kolom 2</td>
</tr> </table>
Hasil:
|
Baris 1 Kolom 1
|
Baris 1 Kolom 1
|
|
Baris 2 Kolom 1
|
Baris 2 Kolom 2
|
|
Baris 3 Kolom 1
|
Baris 3 Kolom 2
|
Untuk satuan ukuran widht dan height dari atribut
maupun style tersebut kita dapat menggunakan px atau %. Untuk pengaturan lebar
dan tinggi pada td kita cukup memasukkan pada kolom pertama secara otomatis
kolom-kolom berikutnya akan mengikuti pengaturan tersebut.
Menggabungkan kolom pada tabel
Table Cell atau baris dan kolom dari tabel tersebut
dapat kita gabungkan sesuai kebutuhan bentuk tabel yang diinginkan.
Untuk menggabungkan kolom dalam
tabel digunakan atribut colspan.
<table border="1"
width="75%"> <tr> <td colspan="2">Gabungan
Kolom 1&2 pada Baris 1</td> </tr> <tr> <td
style="width:50%">Baris 2 Kolom 1</td> <td>Baris 2
Kolom 2</td> </tr> <tr> <td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td> </tr> </table>
Hasil:
|
Gabungan Kolom 1&2 pada
Baris 1
|
|
|
Baris 2 Kolom 1
|
Baris 2 Kolom 2
|
|
Baris 3 Kolom 1
|
Baris 3 Kolom 2
|
Sedangkan untuk menggabungkan
baris dalam tabel digunakan atribut rowspan.
<table border="1"
width="75%"> <tr> <td style="width:50%"
rowspan="2">Gabungan Baris 1&2 pada Kolom 1</td>
<td>Baris 1 Kolom 2</td> </tr> <tr> <td>Baris 2
Kolom 2</td> </tr> <tr> <td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td> </tr> </table>
Hasil:
|
Gabungan Baris 1&2 pada
Kolom 1
|
Baris 1 Kolom 2
|
|
Baris 2 Kolom 2
|
|
|
Baris 3 Kolom 1
|
Baris 3 Kolom 2
|
Mengatur jarak kolom pada tabel
Untuk mengatur posisi cell dalam tabel digunakan
atribut cellpadding dan cellspacing.
Cellpadding adalah untuk
pengaturan sisi dari bagian dalam cell.
<table border="1"
width="75%" cellpadding="8"> <tr> <td
style="width:50%;">Baris 1 Kolom 1</td> <td>Baris 1
Kolom 2</td> </tr> <tr> <td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td> </tr> </table>
Hasil:
|
Baris 1 Kolom 1
|
Baris 1 Kolom 2
|
|
Baris 2 Kolom 1
|
Baris 2 Kolom 2
|
Sedangkan Cellspacing adalah
pengaturan sisi dari bagian luar cell.
<table border="1"
width="75%" cellspacing="8"> <tr> <td
style="width:50%">Baris 1 Kolom 1</td> <td>Baris 1
Kolom 2</td> </tr> <tr> <td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td> </tr> </table>
Hasil:
|
Baris 1 Kolom 1
|
Baris 1 Kolom 2
|
|
Baris 2 Kolom 1
|
Baris 2 Kolom 2
|
Membuat titel pada tabel.
Untuk tabel yang lengkap dengan
titel, kita bisa menambahkan tag <caption> tepat setelah
tag <table> dan kita juga bisa mengganti td dengan th (table
heading) sebagai titel dari baris maupun kolom.
Caption dan th akan secara otomatis berada pada posisi
tengah dan th akan menghasilkan tulisan tebal.
<table border="1"
width="75%"> <caption>Disini adalah titel tabel
ini</caption> <tr> <th style="width:50%;">Header
Kolom 1</th> <th>Header Kolom 2</th> </tr> <tr> <td>Baris
1 Kolom 1</td> <td>Baris 1 Kolom 2</td> </tr>
<tr> <td>Baris 2 Kolom 1</td> <td>Baris 2 Kolom
2</td> </tr> </table>
Hasil:
|
Disini adalah titel
tabel ini
|
|
|
Header Kolom 1
|
Header Kolom 2
|
|
Baris 1 Kolom 1
|
Baris 1 Kolom 2
|
|
Baris 2 Kolom 1
|
Baris 2 Kolom 2
|
Membuat background pada tabel
Untuk membuat background pada tabel kita gunakan
atribut style dengan properti background.
Berikut adalah contoh table dengan background warna
kuning muda dengan heading warna merah.
<table style="background:#ffc"
width="75%" border="1"> <tr> <th
style="background:red;width:50%;">Header Kolom 1</th> <th
style="background:red;">Header Kolom 2</th> </tr>
<tr> <td>Baris 1 Kolom 1</td> <td>Baris 1 Kolom
2</td> </tr> <tr> <td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td> </tr> </table>
Hasil:
|
Header Kolom 1
|
Header Kolom 2
|
|
Baris 1 Kolom 1
|
Baris 1 Kolom 2
|
|
Baris 2 Kolom 1
|
Baris 2 Kolom 2
|
Seperti kita lihat bahwa border dari cell tersebut
terlihat terlalu tebal padahal kita membuat nilai dari atribut border adalah
1px.
Ini terjadi karena secara default atribut cellpadding
dan cellspacing pada elemen table memiliki nilai masing-masing 1px.
Jadi untuk menghilangkannya kita harus memasukkan
kedua atribut tersebut dengan nilai 0.
<table cellpadding="0"
cellspacing="0" style="background:#ffc"
width="75%" border="1"> ... </table>
Atau kita juga bisa menggunakan style CSS yaitu dengan
properti border-collapse:collapse.
<table
style="border-collapse:collapse;background:#ffc"
width="75%" border="1"> <tr> <th
style="background:red;width:50%;">Header Kolom 1</th> <th
style="background:red;">Header Kolom 2</th> </tr>
<tr> <td>Baris 1 Kolom 1</td> <td>Baris 1 Kolom
2</td> </tr> <tr> <td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td> </tr> </table>
Hasil:
|
Header Kolom 1
|
Header Kolom 2
|
|
Baris 1 Kolom 1
|
Baris 1 Kolom 2
|
|
Baris 2 Kolom 1
|
Baris 2 Kolom 2
|
Pada link berikut ini kita akan
membuat contoh tabel dengan CSS baik
itu dengan atribut style (inline) maupun internal dan eksternal CSS.
Sekian dari saya, semoga bermanfaat :).
Tidak ada komentar:
Posting Komentar