Cara Membuat Tabel Di Blogger

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:

<table> dan </table>
<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:

<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:

<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

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>
<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.

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

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.
---------------------------------------

Data Pelanggan

Nama	Alamat	Email	Nomor Telepon
David Beckham	Manchester, Inggris	davidbeckham@example.com	021-01010xxx
Mike Tyson	California, Amerika Serikat	miketyson@example.com	021-9198199189291929
Justin Bieber	New York, Amerika Serikat	justinbierber@example.com	021-2929292929101019
Selena Gomez	Texas, Amerika Serikat	selena.gomez@example.com	021-819199191991919