Cara Membuat Tabel dalam Postingan Blogger - Dulu saya pernah posting Cara Membuat Tabel di Blog Menggunakan Google Dokumen atau Google Docs, sekarang saya mau share cara membuat tabel di dalam postingan blog menggunakan kode html.
Berikut adalah beberapa kode html intinya yang nantinya digunakan untuk membuat tabel dalam postingan blog:
<table> dan </table>
<tr> dan </tr>
<td> dan </td>
Berikut prakteknya:
1. Membuat Tabel 2 Kolom kesamping dan 1 kolom kebawah, maka kita cukup menuliskan kode html sebagai berikut:
<table width="460" border="1">
<tr>
<td>Kolom 1 </td> <td>Kolom 2 </td>
</tr>
</table>
Hasilnya seperti ini:
| Kolom 1 | Kolom 2 |
Jika anda ingin merubahnya menjadi 3 kolom kesamping dan 1 kolom kebawah, anda cukup menambahkan kode Kolom Tambahan atau Kolom 3 saja sebelum kode dan hasilnya akan terlihat seperti ini:
| Kolom 1 | Kolom 2 | Kolom 3 |
2. Membuat Tabel 2 kolom kesamping dan 2 kolom kebawah, maka kita cukup menuliskan kode html sebagai berikut:
<table width="460" 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 anda ingin merubahnya menjadi 3 kolom kesamping dan 2 kolom kebawah anda cukup menambahkan kode Kolom Tambahan 1 atau 2 di antara
dan
pertama dan kedua. Seperti dibawah ini:
<table width="460" border="1">
<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>
Hasilnya seperti ini:
| Kolom 1 A | Kolom 2 A | Kolom Tambahan 1 |
| Kolom 1 B | Kolom 2 B | Kolom Tambahan 2 |
3. Membuat Tabel 3 kolom kesamping dan 3 kolom kebawah. Anda cukup menambahkan kode dibawah ini sebelum kode
<tr>
<td>Kolom 3 A </td> <td>Kolom 3 B </td> <td>Kolom 3 C </td>
</tr>
Contoh:
<table width="460" border="1">
<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>
Hasilnya seperti ini:
| 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:
1. 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.
2. Sedangkan untuk kode ini:
<table width="460" border="1">
Angka "460" adalah lebar tabel tersebut, anda bisa merubahnya menjadi berapa saja tergantungkeinginan anda misalnya 700px, 400px, dsb. Jika anda ingin membuat tabel selebar 700px maka anda cukup menulisnya 700 saja.
3. Jika setelah kode tersebut anda pasang dan hasilnya tidak sama dengan contoh tabel seperti di blog ini, 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;}
Sumber: http://blogtutorials-01.blogspot.com/
5
dengan URL: http://epuljapaneseblog.blogspot.com/2013/04/cara-membuat-tabel-dalam-postingan-blog.html
Apabila anda menyukai artikel ini atau merasa bermanfaat silahkan bagikan artikel ini di Facebook, Google+ dan Twitter anda dengan meng-klik tombol-tombol Share yang ada diatas postingan ini.
Related Post
- Cara Mendaftar di TrafikID.com
- Bagaimana Cara Meningkatkan Pengunjung Blog dengan Mudah?
- Cara Memasang Link Sumber Otomatis Ketika di Copy Paste
- Menonaktifkan Klik Kanan, Blok dan Copy pada Postingan dengan Peringatan
- Cara Membuat Kotak Teks (Text Box) di Postingan Blog
- Cara Menghilangkan Tulisan Beranda, Posting Baru, Posting Lama, Langgan Entri Atom
- Cara Memasang Share Button Google+, Facebook, Twitter dan Like Facebook
- Edit Template Blogspot Menjadi Lebih Valid XHTML
- Membuat Bullet and Numbering pada Postingan
- Cara Memasang Update Twitter di Blogspot
1 comments:
izin coba gan,thanks info dan tutor nya
Post a Comment