Membuat Tabel Untuk Postingan Blog Valid HTML5

Sebenarnya sudah banyak yang saya coba 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 mengunakan 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 pernah saya coba dan berhasil valid HTM5 yaitu dengan menggunakan tablesgenerator.com

Membuat tabel di tablesgenerator.com sangat sederhana sekali, berikutlah tutorialnya.

1. Silahkan buat tabel sederhana dengan microsoft office word atau microsoft office excel agar mudah dalam pembuatannya dan masukkan data-data yang ingin Anda lampirkan dalam tabel tersebut. Kemudian copy table tersebut dengan memblok semua konten tabelnya.
2. 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 tampilan 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.
3. 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 lebar tabelnya sesuai dengan lebar postingan silahkan tambahkan kode width:100% pada kode CSS paling atas. Dan untuk kode HTML-nya silahkan simpan dimana Anda ingin menampilkan 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>

Jika Anda telah selesai melakukan langkah-langkah di atas maka 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 melihat DEMO-nya yang lain bisa Anda lihat di blog ini

• Demo

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250