Cara Membuat Tabel Pada Postingan Blog

Cara Membuat Tabel Pada Postingan Blog ~ Kolom Membuat tabel di dalam postingan sangatlah tepat jika untuk memperindah dan menjadikan simple sebuah data yang banyak dan berdampingan. pastinya setelah diberi tabel pada postingan blog terlihat rapi dan mudah untuk dipahami.

Tutorial Cara Membuat Tabel Pada Postingan Blog kali ini akan diajarkan dari dasar mengenai proses pembuatan garis atau kolom pada tabel. dengan menggunakan perintah kode maka akan menghasilkan Tabel Kolom Postingan di blog.

Semakin panjang saja penjelasannya,, hehehe. langsung kita mulai dari awal yaitu pengenalan kode sebagai dasar pembuatannya,Untuk membuat tabel pada postingan hanya membutuhkan tiga kode perintah utama. <tabel> <tr> dan  <td>

Penjelasan :

1.     <tabel> : perintah untuk membuat tabel
2.     <tr>      : perintah untuk membuat baris
3.     <td>     : perintah untuk membuat kolom 

Itulah kode yang nantinya kita gunakan untuk pembuatan

kolom, tabel dan baris. Langsung Coba!!!!

Contoh Penyusunan Kode :

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

Hasil dari kode diatas Jika tidak menggunakan Border :

Kolom 1	Kolom 2
Kolom 3	Kolom 4

Sekarang kita buat berbentuk kotak tabel dengan menggunakan pemisah yaitu Border jadi untuk membuat hasil menjadi kolom kotak kita gunakan perintah border. Perhatikan Contoh Berikut ini:

<table border="1">
<tr>
<td>Kolom 1</td>
<td>Kolom 2</td>
</tr>
<tr>
<td>Kolom 3</td>
<td>Kolom 4</td>
</tr>
</table>

Dengan perintah tambahan yaitu border maka hasilnya seperti ini :

Kolom 1	Kolom 2
Kolom 3	Kolom 4

Keterangan :

1. Angka 1 dengan warna merah adalah tebal border, jika ingin ditebalkan tinggal ganti ukuran tebal sesuai keinginan sobat. 

2. Perhatikan Komponen kode dibawah :
<tr>
<td>Kolom 1</td>
<td>Kolom 2</td>
</tr>
<tr>
<td>Kolom 3</td>
<td>Kolom 4</td>
</tr>

Jika diperhatikan warna biru dan merah adalah sama dan disusun kebawah yang menjadikan menjadi bertingkat dua kolom seperti contoh diatas.bisa disimpulkan jika ditambah kebawah lagi maka akan bertambah kolomnya.

~Contoh Keterangan Nomor 1: ~

<table border="6">
<tr>
<td>Kolom 1</td>
<td>Kolom 2</td>
</tr>
<tr>
<td>Kolom 3</td>
<td>Kolom 4</td>
</tr>
</table>

 Dengan ukuran border dari 1 saya ganti 6 hasilnya seperti ini:

Kolom 1	Kolom 2
Kolom 3	Kolom 4

~Contoh Keterangan Nomor 2:~

<table border="1">
<tr>
<td>Kolom 1</td>
<td>Kolom 2</td>
<td>Kolom 3</td>
</tr>
<tr>
<td>Kolom 4</td>
<td>Kolom 5</td>
<td>Kolom 6</td>
</tr>
<tr>
<td>Kolom 7</td>
<td>Kolom 8</td>
<td>Kolom 9</td>
</tr>
</table>

Dari perintah diatas maka hasilnya seperti ini:

Kolom 1	Kolom 2	Kolom 3
Kolom 4	Kolom 5	Kolom 6
Kolom 7	Kolom 8	Kolom 9

NB:

Untuk Lebar kolom akan menyesuaikan dengan tulisan atau teks.  jika sobat ingin lebar kolom sesuai dengan ukuran, ikuti tutorial dibawah ini:

~ Test Perintah ~

Kode perintah Ukuran kolom.

<table border="1" style="width: 500px;"><tbody>
<tr bgcolor="#F2F2F2">
<td align="center"><b>Daftar Isi</b></td>
<td align="center"><b>Keterangan</b></td>
<td align="center"><b>Link</b></td>
</tr>
<tr>
<td align="center" style="width: 100px;">Tutorial</td>
<td align="left" style="width: 300px;">Semua Jenis Tutorial </td>
<td align="center" style="width: 100px;">Download</td>
</tr>
<tr>
<td align="center" style="width: 100px;">Makalah</td>
<td align="left" style="width: 300px;">Makalah Lengkap</td>
<td align="center" style="width: 100px;">Download</td>
</tr>
<tr>
<td align="center" style="width: 100px;">Video</td>
<td align="left" style="width: 300px;">Full Movies</td>
<td align="center" style="width: 100px;">Download</td>
</tr>
</tbody></table>

Hasil dari Kode perintah diatas : 

Daftar Isi	Keterangan	Link
Tutorial	Semua Jenis Tutorial	Download
Makalah	Makalah Lengkap	Download
Video	Full Movies	Download

Keterangan:

500 px adalah angka yang sudah dijumlahkan dari kode yang berwarna merah
100 px pertama lebar kolom kiri
300 px lebar kolom tengah
100 px terakhir lebar kolom kanan

Catatan:

 Untuk menambahkan baris baru copy kode yang berwarna MERAH tepat dibawah </tr> yang terakhir
 Untuk merubah keterangan kolom bisa langsung melalui Compose

Langkah Selanjutnya Kita buat Eksperimen agar Mendapatkan hasil yang kita inginkan : sobat bisa mencobanya sendiri. hehehe sekian dulu semoga bermanfaat.

~~~ Good Luck ~~~