Cara Mudah Membuat Tabel Di Posting Blog

Mungkin ada yang bingung bagaimana cara membuat tabel di blog, apakah copast dari microsoft word atau langsung atau bagaimana. Jawabannya adalah langsung.

Ya. Membuat tabel langsung di posting itu bisa dan mudah.

Bagaimana caranya?

Berikut adalah cara membuat tabel di posting blog:

     1. Log In ke Blogger

     2. Pilih New Post atau Buat Entri Baru atau Buat Postingan Baru

     3. Jika sudah masuk, silahkan pilih pada bagian HTML, bukan di Compose

     4. Lalu di dalam HTML ketikkan kode seperti dibawah ini

<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>

     5. Lalu pilih bagian Compose maka hasilnya akan seperti ini:

1. 1

   2

   3

     6. Kemudian sekarang kita akan membuat tabel dengan 2 baris. Letakkan kode berikut ini di bagian HTML

<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>

<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>

     7. Hasilnya akan seperti ini:

1. 1	2	3
   4	5	6

     8. Berdasarkan contoh pembuatan tabel diatas, dapat ditarik kesimpulan bahwa kode <tr> kita gunakan untuk membuat tabel kebawah. Sedangkan kode <td> kita gunakan untuk membuat tabel kesamping. Maka, apabila sobat ingin membuat tabel kebawah, gunakanlah <tr>. Jika ingin membuat tabel kesamping, gunakanlah <td>.

     9. Selanjutnya kita belajar membuat tabel dengan menambahkan warna background, lebar tabel, dan juga warna tulisan. Caranya dengan menambahkan kode bgcolor="red" border="1" style="color: white; width: 400px;" pada bagian <tabel>.

<table bgcolor="blue" border="1" style="color:white;width:400px;">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>

     10. Maka hasil dari kode diatas adalah seperti ini:

1	2	3
4	5	6

    11. Jika sobat sudah bisa, sekarang kita akan belajar membuat tabel dengan judul diatasnya dan juga mengatur lebar setiap judul tabel. Caranya adalah dengan menambahkan kode <th>Judul</th>

<table bgcolor="blue" border="1" style="color: white;">
<tbody>
<tr>
<th width="40">No</th>
<th width="400">Nama</th>
<th width="400">Alamat</th>
</tr>
<tr>
<td>1</td>
<td>Alfian Bagas</td>
<td>Belajar Corner</td>
</tr>
<tr>
<td>2</td>
<td>Bagas Alfian</td>
<td>Belajar Bersama</td>
</tr>
</table>

     12. Maka hasilnya akan seperti ini:

No	Nama	Alamat
1	Alfian Bagas	Belajar Corner
2	Bagas Alfian	Belajar Bersama

     13. Jika sobat ingin menggunakan warna backgoround yang berbeda, caranya seperti ini:

<table bgcolor="white" border="1" style="color: white;">
<tr>
<th bgcolor="blue" width="40">No</th>
<th bgcolor="green" width="400">Nama</th>
<th bgcolor="red" width="400">Alamat</th>
</tr>
<tr>
<td>1</td>
<td>Alfian Bagas</td>
<td>Belajar Corner</td>
</tr>
<tr>
<td>2</td>
<td>Bagas Alfian</td>
<td>Belajar Bersama</td>
</tr>
</table>

     14. Hasilnya akan seperti ini:

No	Nama	Alamat
1	Alfian Bagas	Belajar Corner
2	Bagas Alfian	Belajar Bersama

     15. SELESAI

Mudah Bukan? Jika sobat ada yang kesulitan, jangan sungkan untuk bertanya.

Semoga Bermanfaat