Cara Membuat Tabel di Postingan Blogger Lengkap

Cara Membuat Tabel di Postingan Blogger Lengkap - Ketika akan menulis konten di blog, ada kalanya dibutuhkan sebuah kotak berbentuk tabel untuk menampilkan data-data informasi agar terlihat lebih rapi dan pengunjung pun dapat lebih mudah menangkap informasi dari postingan. Tabel merupakan daftar yang berisi ikhtisar sejumlah data-data informasi yang biasanya berupa kata-kata, bilangan, maupun gambar yang tersusun rapi dengan garis pembatas. Fungsi tabel ini banyak digunakan oleh para blogger yang memiliki blog atau situs online shop untuk menampilkan daftar nama barang yang akan dijual beserta harga dari masing-masing barang di dalam postingan mereka.

Untuk membuat tabel ini cukup mudah. Disini anda hanya harus mengetahui sedikit perintah tag dasar HTML untuk membuat tabel dan mengikuti langkah demi langkah yang akan saya sajikan berikut dengan teliti.

Perintah dasar tag HTML untuk membuat tabel :

<table>...</table> Adalah Perintah untuk membuat tabel

<tr>...</tr> Adalah Perintah untuk membuat baris

<td>...</td> Adalah Perintah untuk membuat kolom

border, width, align, background, color Adalah Kode tambahan untuk pengaturan tebal garis 

border, lebar tabel, perataan teks, warna text, dan background

Cara Membuat Tabel di dalam Postingan Blogspot

Untuk membuat tabel di dalam postingan, silahkan pilih menu Postingan, lalu klik Entri baru. Ganti mode postingan terlebih dahulu dari mode Compose ke mode HTML agar script kode HTML tersebut bisa berjalan.

Membuat Tabel 2 Kolom 1 Baris :
Masukkan kode di bawah ini

<table>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
</table>

Hasilnya akan seperti ini.

Baris 1 Kolom 1

Baris 1 Kolom 2

Untuk menambah 2 kolom 1 baris kebawah cukup menambahkan kode berikut diatas kode </table>.

<tr>
<td>Baris 2 Kolom 1 </td>
<td>Baris 2 Kolom 2 </td>
</tr>

Setelah ditambahkan, maka kodenya akan terlihat seperti berikut.

<table>
<tr>
<td>Baris 1 Kolom 1 </td>
<td>Baris 1 Kolom 1 </td>
</tr>
<tr>
<td>Baris 2 Kolom 1 </td>
<td>Baris 2 Kolom 2 </td>
</tr>
</table>

Dan hasilnya akan seperti berikut.

Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Membuat Tabel 3 Kolom 1 Baris :
Untuk membuat tabel 3 kolom 1 baris cukup menambahkan kode <td>ISI TABEL</td>.
Masukkan kode dibawah ini.

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

Hasilnya akan seperti berikut.

Baris 1 Kolom 1

Baris 1 Kolom 2

Baris 1 Kolom 3

Untuk menambahkan 3 kolom 1 baris kebawah, cukup dengan menambahkan kode berikut diatas kode </table>.

<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
<td>Baris 2 Kolom 3</td>
</tr>

Setelah ditambahkan, maka kodenya akan terlihat seperti berikut.

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

Dan hasilnya akan seperti ini.

Baris 1 Kolom 1	Baris 1 Kolom 2	Baris 1 Kolom 3
Baris 2 Kolom 1	Baris 2 Kolom 2	Baris 2 Kolom 3

NB : Setiap akan menambah kolom dan baris, maka lakukan langkah-langkah yang sudah saya jelaskan tadi diatas.

Menggunakan Merge Cell pada Tabel di Postingan Blogger

Untuk menggunakan fungsi merge cell pada tabel, anda hanya perlu menambahkan kode cosplan dan rowspawn.

Berikut contoh penggunaan kodenya.

<table>
<tr>
<td colspan="2">mergecell1</td>
<td>Baris 1 Kolom 3</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td rowspan="2">mergecell2</td>
<td>Baris 2 Kolom 3</td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 3</td>
</tr>
</table>

Hasilnya akan menjadi seperti berikut.

mergecell 1		Baris 1 Kolom 3
Baris 2 Kolom 1	mergecell 2	Baris 2 Kolom 3
Baris 3 Kolom 1		Baris 3 Kolom 3

Menambahkan Warna pada Tabel

Memberikan warna pada tabel merupakan cara untuk membuat tampilan tabel di postingan blog menjadi lebih menarik. Disini anda bisa memberi warna pada text didalam tabel maupun background pada tabel. Dengan tampilan tabel yang menarik, tentu saja akan membuat pengunjung atau pembaca akan berlama-lama membaca artikel di blog anda.

Cara Mengganti Warna Text pada Tabel
Untuk mengganti warna text yang berada didalam tabel, disini anda hanya perlu menambahkan kode style='color:warna' ke dalam tag <td>, sehingga kodenya akan terlihat seperti berikut.

<td style='color:warna'>

Catatan : Ganti tulisan warna dengan warna favorit anda seperti red, blue, orange, green dan seterusnya. Atau dengan kode warna html.

Berikut contoh penggunaan warna pada text di dalam tabel

<table>
<tr>
<td style='color:orange'>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
</table>

Hasilnya akan seperti berikut.

Baris 1 Kolom 1

Baris 1 Kolom 2

Cara Mengganti Warna Background Tabel
Untuk mengganti warna backgorund tabel caranya hampir sama dengan mengganti warna text, disini anda hanya perlu menambahkan style='background:warna' di dalam tag <td>, sehingga kodenya akan terlihat seperti berikut

<td style='background:warna'>

Contoh penggunaan kode warna pada background tabel

<table>
<tr>
<td style='background:orange'>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
</table>

Hasilnya akan seperti berikut.

Baris 1 Kolom 1

Baris 1 Kolom 2

Merubah Lebar Tabel
Untuk merubah lebar tabel, anda hanya perlu manambahkan kode style='width:500px;' ke dalam tag <table>, dan semua kodenya akan terlihat seperti berikut.

<table style='width:500px;'>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
</table>

Catatan : Silahkan ganti nilai 500 sesuai keperluan anda.

Membuat Text Tabel Rata Tengah Kiri atau Kanan
Untuk membuat posisi text tabel, apakah rata kiri, rata kanan, atau rata kiri, anda hanya cukup menambahkan kode align='center' ke dalam kode tag <td>. Kodenya akan tampak seperti berikut.

Catatan : Silahkan ganti tulisan warna merah dengan kode posisi yang anda inginkan
- center : kode untuk rata tengah.
- left : kode untuk rata kiri.
- right : kode untuk rata kanan.

Berkut contoh penggunannya kode center (rata tengah).

<table>
<tr>
<td align='center'>Baris 1 Kolom 1</td>
<td align='center'>Baris 1 Kolom 2</td>
</tr>
</table>

Hasilnya akan seperti berikut.

Baris 1 Kolom 1

Baris 1 Kolom 2

Baca juga :

• Cara Membuat Tombol Demo dan Download di Postingan Blog

Demikian tutorial sederhana mengenai cara membuat tabel di postingan blogger secara lengkap. Semoga dapat bermanfaat and " Happy Blogging "

Related Posts :

Silahkan klik disini untuk berlangganan Artikel Gratis via email, Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di HARMANSYAH BLOG