Cara Menciptakan Tabel Di Postingan Blogger Lengkap

Cara Membuat Tabel di Postingan Blogger Lengkap Cara Membuat Tabel di Postingan Blogger Lengkap

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

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

Perintah dasar tag HTML untuk menciptakan tabel :

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

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

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

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

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

Cara Membuat Tabel di dalam Postingan Blogspot

Untuk menciptakan tabel di dalam postingan, silahkan pilih sajian Postingan, kemudian klik Entri baru. Ganti mode postingan terlebih dahulu dari mode Compose ke mode HTML semoga script instruksi HTML tersebut sanggup berjalan.

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

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

Hasilnya akan menyerupai ini.

Baris 1 Kolom 1

Baris 1 Kolom 2

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

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

Setelah ditambahkan, maka kodenya akan terlihat menyerupai 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 akhirnya akan menyerupai berikut.

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

Membuat Tabel 3 Kolom 1 Baris :
Untuk menciptakan tabel 3 kolom 1 baris cukup menambahkan instruksi <td>ISI TABEL</td>.
Masukkan instruksi 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 menyerupai berikut.

Baris 1 Kolom 1

Baris 1 Kolom 2

Baris 1 Kolom 3

Untuk menambahkan 3 kolom 1 baris kebawah, cukup dengan menambahkan instruksi berikut diatas instruksi </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 menyerupai 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 akhirnya akan menyerupai 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 memakai fungsi merge cell pada tabel, anda hanya perlu menambahkan instruksi cosplan dan rowspawn.

Berikut teladan 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 menyerupai berikut.

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

Menambahkan Warna pada Tabel

Memberikan warna pada tabel merupakan cara untuk menciptakan tampilan tabel di postingan blog menjadi lebih menarik. Disini anda sanggup memberi warna pada text didalam tabel maupun background pada tabel. Dengan tampilan tabel yang menarik, tentu saja akan menciptakan 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 menyerupai berikut.

<td style='color:warna'>

Catatan : Ganti goresan pena warna dengan warna favorit anda menyerupai red, blue, orange, green dan seterusnya. Atau dengan instruksi warna html.

Berikut teladan 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 menyerupai 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 menyerupai berikut

<td style='background:warna'>

Contoh penggunaan instruksi 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 menyerupai berikut.

Baris 1 Kolom 1

Baris 1 Kolom 2

Merubah Lebar Tabel
Untuk merubah lebar tabel, anda hanya perlu manambahkan instruksi style='width:500px;' ke dalam tag <table>, dan semua kodenya akan terlihat menyerupai 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 menciptakan posisi text tabel, apakah rata kiri, rata kanan, atau rata kiri, anda hanya cukup menambahkan instruksi align='center' ke dalam instruksi tag <td>. Kodenya akan tampak menyerupai berikut.

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

Berkut teladan penggunannya instruksi 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 menyerupai berikut.

Baris 1 Kolom 1

Baris 1 Kolom 2

Landai

Cara Menciptakan Tabel Di Postingan Blogger Lengkap

Menu Halaman Statis