Cara Menciptakan Tabel Dalam Postingan Di Blogger

By. Dedi Yahya S

Pada kesempatan kali ini saya akan menunjukkan trik dan panduan ihwal Cara untuk menciptakan tabel dalam postingan pada blogspot.

Cara Membuat Tabel Di Blog Blogger

Untuk menciptakan tabel di blogger kita hanya perlu beberapa aba-aba 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 aba-aba yang di perlukan untuk menciptakan tabel?...

YA... cukup dengan 3 atau 6 aba-aba tersebut saja kita dapat menciptakan tabel. tapi ada sedikit aba-aba perhiasan sih...

Mari kita mulai praktek. Silahkan sambil di fahami ya, soalnya kalau terlalu detail nanti artikelnya kepanjangan.

• Membuat Tabel 2 Kolom kesamping dan 1 kolom kebawah, maka kita cukup menuliskan aba-aba html berikut:

<table width="500" border="1">
<tr>
<td>Kolom 1 </td>
<td>Kolom 2 </td>
</tr>
</table> 

Dan Hasilnya akan terlihat menyerupai ini:

Kolom 1

Kolom 2

Jika ingin merubahnya menjadi 3 kolom kesamping dan 1 kolom kebawah anda cukup menambahkan aba-aba <td>Kolom Tambahan atau Kolom 3</td> saja sebelum aba-aba </table> dan akhirnya akan terlihat menyerupai ini :

Kolom 1

Kolom 2

Kolom 3

• Membuat Tabel 2 Kolom kesamping dan 2 kolom kebawah, maka kita cukup menuliskan aba-aba 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 aba-aba <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 menyerupai ini :

Kolom 1 A	Kolom 2 A	Kolom Tambahan 1
Kolom 1 B	Kolom 2 B	Kolom Tambahan 2

• Membuat Tabel 3 Kolom kesamping dan 3 kolom kebawah. kalau ingin menciptakan tabel 3 kolom kesamping dan kebawah maka anda cukup menambahkan aba-aba ini sebelum aba-aba </table>

<tr>
<td>Kolom 3 A </td>
<td>Kolom 3 B </td>
<td>Kolom 3 C </td>
</tr>

Hasil aba-aba htmlnya akan menyerupai 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 menyerupai 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 goresan pena yang aku tulis kolom 1, kolom 1A, kolom 2, dst yaitu kawasan untuk memasukkan tulisan, link, atau gambar anda. Silahkan ganti sesuai keperluan. 
• Sedangkan aba-aba ini.

<table width="500" border="1">

• Kode yang aku beri warna biru "500" yaitu lebar tabel tersebut, anda dapat merubahnya menjadi 700px, 400px, dsb. Jika anda ingin menciptakan tabel selebar 700px maka anda cukup menulisnya 700 saja.

Mau Coba Praktek?...

Jika ingin mencoba bikin tabel di blog anda silahkan kopi paste saja aba-aba yang sudah aku tuliskan di atas, terserah mau pakai yang mana.

Namun kalau sesudah aba-aba tersebut anda pasang dan akhirnya tidak sama dengan teladan tabel di blog ini anda jangan heran, itu permasalahannya cuma di CSS nya saja, sebab setiap template beda dan tidak semua template blogger ada CSS untuk tabel.

Solusinya yaitu dengan menambahkan aba-aba CSS sendiri di template blog anda, anda dapat menggunakan aba-aba CSS ini :

th, td {margin:0;padding: 5px; border:1px solid #ccc; text-align:center;}

Jika anda sudah faham CSS silahkan bikin aba-aba CSS tabel sesuai selera anda.

Wah aku ga tau gimana dan di mana meletakkan CSSnya.

Untuk menambahkan CSS yang aku tuliskan di atas silahkan ke Design terus ke Edit Html, disana lah kawasan persemayaman CSS blog blogger anda (Untuk potongan Edit Html ini nanti akan aku bahas secara tersendiri)

Demikian blogger tutorial mengenai Cara Membuat Tabel Ke Dalam Postingan pada Blogspot.


Semoga bermanfaat dan supaya berhasil.
Terima Kasih ^_^

Bagikan Artikel ini