Cara Membuat Table Di postingan Blog

#Tags

Dalam Pembuatan Tabel Di postingan blog kita hanya perlu memahami beberapa kode HTML  saja  yang nantinya akan kita gunakan dalam pembuatan tabel, dan kode tersebut bisa anda lihat di bawah ini

<table> dan </table>
 <tr> dan </tr>
  <td> dan </td> 
  
bagai mana dengan kode di atas ? mudah jasa bukan, dan sekarang saya akan memberikan beberapoa contoh table biar lebih paham dan mengerti
Berikut ini contoh buat table nya:


<table border="1">
 <tr>
  <td>Kolom 1</td>
  <td>Kolom 2</td>
  <td>Kolom 3</td>
 </tr>
</table>
Hasilnya adalah seperti berikut :

Kolom 1 Kolom 2 Kolom 3

nah yg di atas itu contoh pembuatan table 3 kolom dan klu mau buat 1 kolom tinggal di delete saja  dari  <td>-------</td> begitu juga klu mau tambah kolom tinggal di tambah lagi   <td>------</td>  di bawah nya,
ok buat table 3 kolom nya sudah skrg kita lanjut buat table 3 baris, cara nya seperti ini;


<table border="1">
 <tr>
  <td>Baris 1 </td>
 </tr>
 <tr>
  <td>Baris 2 </td>
 </tr>
 <tr>
  <td>Baris 3 </td>
 </tr>
</table>
Hasilnya adalah seperti berikut :

Baris 1
Baris 2
Baris 3 

Berikut adalah contoh tabel yang terdiri dari 3 baris dan 3 kolom dengan default border :

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

Hasilnya adalah seperti berikut :

Cell 1 - Baris 1 Kolom 1 Cell 2 - Baris 1 Kolom 2 Cell 3 - Baris 1 Kolom 3
Cell 4 - Baris 2 Kolom 1 Cell 5 - Baris 2 Kolom 2 Cell 6 - Baris 2 Kolom 3
Cell 7 - Baris 3 Kolom 1 Cell 8 - Baris 3 Kolom 2 Cell 9 - Baris 3 Kolom 3

Untuk pembuatan kolom baru, kolom 4 dst hanya tinggal menambahkan kode <td>Cell 3 - Baris 1 Kolom 3</td> sebelum penutup </tr>, begitu juga untuk menambahkan baris baru agan/i tinggal menambahkan kode <tr> ... </tr> beserta isinya sebelum penutup </table>
Mengatur lebar dan tinggi tabel. 
Untuk mengatur lebar dan tinggi table digunakan atribut width dan height atau bisa juga dengan style CSS. Mengatur lebar dan tinggi tabel sangat penting terutama agar bisa disesuaikan dengan post dan isi blog. Satuan width dan height bisa digunakan dalam persentase 0-100% maupun dengan pixel.
Berikut adalah contoh tabel dengan lebar 80% dari lebar dokumen dan lebar kolom masing 50% dengan tinggi pada baris pertama adalah 50px.

<table border="1" width="80%">
 <tr>
  <td style="width:50%; height:50px;">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>
 <tr>
  <td>Baris 3 Kolom 1</td>
  <td>Baris 3 Kolom 2</td>
  <td>Baris 3 Kolom 3</td>
 </tr>
</table>

Hasilnya adalah seperti berikut :

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

Seperti terlihat diatas, terlihat bukan bedanya, untuk pengaturan baris/kolom ke 2 dst, cukup menambahkan style="width:50%; heght:50px;" didalam kurung <td>
Menggabungkan kolom pada tabel
Table Cell atau baris dan kolom dari tabel tersebut dapat kita gabungkan sesuai kebutuhan bentuk tabel yang diinginkan. Untuk menggabungkan kolom tersebut didalam tabel digunakan atribut colspan atau rowspan untuk baris.

<table border="1" width="80%">
 <tr>
  <td colspan="3">Gabung Baris 1 &amp; Kolom 1-3</td>
 </tr>
 <tr>
  <td rowspan="2">Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
  <td>Baris 2 Kolom 3</td>
 </tr>
 <tr>
  <td>Baris 3 Kolom 2</td>
  <td>Baris 3 Kolom 3</td>
 </tr>
</table>

Hasilnya adalah seperti berikut :

Gabung Baris 1 & Kolom 1-3
Baris 2 Kolom 1 Baris 2 Kolom 2 Baris 2 Kolom 3
Baris 3 Kolom 2 Baris 3 Kolom 3

Seperti yang terlihat diatas kode cosplan="3" mampu menggabungkan 3 kolom sekaligus dari kolom 1-3, dan kode rowspan="2" mampu menggabungkan 2 baris sesudah baris 2 yaitu dengan baris ke 3.
Mengatur jarak pada tabel bagian dalam dan luar
Setelah otak atik diatas pasti ada yang terlihat kurang rapih kan, nah kemungkinan posisi text yang kurang gimana gitu. Yap untuk mengatur posisi cell dalam tabel digunakan atribut cellpadding dan cellspacing. Cellpadding adalah untuk pengaturan sisi dari bagian dalam cell, sedangkan Cellspacing adalah pengaturan sisi dari bagian luar cell.

<table border="1" width="80%" cellpadding="10" cellspacing="10">
 <tr>
  <td style="width:50%;">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>
 <tr>
  <td>Baris 3 Kolom 1</td>
  <td>Baris 3 Kolom 2</td>
  <td>Baris 3 Kolom 3</td>
 </tr>
</table>

Hasilnya adalah seperti berikut :

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


Seperti yang terlihat diatas kode cellpading="10" mampu mengatur jarak dari bagian dalam posisi text, perhatikan posisi text dari atas, kanan, bawah, kiri akan diberi celah 10px untuk jarak masing". Begitu juga dengan cellspacing="10" akan terlihat jarak antar masing" kolom maupun baris dengan garis tebal berjarak 10px. Terlihat kan bedanya?
Membuat background pada tabel beserta Judul
Yang terakhir biar terlihat jelas, dan menarik pastikan tabel diberi judul dan background. Untuk membuat background pada tabel kita gunakan atribut style dengan properti background. Berikut adalah contoh table dengan background warna kuning muda dengan heading warna merah.

<table border="1" cellpadding="10" cellspacing="10" style="background:#808080">
  <th style="background:#ff0000;width:50%;">Judul Kolom 1</th>
  <th style="background:#ff0000;">Judul Kolom 2</th>
  <th style="background:#ff0000;">Judul Kolom 3</th>
 <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>
 <tr>
  <td>Baris 3 Kolom 1</td>
  <td>Baris 3 Kolom 2</td>
  <td>Baris 3 Kolom 3</td>
 </tr>
</table>

Hasilnya adalah seperti berikut :

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


Seperti yang terlihat diatas kode style="background:#ffc" bisa merubah warna dasar background menjadi abu abu, dan style="background:#860000" bisa merubah warna dasar Judul menjadi merah . Untuk kode penambahan judul cukup menambahkan <th>Judul Kolom 1</th> begitu juga dengan judul kolom ke 2 dst.


Disqus Comments