Cara Membuat Tabel Pada Postingan
Topik kita kali ini adalah membuat tabel di blog, sebenarnya sangat mudah hanya membutuhkan sedikit kode HTML anda sudah bisa membuat sebuah tabel. Lagi-lagi kode HTML, yah begitulah namanya juga blog pasti selalu berhubungan dengan kode ribet yang satu ini. Untuk membuat tabel cukup dengan perintah <table> ..... </table> yang didalamnya terdapat atribut sebagai berikut :
- bordercolor --> warna dari garis tabel
- bgcolor --> warna dari background tabel
- cellpadding --> jarak antara tulisan dengan garis luar tabel
- cellspacing --> jarak antar tulisan
- border --> ketebalan garis pinggir tabel
- dotted --> garis titik putus-putus
- dashed --> garis datar putus-putus
- double --> garis rangkap dua
- align --> posisi dari isi tabel, bisa kiri, tengah, atau kanan
- width --> lebar tabel
- height --> tinggi tabel
<table width="250" border="1">
<tr>
<td>
Isi Tabel
</td>
</tr>
</table>
Hasilnya :
Isi Tabel |
Tampak tulisan rapat kiri dengan dinding garis tabel, anda bisa merubahnya agar menjadi ke tengah dengan menambahnkan elemen align="center"
Contohnya :
<table width="250" border="1">
<tr>
<td align="center">
Isi Tabel
</td>
</tr>
</table>
Hasilnya :
Bagaimana jika bordernya saya ganti dengan angka yang lebih tinggi, misalnya angka 7 dan lihat perubahan yang terjadi pada tabelnya :Hasilnya :
Isi Tabel |
<table width="250" border="7">
<tr>
<td align="center">
Isi Tabel
</td>
</tr>
</table>
Hasilnya:
Isi Tabel |
Untuk menambah kolom menjadi 2, anda tinggal menambahkan elemen yang sama dibawahnya, seperti ini contohnya :
<table width="350" border="7">
<tr>
<td align="center">
Kolom 1 Baris 1
</td>
<td align="center">
Kolom 2 Baris 1
</td>
</tr>
</table>
Hasilnya :
Kolom 1 Baris 1 | Kolom 2 Baris 1 |
Sedangkan untuk membuat 3 baris, kira-kira seperti ini kodenya :
<table width="400" border="1">
<tr>
<td align="center">
Kolom 1 Baris 1
</td>
<td align="center">
Kolom 2 Baris 1
</td>
</tr>
<tr>
<td align="center">
Kolom 1 Baris 2
</td>
<td align="center">
Kolom 2 Baris 2
</td>
</tr>
<tr>
<td align="center">
Kolom 1 Baris 3
</td>
<td align="center">
Kolom 2 Baris 3
</td>
</tr>
</table>
Hasilnya :
Kolom 1 Baris 1 | Kolom 2 Baris 1 |
Kolom 1 Baris 2 | Kolom 2 Baris 2 |
Kolom 1 Baris 3 | Kolom 2 Baris 3 |
Untuk menambahkan warna pada border dan background tabel, anda tinggal menyisipkan kode seperti berikut :
<table width="400" border="1" bordercolor="blue">
<tr bgcolor="yellow">
<td align="center">
Kolom 1 Baris 1
</td>
<td align="center">
Kolom 2 Baris 1
</td>
</tr>
<tr bgcolor="yellow">
<td align="center">
Kolom 1 Baris 2
</td>
<td align="center">
Kolom 2 Baris 2
</td>
</tr>
<tr bgcolor="yellow">
<td align="center">
Kolom 1 Baris 3
</td>
<td align="center">
Kolom 2 Baris 3
</td>
</tr>
</table>
Hasilnya :
Untuk garis tabel yang putus - putus, bisa anda tambahkan dotted atau dashed.Hasilnya :
Kolom 1 Baris 1 | Kolom 2 Baris 1 |
Kolom 1 Baris 2 | Kolom 2 Baris 2 |
Kolom 1 Baris 3 | Kolom 2 Baris 3 |
Bisa kan ? ga bisa ya, oke deh saya kasih contoh satu lagi :
<table width="400" border="1" bordercolor="blue" style="border-style:dashed; border-collapse:collapse">
<tr bgcolor="yellow">
<td align="center">
Kolom 1 Baris 1
</td>
<td align="center">
Kolom 2 Baris 1
</td>
</tr>
<tr bgcolor="yellow">
<td align="center">
Kolom 1 Baris 2
</td>
<td align="center">
Kolom 2 Baris 2
</td>
</tr>
<tr bgcolor="yellow">
<td align="center">
Kolom 1 Baris 3
</td>
<td align="center">
Kolom 2 Baris 3
</td>
</tr>
</table>
Kolom 1 Baris 1 | Kolom 2 Baris 1 |
Kolom 1 Baris 2 | Kolom 2 Baris 2 |
Kolom 1 Baris 3 | Kolom 2 Baris 3 |
maaf ya...klo hasilnya kurang bagus...maklum...postingnya sambil ngantuk berat...
mudah-mudahan anda bisa membuat yang lebih baik lagi...
selamat berkreasi..