Cara Membuat Table di Blogger - Motoha Media

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.

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>

Cukup dengan 3 atau 6 kode tersebut saja kita bisa membuat tabel lalu ada sedikit kode tambahan aja.

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;}

Untuk menambahkan CSS di atas, silahkan ke Design
terus ke Edit Html, disanalah tempat persemayaman CSS blog blogger.

Untuk tips blogger lainnya, silahkan klik gambar di bawah ini:

Selamat mencoba dan semoga berhasil.