Cara Gampang Menciptakan Tabel Untuk Postingan Blog Semoga Valid Html5

Sebenarnya sudah banyak yang sharing cara gampang menciptakan tabel untuk blog, namun sehabis aku coba hampir dari semuanya tidak memperhatikan validasi HTML5 karenanya tabel yang kita lampirkan pada postingan blog menyumbangkan banyak error pada validasi HTML5. Membuat tabel dengan mengeditnya eksklusif memakai kode-kode html pembentuk tabel aku rasa cukup memusingkan otak di kepala ini. Apalagi data-data yang ada di dalam tabel cukup banyak.

Nah untuk membentuk atau menciptakan tabel untuk postingan blog dengan gampang namun tetap valid HTML5, kita dapat memakai salah satu tabel editor online yang sudah aku coba dan berhasil valid HTML5 yakni dengan memakai Tablesgenerator.com

Langkah Pertama

Silahkan buat table sederhana dengan Microsoft Word atau Microsoft Excel semoga gampang dalam pembuatannya dan masukan data-data yang ingin Anda lampirkan dalam tabel tersebut. Kemudian copy table tersebut dengan memblok semua konten tabelnya.

Langkah Kedua

Silahkan masuk ke http://www.tablesgenerator.com/html_tables lalu klik pada hidangan File dan pilih option Paste tabel data. Nah silahkan paste-kan table yang tadi di-copy pada kotak yang disediakan lalu klik tombol Load. Maka akan tampil tabel dengan data-data yang tadi Anda paste, silahkan rapihkan tabel (jika tampilannya belum rapih). Anda juga dapat menentukan beberapa tema yang telah disediakan, silahkan pilih tema yang cocok dengan selera Anda.

Kemudian klik tombol Generate untuk mendapat arahan CSS dan HTML-nya. Setelah itu klik tombol Copy to clipboard.

Langkah Ketiga

Silahkan buat postingan dan tampilkan dalam editor HTML lalu PASTE untuk arahan tabel yang tadi di copy to clipboard.

Agar tablenya valid HTML5, silahkan tambahkan arahan scoped pada arahan <style type='text/css'> menjadi ibarat ini <style type='text/css' scoped> Kemudian simpan kelompok arahan CSS-nya ini paling atas dari editor post (di atas seluruh arahan postingan yang Anda tulis) dalam posisi editor HTML. Silahkan pisahkan antara arahan CSS dengan arahan HTML-nya. Biasanya lebar tabelnya mengikuti jumlah kolom yang ada, nah semoga lebar tabelnya sesuai dengan lebar postingan silahkan tambahkan arahan width:100% pada arahan CSS paling atas.

Dan untuk arahan HTML-nya silahkan simpan di mana Anda ingin menampilkannya di dalam postingan Anda.

Sebagai contoh aku menciptakan sebuah tabel di Tablesgenerator.com yang sudah di tambah kode-kode di atas yang valid HTML5 dan lebarnya sesuai dengan lebar postingan. 

Kode CSS

Silahkan simpan kelompok arahan CSS ini paling atas dari editor post (di atas seluruh arahan postingan yang Anda tulis) dalam posisi editor HTML.

 <style type='text/css' scoped>
 .tg-table-paper {width:100%; border-collapse: collapse; border-spacing: 0; }
 .tg-table-paper td, .tg-table-paper th { background-color: #F3F5EF; border: 1px #bbb solid; color: #333; font-family: sans-serif; font-size: 100%; padding: 10px; vertical-align: top; }
 .tg-table-paper .tg-even td  { background-color: #F0F0E5; }
 .tg-table-paper th  { background-color: #EAE2CF; color: #333; font-size: 110%; font-weight: bold; }
 .tg-table-paper tr:hover td, .tg-table-paper tr.even:hover td  { color: #222; background-color: #FFFBEF; }
 .tg-bf { font-weight: bold; } .tg-it { font-style: italic; }
 .tg-left { text-align: left; } .tg-right { text-align: right; } .tg-center { text-align: center; }
 </style>

Kode HTML

 <table class="tg-table-paper">
   <tr>
     <th colspan="4" class="tg-center tg-bf">Bokingan  Hari Biasa</th>
   </tr>
   <tr class="tg-even">
     <td>Jenis Kamar</td>
     <td>Harga</td>
     <td>Jumlah Kamar</td>
     <td>Jumlah</td>
   </tr>
   <tr>
     <td>Ekonomi</td>
     <td>Rp. 150.000</td>
     <td>5 kamar</td>
     <td>Rp. 750.000</td>
   </tr>
   <tr class="tg-even">
     <td>Standar</td>
     <td>Rp. 200.000</td>
     <td>5 kamar</td>
     <td>Rp. 1.000.000</td>
   </tr>
   <tr>
     <td>Standar AC</td>
     <td>Rp. 300.000</td>
     <td>4 kamar</td>
     <td>Rp. 1.200.000</td>
   </tr>
   <tr class="tg-even">
     <td>VIP/Family</td>
     <td>Rp. 350.000</td>
     <td>1 kamar</td>
     <td>Rp. 350.000</td>
   </tr>
 </table>

Selamat mencoba...

Sumber https://www.kompiajaib.com/

Share this post