Cara Membuat Tabel

Topik kita kali ini adalah membuat tabel di blog, sebenarnya sangat mudah hanya membutuhkan sedikit kode HTML sobat 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


Bingung ya, begini contoh pertama yang paling simple :

<table width="250" border="1">
<tr>
<td>

Isi Tabel

</td>
</tr>
</table>

Hasilnya :

Isi Tabel


Tampak tulisan rapat kiri dengan dinding garis tabel, sobat 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 :

Isi Tabel


Bagaimana jika bordernya saya ganti dengan angka yang lebih tinggi, misalnya angka 7 dan lihat perubahan yang terjadi pada tabelnya :

<table width="250" border="7">
<tr>
<td align="center">

Isi Tabel

</td>
</tr>
</table>

Hasilnya:

Isi Tabel


Untuk menambah kolom menjadi 2, sobat 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, sobat 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 bgcolor="yellow">
<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 garis tabel yang putus - putus, bisa sobat tambahkan dotted atau dashed.
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 bgcolor="yellow>
<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


Selamat Mencoba !! kreasikan sendiri tabelnya ya..

Berlangganan artikel terbaru via Email
Artikel Lainnya :

7 comments

14 Oktober 2009 06.36

cara membuat banner yang rapi seperti punya ente bagaimana sih..apakah cukup menggunakan tutorial seperti ini (cara membuat label)??

http://img230.imageshack.us/img230/8079/caramembuattabel.jpg

14 Oktober 2009 06.59

@emerzet615 : klo mo buat banner rapi ke tengah, pke aja <div align="center"> letak banner </div>, bs jg sih pke tabel

28 Februari 2010 13.23

mas tulisan kolom 1 baris 1 itu diisi apa ?

28 Februari 2010 18.15

@ Fajri : ya terserah mas fajri mo di isi apa, buat tabel biasanya buat apa?

20 Maret 2010 23.14

tu kode di simpan dimana ya bouz... di template atao di postingan?

27 Oktober 2011 10.51

Dari blog dengan artikel yang sama. Artikel pada blog ini yang bisa langsung saya terapkan dan berhasil. Thank's broo,,,,,,,

27 Maret 2012 15.46

Thx sob... trik di terapkan 100% succes

Poskan Komentar

Reader Community

Recent Comments