Cara Mudah Membuat Tabel Untuk Postingan Blog Agar Valid HTML5

Membuat Tabel Untuk Postingan Blog
Sebenarnya sudah banyak yang sharing cara mudah membuat tabel untuk blog, namun setelah saya coba hampir dari semuanya tidak memperhatikan validasi HTML5 alhasil tabel yang kita lampirkan pada postingan blog menyumbangkan banyak error pada validasi HTML5. Membuat tabel dengan mengeditnya langsung menggunakan kode-kode html pembentuk tabel saya rasa cukup memusingkan otak di kepala ini. Apalagi data-data yang ada di dalam tabel cukup banyak.

Nah untuk membentuk atau membuat tabel untuk postingan blog dengan mudah namun tetap valid HTML5, kita bisa menggunakan salah satu tabel editor online yang sudah saya coba dan berhasil valid HTML5 yaitu dengan menggunakan Tablesgenerator.com

Langkah Pertama
Silahkan buat table sederhana dengan Microsoft Word atau Microsoft Excel agar mudah 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 kemudian klik pada menu File dan pilih option Paste tabel data. Nah silahkan paste-kan table yang tadi di-copy pada kotak yang disediakan kemudian klik tombol Load. Maka akan tampil tabel dengan data-data yang tadi Anda paste, silahkan rapihkan tabel (jika tampilannya belum rapih). Anda juga bisa memilih beberapa tema yang telah disediakan, silahkan pilih tema yang cocok dengan selera Anda.

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

Langkah Ketiga
Silahkan buat postingan dan tampilkan dalam editor HTML kemudian PASTE untuk kode tabel yang tadi di copy to clipboard.

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

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

Sebagai contoh saya membuat 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 kode CSS ini paling atas dari editor post (di atas seluruh kode 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>

Hasil jadinya seperti di bawah ini
Bokingan Hari Biasa
Jenis Kamar Harga Jumlah Kamar Jumlah
Ekonomi Rp. 150.000 5 kamar Rp. 750.000
Standar Rp. 200.000 5 kamar Rp. 1.000.000
Standar AC Rp. 300.000 4 kamar Rp. 1.200.000
VIP/Family Rp. 350.000 1 kamar Rp. 350.000


Untuk membuktikan validasinya silahkan coba test validasi halaman ini. Selamat mencoba...

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments