Bagaimana ya cara bikin tabel di blog bloger?...
Mungkin pertanyaan ini pernah muncul di fikiran anda, yah tentunya ini di sebabkan karena artikel atau isi blog kita tersebut memerlukan adanya tabel.
Tapi ga pakai tabel kan bisa juga?...
Bisa sih... tapi kan kurang bagus di lihatnya dan kurang jelas, dengan adanya tabel kita bisa memperjelas tujuan kita, selain itu akan terlihat lebih mantap, iya to...
Contoh:
Misalnya ketika kita menjual beberapa produk di blog kita, dan kita ingin membuat sebuah halaman kusus dimana halaman tersebut akan kita isi dengan semua produk yang kita tawarkan, tentu kita perlu membuat tabel, iya kaga?...
Okey, mari kita kembali ke topik utama yaitu Cara Membuat Tabel Di Blog Blogger.
Untuk membuat tabel di blogger kita hanya perlu beberapa kode html saja, yang nantinya akan kita gunakan dalam pembuatan tabel, berikut kode-kode html tersebut:
Jika ingin merubahnya menjadi 3 kolom kesamping dan 1 kolom kebawah anda cukup menambahkan kode <td>Kolom Tambahan atau Kolom 3</td> saja sebelum kode </table> dan hasilnya akan terlihat seperti ini
1. Membuat Tabel 2 Kolom kesamping dan 2 kolom kebawah, maka kita cukup menuliskan kode html berikut:
Keterangan :
Pada tulisan yang saya tulis kolom 1, kolom 1A, kolom 2, dst adalah tempat untuk memasukkan tulisan, link, atau gambar anda. Silahkan ganti sesuai keperluan.
Sedangkan kode ini.
Mungkin pertanyaan ini pernah muncul di fikiran anda, yah tentunya ini di sebabkan karena artikel atau isi blog kita tersebut memerlukan adanya tabel.
Tapi ga pakai tabel kan bisa juga?...
Bisa sih... tapi kan kurang bagus di lihatnya dan kurang jelas, dengan adanya tabel kita bisa memperjelas tujuan kita, selain itu akan terlihat lebih mantap, iya to...
Contoh:
Misalnya ketika kita menjual beberapa produk di blog kita, dan kita ingin membuat sebuah halaman kusus dimana halaman tersebut akan kita isi dengan semua produk yang kita tawarkan, tentu kita perlu membuat tabel, iya kaga?...
Okey, mari kita kembali ke topik utama yaitu Cara Membuat Tabel Di Blog Blogger.
Untuk membuat tabel di blogger kita hanya perlu beberapa kode html saja, yang nantinya akan kita gunakan dalam pembuatan tabel, berikut kode-kode html tersebut:
<table> dan </table>
<tr> dan </tr>
<td> dan </td>
<tr> dan </tr>
<td> dan </td>
Beneran cuma itu saja kode yang di perlukan untuk membuat tabel?...
YA... cukup dengan 3 atau 6 kode tersebut saja kita bisa membuat tabel. tapi ada sedikit kode tambahan sih...
Mari kita mulai praktek. Silahkan sambil di fahami ya, soalnya kalau terlalu detail nanti artikelnya kepanjangan.
1. Membuat Tabel 2 Kolom kesamping dan 1 kolom kebawah, maka kita cukup menuliskan kode html berikut:
YA... cukup dengan 3 atau 6 kode tersebut saja kita bisa membuat tabel. tapi ada sedikit kode tambahan sih...
Mari kita mulai praktek. Silahkan sambil di fahami ya, soalnya kalau terlalu detail nanti artikelnya kepanjangan.
1. Membuat Tabel 2 Kolom kesamping dan 1 kolom kebawah, maka kita cukup menuliskan kode html berikut:
<table width="500" border="1">
<tr>
<td>Kolom 1 </td>
<td>Kolom 2 </td>
</tr>
</table>
Dan Hasilnya akan terlihat seperti ini:
Kolom 1 | Kolom 2 |
Jika ingin merubahnya menjadi 3 kolom kesamping dan 1 kolom kebawah anda cukup menambahkan kode <td>Kolom Tambahan atau Kolom 3</td> saja sebelum kode </table> dan hasilnya akan terlihat seperti ini
Kolom 1 | Kolom 2 | Kolom 3 |
1. Membuat Tabel 2 Kolom kesamping dan 2 kolom kebawah, maka kita cukup menuliskan kode html berikut:
<table width="500" border="1">
<tr>
<td>Kolom 1 A </td>
<td>Kolom 1 B </td>
</tr>
<tr>
<td>Kolom 2 A </td>
<td>Kolom 2 B </td>
</tr>
</table>
Hasilnya Seperti ini:
Kolom 1 A | Kolom 1 B |
Kolom 2 A | Kolom 2 B |
Jika ingin merubahnya menjadi 3 kolom kesamping dan 2 kolom kebawah
anda cukup menambahkan kode <td>Kolom Tambahan 1 atau 2
</td> di antara <tr> dan </tr> pertama dan kedua
Contoh:
Contoh:
<table width="500" border="1">Maka hasilya seperti ini
<tr>
<td>Kolom 1 A</td>
<td>Kolom 2 A</td>
<td>Kolom Tambahan 1</td>
</tr>
<tr>
<td>Kolom 1 B</td>
<td>Kolom 2 B</td>
<td>Kolom Tambahan 2 </td>
</tr>
</table>
Kolom 1 A | Kolom 2 A | Kolom Tambahan 1 |
Kolom 1 B | Kolom 2 B | Kolom Tambahan 2 |
1. Membuat Tabel 3 Kolom kesamping dan 3 kolom kebawah. jika ingin
membuat tabel 3 kolom kesamping dan kebawah maka anda cukup menambahkan
kode ini sebelum kode </table>
<tr>Hasil kode htmlnya akan seperti ini
<td>Kolom 3 A </td>
<td>Kolom 3 B </td>
<td>Kolom 3 C </td>
</tr>
<table width="500" border="1">Dan hasil tabelnya akan terlihat seperti ini
<tr>
<td>Kolom 1 A </td>
<td>Kolom 1 B </td>
<td>Kolom 1 C </td>
</tr>
<tr>
<td>Kolom 2 A </td>
<td>Kolom 2 B </td>
<td>Kolom 2 C </td>
</tr>
<tr>
<td>Kolom 3 A </td>
<td>Kolom 3 B </td>
<td>Kolom 3 C </td>
</tr>
</table>
Kolom 1 A | Kolom 1 B | Kolom 1 C |
Kolom 2 A | Kolom 2 B | Kolom 2 C |
Kolom 3 A | Kolom 3 B | Kolom 3 C |
Keterangan :
Pada tulisan yang saya tulis kolom 1, kolom 1A, kolom 2, dst adalah tempat untuk memasukkan tulisan, link, atau gambar anda. Silahkan ganti sesuai keperluan.
Sedangkan kode ini.
<table width="500" border="1">
Kode yang saya beri warna biru "500"
adalah lebar tabel tersebut, anda bisa merubahnya menjadi 700px,
400px, dsb. Jika anda ingin membuat tabel selebar 700px maka anda cukup
menulisnya 700 saja.
Mau Coba Praktek?...
Jika ingin mencoba bikin tabel di blog anda silahkan kopi paste saja kode yang sudah saya tuliskan di atas, terserah mau pakai yang mana.
Namun jika setelah kode tersebut anda pasang dan hasilnya tidak sama dengan contoh tabel di blog ini anda jangan heran, itu permasalahannya cuma di CSS nya saja, karena setiap template beda dan tidak semua template blogger ada CSS untuk tabel.
Solusinya yaitu dengan menambahkan kode CSS sendiri di template blog anda, anda bisa memakai kode CSS ini
Jika anda sudah faham CSS silahkan bikin kode CSS tabel sesuai selera anda.
Wah saya ga tau gimana dan di mana meletakkan CSSnya.
Untuk menambahkan CSS yang saya tuliskan di atas silahkan ke Design terus ke Edit Html, disana lah tempat persemayaman CSS blog blogger anda (Untuk bagian Edit Html ini nanti akan saya bahas secara tersendiri)
Selamat mencoba dan semoga berhasil.
Mau Coba Praktek?...
Jika ingin mencoba bikin tabel di blog anda silahkan kopi paste saja kode yang sudah saya tuliskan di atas, terserah mau pakai yang mana.
Namun jika setelah kode tersebut anda pasang dan hasilnya tidak sama dengan contoh tabel di blog ini anda jangan heran, itu permasalahannya cuma di CSS nya saja, karena setiap template beda dan tidak semua template blogger ada CSS untuk tabel.
Solusinya yaitu dengan menambahkan kode CSS sendiri di template blog anda, anda bisa memakai kode CSS ini
th, td {margin:0;padding: 5px; border:1px solid #ccc; text-align:center;}
Wah saya ga tau gimana dan di mana meletakkan CSSnya.
Untuk menambahkan CSS yang saya tuliskan di atas silahkan ke Design terus ke Edit Html, disana lah tempat persemayaman CSS blog blogger anda (Untuk bagian Edit Html ini nanti akan saya bahas secara tersendiri)
Selamat mencoba dan semoga berhasil.
BACA JUGA YANG INI :
Tips N Trik
- Inilah Nutrisi Yang Terkandung Pada Buah Jambu Air Dan Manfaatnya Bagi Kesehatan, Salah Satunya Untuk Kesuburan Pria
- Tips Makeup Untuk Si Kacamata,biar si doi tambah ngiler
- Fakta,Orang yang Tidur Larut Malam dan Bangun Siang Lebih Sukses Karirnya
- Sering Melamun Jadi Lebih Cerdas
- Cara Semut Selamat Dari Banjir Besar
- Cara memasak mie instant yang benar
- Tips agar kamera hp bisa memotret mahluk halus
- Ternyata Gosok Gigi dengan Jari Bagus Untuk Kesehatan
- [BUAT YANG MUSLIM] yuk Kenali Ini Ciri-Ciri Daging BABI / CELENG ,Jangan Ampe Kemakan
- 5 Posisi Seks Yang Tidak Boleh Anda Lakukan [Pict]
- Lebih Sehat Mana Teh atau Kope ??
- Bahaya Helm Yang Jarang Dicuci
- Bahaya Makan Mie Instant setiap hari
- Dampak Negatif sering memakai Headset
- Tips Menghilangkan Bekas Cupang
- Jangan Pernah Memisahkan Ibu dari Anaknya yang Baru Lahir
- Cara Memperkuat Sinyal Wifi Dengan Kaleng Bekas
- Tips Berkendara yang Aman Saat Musim Hujan
- 3 Cara Mudah Menghindari Bakso Daging Babi
- Ingin Hamil? Ke Dokter Gigi Aja...
- Cara Agar Bangun Pagi Tidak Ngantuk
- Jangan Pakai Mesin Pengering Setelah Cuci Tangan!!
- Tips Aman Dan Benar Membersihkan Telinga
- Ini Nih 5 Cara Angkat Sel Kulit Mati yang Wow Banget
- Penemuan Baru ! Otak Disetrum Agar Pintar?
Blogger Tutorial
- Cara Membuat Tabel,kotak,kolom di Blog
- Cara membuat kotak iklan (Banner Box)
- Membuat Recent Post by Label Thumbnail Saja
- Cara Membuat Menu Navigasi Horisontal Bercabang / Drop Down
- CopyGator | Menemukan Penggemar Situs Anda
- Cara membuat status loading blog
- cara membagi elemen gadget menjadi dua kolom
- Membuat Rocking Rolling Rounded Menu dengan JQuery dan CSS3
- Merubah Judul Postingan Yang SEO Friendly
- Cara membuat efek shadow pada judul posting
- Membuat Readmore Dengan Gambar & Teks
- Membuat Related Post/ Artikel Terkait Di Bawah Postingan
- Kunci Merubah Ukuran Blogger Anda(kelas pemula)
- Cara Merubah Lebar Halaman Posting di Blogger (kelas pemula)
- Cara Merubah Ukuran Sidebar Pada Blogger (kelas pemula)
- Cara Merubah Ukuran Header Pada Blogger (kelas pemula)
- Cara Mendaftarkan Blog/Website ke Bing Webmaster Tools - Tutorial
- Cara Paling Ampuh Atasi Komentar Spam Yang Merajalela
- Cara Mendaftar Dan Setting FeedBurner
- Menampilkan daftar isi pada label tertentu
- Cara Menghilangkan Tulisan Showing All Posts With Label di Blog
- Widget Random Post Dengan Thumbnail Via 2leep
- Cara Mudah Membuat Menu Tab View
- Cara Mengedit Template HTML Blog Yang Baik Dan Benar
- Cara Membuat Menu Horizontal Drop Down Versi 2