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.
Sumber
http://htmlcssguides.com/tabel-table-html
