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 :
Hasilnya :
Isi Tabel
Tampak tulisan rapat kiri dengan dinding garis tabel, sobat bisa merubahnya agar menjadi ke tengah dengan menambahnkan elemen align="center"
Contohnya :
Hasilnya :
Isi Tabel
Bagaimana jika bordernya saya ganti dengan angka yang lebih tinggi, misalnya angka 7 dan lihat perubahan yang terjadi pada tabelnya :
Hasilnya:
Isi Tabel
Untuk menambah kolom menjadi 2, sobat tinggal menambahkan elemen yang sama dibawahnya, seperti ini contohnya :
Hasilnya :
Kolom 1 Baris 1
Kolom 2 Baris 1
Sedangkan untuk membuat 3 baris, kira-kira seperti ini kodenya :
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 :
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 :
Kolom 1 Baris 3
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
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 1
Kolom 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 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 :
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 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 :
Kolom 1 Baris 3
Kolom 1 Baris 1 | Kolom 2 Baris 1 |
Kolom 1 Baris 2 | Kolom 2 Baris 2 |
Kolom 2 Baris 3 |
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
0 comments:
Post a Comment