Web
design, Belajar HTML, CSS, Javascript, tips, triks dan tutorial bagi pemula.
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
|
No comments:
Post a Comment