Cara buat Tabel Pada Postingan Blog

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 :
<tabel> : perintah untuk membuat tabel
<tr> : perintah untuk membuat baris
<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.