Pada pembuatan HTML model lama, kita selalu menggunakan tabel sebagai satu-satunya cara membuat format tampilan halaman HTML. Cara ini menimbulkan berbagai kesulitan. Yang menjadikan sulit, apabila tampilan tersebut diubah. Kita harus benar-benar menghitung kotak-kotak baris dan kolom secara tepat untuk mencari format tampilan. Bayangkan jika kita punya belasan html, dan masing-masing html tersebut mempunyai tag-tag yang banyak. Bisa seharian otak-atik html dong!
Dewasa
ini, kedudukan tabel sebagai cara mem-format html telah digantikan oleh
CSS. Penggunaan CSS lebih mudah, dapat dipusatkan pada satu file css
untuk mem-format seluruh file HTML Pengubahan format tampilan hanya
dilakukan di file css saja, maka seluruh kode html yang bersangkutan
akan berubah.
Namun
demikian kita masih dapat menggunakan cara lama, yaitu menyertakan pada
tabel yang bersangkutan. Inilah yang akan singgung di artikel ini
sebagai dasar pengenalan pembuatan tabel pada css.
Format tabel dasar dapat dimulai dengan script berikut::
<table>
</table>
Pernyataan
diatas menyatakan bahwa kode yang diapit oleh tag diatas adalah
kode-kode untuk pembuatan tabel. Sekarang kita harus mendefinisikan
baris dengan tag <tr></tr>:
<table>
<tr></tr>
</table>
Dan tambahkan definisi kolom dengan tag <td></td>
<table>
<tr><td></td></tr>
</table>
Jika
Anda membuat tag-tag diatas, gambar tabel masih belum muncul. Ini
disebabkan karena Anda masih belum memberitahukan ukuran garis tepinya.
Oke sekarang ubah kode diatas dengan:
<table style="border: 1px solid black">
<tr><td></td></tr>
</table>
black adalah warna tabel. Solid adalah tipe garis, sedangkan 1px adalah ukuran garis.
Sekarang ketikkan kode berikut
<table style="border: 5px solid red;">
<tr>
<td>Ini adalah tabel</td>
</tr>
</table>
kode diatas akan menghasilkan tampilan sebagai berikut:
| Ini adalah tabel |
Lantas bagaimana membuat tabel dengan kolom lebih dari satu? Gampang. Tambah saja tag <td></td>
Kode berikut ini
<table style="border: 5px solid red;">
<tr>
<td>Kode Barang</td>
<td>Nama Barang</td>
</tr>
</table>
akan membentuk penampakan seperti tabel ini:
| Kode Barang | Nama Barang |
Tapi
sepertinya masih jelek banget. Garis antar kolom kok gak kelihatan.
Oke, sekarang tambahkan definisi garis di bagian tag <td> seperti
berikut:
<table style="border: 5px solid red;">
<tr>
<td style="border: 5px solid green;">Kode Barang</td>
<td style="border: 5px solid yellow;">Nama Barang</td>
</tr>
</table>
| Kode Barang | Nama Barang |
Bagaimana cara menambahkan baris? Tentu saja dengan menambahkan <tr></tr>
<table style="border: 5px solid red;">
<tr>
<td style="border: 5px solid green;">Kode Barang</td>
<td style="border: 5px solid yellow;">Nama Barang</td>
</tr>
<tr>
<td style="border: 5px solid green;">101-222</td>
<td style="border: 5px solid yellow;">Silvia Atmaja</td>
</tr>
</table>
| Kode Barang | Nama Barang |
| 101-222 | Silvia Atmaja |
Yuk, sekarang coba, coba judul tabel diberi warna latar agar beda dengan detilnya. Yang "Kode Barang" kita beri warna hijau sesuai garisnya, sedangkan yang "Nama Barang" dengan warna kuningnya.
Kita memberikan warna latar dengan kode script seperti ini:
background:green; atau background:yellow;
kode diatas ditulis di bagian style dan setiap kode css harus diakhiri dengan ;
<table style="border: 5px solid red;">
<tr>
<td style="background: green; border: 5px solid green;">Kode Barang</td>
<td style="background: yellow; border: 5px solid yellow;">Nama Barang</td>
</tr>
<tr>
<td style="border: 5px solid green;">101-222</td>
<td style="border: 5px solid yellow;">Silvia Atmaja</td>
</tr>
</table>
| Kode Barang | Nama Barang |
| 101-222 | Silvia Atmaja |
Oke
lanjut. Kita beri pemanis pada tabel diatas. Kita akan memberikan judul
pada tabel diatas pada bagian paling atas. Yang perlu kita perhatikan.
Karena tabel diatas ada dua kolom, sedangkan kolom judul cuma satu
kolom, maka kita perlu memberitahukan pada css agar kolom tadi
diperlebar seluas dua kolom dengan perintah:
colspan="2"
sehingga akan menjadikan yang sudah kita buat menjadi:
<tr>
<td colspan="2">Daftar Pegawai</td>
</tr>
<td colspan="2">Daftar Pegawai</td>
</tr>
| Daftar Pegawai | |
| Kode Barang | Nama Barang |
| 101-222 | Silvia Atmaja |
Sepertinya tabel diatas masih jelek. "Daftar Pegawai" kok gak ditengah ya, supaya kelihatan bagus gitu. Untungnya kode script-nya gampang, tinggal dibeginikan saja.
style="text-align: center;"
sehingga kode script selengkapnya:
<table style="border: 5px solid red;">
<tbody>
<tr>
<td colspan="2" style="text-align: center;">Daftar Pegawai</td>
</tr>
<tr>
</tr>
<tr>
<td style="background: green; border: 5px solid green;">Kode Barang</td>
<td style="background: yellow; border: 5px solid yellow;">Nama Barang</td>
</tr>
<tr>
<td style="border: 5px solid green;">101-222</td>
<td style="border: 5px solid yellow;">Silvia Atmaja</td>
</tr>
</tbody>
</table>
| Daftar Pegawai | |
| Kode Barang | Nama Barang |
| 101-222 | Silvia Atmaja |
Lanjut. Anda pasti melihat bahwa lebar tabel-tabel diatas selalu memenuhi halaman HTML. Bagaimana jika kita menginginkan sekian persen saja? Bisa. Kita tambahkan width di Style. Sebagai contoh, saya akan membuat lebar tabel-tabel diatas cuma 50% lebar html secara keseluruhan, maka script di tag table sebagai berikut:
<table style="border: 5px solid red; width: 50%;">
Anda dapat melihat perubahannya pada gambar berikut:
| Daftar Pegawai | |
| Kode Barang | Nama Barang |
| 101-222 | Silvia Atmaja |
Mungkin tabel diatas kurang cantik? Terlalu tebal garisnya. Memang disengaja, agar perbedaan pemakaian perintah border menjadi jelas. Saya biasanya mempercantik tabel diatas dengan membuat garis-garisnya lebih kecil seperti tabel dibawah ini.
| Daftar Pegawai | |
| Kode Barang | Nama Barang |
| 101-222 | Silvia Atmaja |
Bentuk tabel diatas diperoleh dengan menambahkan kode border-collapse: collapse dan jangan lupa mengecilkan tabel garis dari 5px menjadi 1px. Bandingkan dengan script dibawah ini:
<table style="border-collapse: collapse; border: 1px solid; width: 50%;">
<tbody>
<tr>
<td colspan="2" style="text-align: center;">Daftar Pegawai</td>
</tr>
<tr>
<td style="background: green; border-collapase: collapse; border: 1px solid;">Kode Barang</td>
<td style="background: yellow; border-collapase: collapse; border: 1px solid;">Nama Barang</td>
</tr>
<tr>
<td style="border-collapase: collapse; border: 1px solid;">101-222</td>
<td style="border-collapase: collapse; border: 1px solid;">Silvia Atmaja</td>
</tr>
</tbody>
</table>
0 comments:
Post a Comment