Pengenalan dan Cara Membuat Tabel di Post

Tabel pada postingan blog sama halnya dengan tabel pada umumnya yang terdiri dari kolom dan baris. Selain untuk memasukan data dengan rapih, tabel juga berfungsi untuk mengurutkan data sesuai susunan kategori. Menggunakan tabel bisa jadi sangat penting untuk menyampaikan suatu fakta informasi atau ikhtisar, karena tabel lebih menarik untuk dilihat dan dibaca.

Untuk membuat tabel pada postingan hanya dibutuhkan tiga kode perintah utama, yaitu : <table>, <tr> dan <td>. Penjelasan : <table> perintah untuk membuat tabel <tr> perintah untuk membuat baris dan <td> perintah untuk membuat kolom. Sebagai ilustrasi penerapan kodenya seperti ini :
<table>  
<tr>  
<td>Baris 1 - Kolom 1</td>  
<td>Baris 1 - Kolom 2</td>  
</tr>  
<tr>  
<td>Baris 2 - Kolom 1</td>  
<td>Baris 2 - Kolom 2</td>  
</tr>  
</table>
Kode diatas akan menghasilkan table dengan fungsi 2 kolom dan 2 baris yang belum di pisahkan oleh garis pembatas tiap data. seperti berikut:

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

Untuk memberi garis pemisah antar data, kalian dapat menggunakan perintah border.

<table border="2">  
<tr>  
<td>Baris 1 - Kolom 1</td>  
<td>Baris 1 - Kolom 2</td>  
</tr>  
<tr>  
<td>Baris 2 - Kolom 1</td>  
<td>Baris 2 - Kolom 2</td>  
</tr>  
</table>

Hasilnya akan tergambar seperti berikut:

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


Selain perintah border masih banyak sekali kode perintah untuk mempercantik tampilan table. beberapa diantaranya seperti width (ukuran lebar table), bgcolor (warna background) dan align (perataan). Pengaplikasian kodenya saya gabungkan menjadi seperti ini :
<table border="5" width="500">  
<tr bgcolor="#3496E1">  
<td align="center">Baris 1 - Kolom 1</td>  
<td align="center">Baris 1 - Kolom 2</td>  
</tr>  
<tr>  
<td>Baris 2 - Kolom 1</td>  
<td>Baris 2 - Kolom 2</td>  
</tr>  
</table>
Hasilnya :

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

Sedangkan untuk menambah dan menggabungkan baris dan kolom akan kita pelajari dipost selanjutnya.

Related Posts:

Disqus Comments
© 2017 Obachti 95 - Template Created by goomsite - Proudly powered by Blogger