Beberapa waktu lalu saya sempat menulis tentang cara membuat tabel diposting. Mungkin ada sobat yang kurang jelas mengenai tutorial dan cara modifikasinya berikut ini adalah lanjutan yang mungkin akan sedikit membantu kita dalam belajar.
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.
