Membuat Tabel dan Mewarnainya
Pertama kita akan membuat tabel tapi sebelum kita membuat tabel kita akan mempelajari dulu apa pengertian dari tabel .
Tabel
merupakan cara untuk menampilkan informasi dalam bentuk sel yang
terdiri atas baris dan kolom. Tabel dibuat dengan menggunakan tag <table>. Sebuah tabel dibagi menjadi baris-baris, dan tiap baris dibagi ke dalam cell-cell. Baris dibuat dengan tag <tr>, dan cell-cell yang akan membentuk kolom dibuat dengan tag <td>.
Dalam
konteks HTML, table mempunyai peranan yang sangat penting. Selain
digunakan untuk menampilkan tabel berisi data, table juga digunakan
untuk menyusun teks dalam kolom, ataupun membuat laporan terstruktur
lainnya.
Seringkali
table digunakan dalam halaman web untuk memperindah tampilan ataupun
untuk mengatur agar informasi dapat disajikan dengan tampilan yang enak
dibaca. Melihat begitu banyaknya manfaat yang didapat dengan menggunakan
tabel ini maka tabel mulai diterapkan pemakaiannyaoleh HTML dan
kemudian didukung oleh Nescape (browser pertama yang mempelopori
penggunaan table).
Dari masing-masing tag tersebut, tiap tag mempunyai tag penutup yaitu:
Tag <table> mempunyai tag penutup </table>
Tag <tr> mempunyai tag penutup </tr>
Tag <td> mempunyai tag penutup </td>
Ketiga
tag di atas adalah tag-tag yang harus ada dalam tag Table. Bisa
dikatakan tag tersebut merupakan tag dasar pembuatan table. Berikut
penerapan dari masing masing bagian tag dalam Table:
Tag
<table> adalah pembuka daripada pembuatan table, di dalam table
ada baris yang dimulai dengan <tr>. Jika ada satu <tr> maka
akan ada satu baris, begitupun selanjutnya. Di dalam baris ada cell-cell
yang sering disebut kolom, yang biasanya kita isi dengan berbagai
bentuk data. Cell atau kolom ini dibuka atau dimulai dengan <td>.
Tag <td> ini diakhiri dengan </td> sebagai penutup kolom.
Data-data yang berada dalam tag <td>...</td> akan berada
dalam satu kolom. Jika ingin membuat 3 kolom dalam satu baris, maka di
dalam <tr>...</tr> kita inputkan tiga
<td>...</td>. Begitupun pada <tr>, jika kita ingin
membuat tiga baris table maka kita harus ketikkan tiga
<tr>...</tr> di dalam <table>...</table>.
Untuk lebih mengenal dan mengerti daripada tag dasar Table, berikut saya berikan penjelasan dari masing masing tag :
Tag <table> </table>
Tag <table> adalah
tag pembuka sebuah table, dimana tag <table> ini adalah tag awal
yang kita pakai dalam mengawali pembuatan table. Setelah tag
<table> ada tag </table> yang merupakan tag penutup atau
akhir dari tabel yang sedang di buat.
Tag<tr></tr>
Tag
<tr> atau Table Row adalah tag yang berfungsi untuk membuat baris
dalam sebuah tabel. Tidak lepas dari tag-tag yang lain, tag ini berisi
tag penutup yaitu </tr>.
Tag <tr> memiliki atribut ALIGN untuk mengatur alignment horizontal dan VALIGN untuk mengatur alignment vertical.
Tag<td></td>
Tag
<td> atau Table data berfungsi untuk menampilkan data pada setiap
sel tabel. Secara umum dapat dikatakan bahwa table data atau <td>
ini digunakan untuk membuat kolom dalam baris table. Untuk mengakhiri
kolom tersebut digunakan </td>
<head> Digunakan untuk memberikan informasi tentang dokumen tersebut
<th> Mendefinisikan sel header di dalam sebuah tabel
<title> Membuat judul untuk dokumen HTML
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>
Mewarnai Tabel
Jika kita ingin mewarnai tabel sesuai yang kita inginkan, seperti ini.
Untuk kodenya seperti kode html yang sudah saya sampaikan di postingan sebelumnya. Hanya di tambahkan kode bgcolor="warna" di setiap Tag, seperti <table>, <th>, <td>.
a. Untuk mewarnai seluruh tabel <table></table>, kodenya seperti ini.
<table border="1px"; bgcolor="warna" > isi </table>
b. Untuk mewarnai kepala tabel <th></th>, kodenya seperti ini.
<th bgcolor="warna" > isi </th>
c. Untuk mewarnai kolom tabel <td></td>, kodenya seperti ini.
<td bgcolor="warna" > isi </td>
Jika anda sudah jelas tentang cara mewarnai di setiap element tabel
tadi, sekarang ini adalah contoh kode keseluruhan tabel yang berwarna
warni.
<table border="1" bgcolor="red">
<tr>
<th bgcolor="green">Pengunjung</th>
<th bgcolor="blue">Jumlah (%)</th>
</tr>
<tr>
<td bgcolor="yellow">Perempuan</td>
<td bgcolor="burlywood">20%</td>
</tr>
<tr>
<td bgcolor="brown">Laki - Laki</td>
<td bgcolor="chartreuse">80%</td>
</tr>
</table>
