Cara Membuat Table di Blogger
Daftar Isi
Mungkin pertanyaan ini pernah muncul di fikiran anda, yah tentunya ini
di sebabkan karena artikel atau isi blog kita tersebut memerlukan
adanya tabel.
Berikut dasar-dasar membuat tabel:
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>
1. Membuat Tabel 2 Kolom kesamping dan 1 kolom ke bawah, 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 |
2. 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:
<table width="500" 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>
Maka hasilya 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. jika ingin
membuat tabel 3 kolom kesamping dan kebawah maka anda cukup menambahkan
kode ini sebelum kode </table>
<tr>
<td>Kolom 3 A </td>
<td>Kolom 3 B </td>
<td>Kolom 3 C </td>
</tr>
Hasil kode htmlnya akan seperti ini
<table width="500" 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>
Dan hasil tabelnya akan terlihat 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 :
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. Dan bisa juga ditulis dengan persentase, misalnya: 50%, 100%, dsb.
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;}
Selamat mencoba dan semoga berhasil.
Posting Komentar