Membuat tabel rasanya akan kamu butuhkan di postingan kamu ketika kamu mencoba mempos sesuatu yang berhubungan dengan data-data. Bagi beberapa orang, membuat tabel di postingan blog rasanya akan membuat kepala pusing karena orang-orang tersebut tidak atau belum tahu bagaimana caranya. Tabel akan tampil lebih baik bila menggunakan kode HTML daripada menggunakan gambar.
Mari kita belajar bagaimana cara membuat tabel di postingan menggunakan kode HTML yang kita kemas secara mudah banget nget nget, agar kamu yang newbie bisa mengikutinya dengan baik. Kali ini kita mulai dengan apa itu HTML. HTML bukanlah bahasa pemrograman, namun merupakan bahasa markup yang boleh dibilang merupakan "nyawa" suatu situs karena situs-situs, baik website maupun weblog, tersusun atas kode-kode HTML.
Kode HTML digunakan untuk menampilkan sesuatu hal yang ingin kita tampilkan. Kali ini kita akan belajar bersama tentang penggunaan kode HTML untuk menampilkan tabel dengan berbagai bentuknya. Langsung saja, kita mulai belajarnya.
Tag untuk menampilkan tabel adalah tag <table>. Tag ini mendefinisikan bahwa kode yang berada di antara <table> dan </table> mendeskripsikan tampilan tabel. <table> dapat disisipi dengan Atribut-atribut tertentu yang dituliskan setelah kata table dan sebelum kurung siku tutup (>). Adapun atribut tersebut adalah sebagai berikut.
| Nomor | Nama Atribut | Fungsi |
|---|---|---|
| 1 | border='value' | Mengatur tebal garis pada tabel. Nilai value antara 1 hingga tak terhingga. |
| 2 | cellpadding='value' | Mengatur jarak antara teks dengan garis-garis tabel. Nilai value antara 1 hingga tak terhingga. |
| 3 | cellspacing='value' | Mengatur jarak garis-garis dalam tabel. Nilai value antara 1 hingga tak terhingga. |
| 4 | bgcolor='value' | Mengganti warna background tabel. Value bisa diisi kata-kata warna dalam bahasa Inggris atau kode warna. |
| 5 | align='value' | Mengatur penempatan teks pada area tabel. Right untuk rata kanan, left untuk rata kiri, dan center untuk rata tengah. |
Sebenarnya ada lagi atribut yang lain, namun yang sering digunakan adalah yang saya tampilkan di atas. Cara penulisan dan penempatan atribut tersebut akan dijelaskan di contoh berikut.
<table border='3' cellspacing='4' cellpadding='6' bgcolor='green' align='center'>
...
...
...
</table>
Maksud dari kode di atas adalah memerintah untuk menampilkan tabel dengan tebal garis tabel bernilai 3, jarak antar garis dalam tabel bernilai 4, jarak teks dengan garis tabel bernilai 6, warna latar belakang kuning, dan teksnya rata tengah. Namun contoh di atas tidak bisa mennghasilkan suatu tabel. Mengapa? Karena belum menjelaskan berapa jumlah baris yang diminta, berapa jumlah kolom yang diminta, dan data bagaimana yang ingin dimasukkan dalam setiap sel di tabel. Untuk itu, kita akan mengenal beberapa istilah dalam membuat tabel dan yang seharusnya mengisi titik-titik di atas.
| Nomor | Nama | Fungsi |
|---|---|---|
| 1 | <tr>...</tr> | Mengekspresikan suatu baris dalam tabel. Ingat, baris adalah yang memanjang secara vertikal. |
| 2 | <th>...</th> | Mengatur keluaran teks yang tebal untuk suatu judul dalam tabel. Di tabel ini, yang ditulis menggunakan <tr>...</tr> adalah sel yang bertuliskan Nomor, Nama, dan Fungsi. |
| 3 | <td>...</td> | Mengekspresikan suatu kolom dalam suatu baris dalam tabel. Ingat, kolom adalah yang memanjang secara horizontal. |
| 4 | <caption>...</caption> | Memberi label pada tabel seperti pada tabel ini yang bertuliskan Beberapa Istilah yang Perlu Kamu Ketahui dalam Membuat Tabel |
Sekarang kita akan mempraktekkan bagaimana cara membuat tabel sangat mudah terlebih dahulu. Kita akan membuat tabel 2 x 4 (2 baris, 4 kolom) yang berwarna hijau. Lihat kode di bawah ini, amati, pelajari, dan ketikkan ulang agar kamu terbiasa.
<table border='3' cellpadding='4' cellspacing='15' bgcolor='green'>
<tr>
<th>Isi seterah kalian</th>
<th>Isi seterah kalian</th>
</tr>
<tr>
<td>Isi seterah kalian</td>
<td>Isi seterah kalian</td>
</tr>
<caption>Isi seterah kalian</caption>
</table>
Hasil jadinya akan menjadi seperti ini :
| Isi seterah kalian | Isi seterah kalian |
|---|---|
| Isi seterah kalian | Isi seterah kalian |
Bereksplorasilah dengan sedikit penjelasan saya kali ini tentang bagaimana cara membuat tabel mudah dengan kode HTML di postingan blog atau di manapun di situs kamu. Berlatihlah mengetik di notepad, simpan dengan menambahkan ekstensi .html di belakang nama kamu, kemudian buka untuk melihat hasilnya. Sebenarnya ada satu lagi hal yang penting dalam hal pembuatan tabel, tapi akan kita bahas di postingan lainnya, cara membuat tabel merge cell dengan menggunakan kode HTML.
No comments:
Post a Comment