Cara Menciptakan Tabel Di Posting Blog

Postingan kali ini mengacu pada Cara Membuat Tabel di Posting Blog. Sebenarnya admin juga sering lupa cara menciptakan tabel di blog, memang si penting ga penting tapi biasanya untuk menciptakan situs web jadi lebih rapih terutama dalam 1 page yang berisi banyak link mungkin pastinya ga lezat diliat mata he". Yuk mari sama" berguru kita simak post berikut :

1. Membuat Tabel

Untuk menciptakan table biasanya ada 3 elemen utama yang mesti diketahui yaitu table, tr dan td. Tag <table> yaitu untuk menciptakan tabel lalu di ikuti dengan tag <tr> (table rows) yaitu untuk menciptakan baris pada tabel lalu tag <td> (table data) yaitu untuk menciptakan kolom pada tabel, kolom-kolom hasil dari tr dan td ini disebut dengan table cell yaitu sebagai lokasi dimana kita memasukkan data-data yang akan di tampilkan.

Berikut yaitu pola 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 yaitu menyerupai 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 gres agan/i tinggal menambahkan kode <tr> ... </tr> beserta isinya sebelum penutup </table>

2. Mengatur lebar dan tinggi tabel. 

Untuk mengatur lebar dan tinggi table dipakai atribut width dan height atau bisa juga dengan style CSS. Mengatur lebar dan tinggi tabel sangat penting terutama biar bisa diadaptasi dengan post dan isi blog. Satuan width dan height bisa dipakai dalam persentase 0-100% maupun dengan pixel.

Berikut yaitu pola tabel dengan lebar 80% dari lebar dokumen dan lebar kolom masing 50% dengan tinggi pada baris pertama yaitu 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 yaitu menyerupai 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>

3. Menggabungkan kolom pada tabel

Table Cell atau baris dan kolom dari tabel tersebut sanggup kita gabungkan sesuai kebutuhan bentuk tabel yang diinginkan. Untuk menggabungkan kolom tersebut didalam tabel dipakai 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 yaitu menyerupai 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 sehabis baris 2 yaitu dengan baris ke 3.

4. Mengatur jarak pada tabel bab dalam dan luar

Setelah otak atik diatas niscaya ada yang terlihat kurang rapih kan, nah kemungkinan posisi text yang kurang gimana gitu. Yap untuk mengatur posisi cell dalam tabel dipakai atribut cellpadding dan cellspacing. Cellpadding yaitu untuk pengaturan sisi dari bab dalam cell, sedangkan Cellspacing yaitu pengaturan sisi dari bab 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 yaitu menyerupai 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 bab 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?

6. Membuat background pada tabel beserta Judul

Yang terakhir biar terlihat jelas, dan menarik pastikan tabel diberi judul dan background. Untuk menciptakan background pada tabel kita gunakan atribut style dengan properti background. Berikut yaitu pola table dengan background warna kuning muda dengan heading warna merah.

<table border="1" cellpadding="10" cellspacing="10" style="background:#ffc">   <th style="background:#860000;width:50%;">Judul Kolom 1</th>   <th style="background:#860000;">Judul Kolom 2</th>   <th style="background:#860000;">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 yaitu menyerupai 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 putih cat kuning, dan style="background:#860000" bisa merubah warna dasar Judul menjadi merah tua. Untuk instruksi penambahan judul cukup menambahkan <th>Judul Kolom 1</th> begitu juga dengan judul kolom ke 2 dst.

Gimana agan/i semua cukup terang kan? ok sekian artikel Cara Membuat Tabel di Posting Blog sekiranya bisa bermanfaat bagi semua ya, selamat berkreasi, dan jangan lupa komentar jikalau ada pertanyaan, terima kasih.