Top Music

Home » » Cara Membuat Tabel blog

Cara Membuat Tabel blog

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
.....
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 :







Isi Tabel



Hasilnya :

Isi Tabel


Tampak tulisan rapat kiri dengan dinding garis tabel, sobat bisa merubahnya agar menjadi ke tengah dengan menambahnkan elemen align="center"

Contohnya :







Isi Tabel



Hasilnya :

Isi Tabel


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







Isi Tabel



Hasilnya:

Isi Tabel


Untuk menambah kolom menjadi 2, sobat tinggal menambahkan elemen yang sama dibawahnya, seperti ini contohnya :








Kolom 1 Baris 1



Kolom 2 Baris 1



Hasilnya :

Kolom 1 Baris 1Kolom 2 Baris 1


Sedangkan untuk membuat 3 baris, kira-kira seperti ini kodenya :
















Kolom 1 Baris 1



Kolom 2 Baris 1



Kolom 1 Baris 2



Kolom 2 Baris 2



Kolom 1 Baris 3



Kolom 2 Baris 3



Hasilnya :



Kolom 1 Baris 1Kolom 2 Baris 1
Kolom 1 Baris 2Kolom 2 Baris 2
Kolom 1 Baris 3Kolom 2 Baris 3


Untuk menambahkan warna pada border dan background tabel, sobat tinggal menyisipkan kode seperti berikut :
















Kolom 1 Baris 1



Kolom 2 Baris 1



Kolom 1 Baris 2



Kolom 2 Baris 2



Kolom 1 Baris 3



Kolom 2 Baris 3



Hasilnya :



Kolom 1 Baris 1Kolom 2 Baris 1
Kolom 1 Baris 2Kolom 2 Baris 2
Kolom 1 Baris 3Kolom 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 :















Kolom 1 Baris 1



Kolom 2 Baris 1



Kolom 1 Baris 2



Kolom 2 Baris 2



Kolom 1 Baris 3



Kolom 2 Baris 3



Hasilnya :



Kolom 1 Baris 1Kolom 2 Baris 1
Kolom 1 Baris 2Kolom 2 Baris 2
Kolom 1 Baris 3Kolom 2 Baris 3


Selamat Mencoba !! kreasikan sendiri tabelnya ya..
Share this article :

0 komentar:

Popular Post

http://cuerosbhelatos.blogspot.com/2011/12/slide-out-sidebar-content-with-css-ease.html