Cara Mudah Membuat Tabel Untuk Postingan Blog Agar Valid HTML5

Cara Mudah Membuat Tabel Untuk Postingan Blog Agar Valid HTML5

Bola Hero Gawai

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...

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

50 Comments Add Comment

Wah Lebih keren yang ini dar pada punya saya yah Kang
Salut deh Kang Adhy saya perlu belajar lagi dari pengalaman
Kang Adhy tentang Tabel , Title , Keywords

Balas

Sip Pertamax yang makin menipis tapi masih ada di Blognya Kang Adhy

Balas

Saya terinspirasi dari postingan kang Saud kemarin. Saya paling males jika bikin postingan dengan menyertakan tabel bisa bikin pusing kepala kang. Jadi saya coba cari cara mudah membuatnya namun tetep valid HTML5.

Makasih atas inspirasinya kang... hehehehe =D

Balas

wuih..postingnya Mas Kompi manteb2 bener nih :-bd

Balas

Heheheh bade sabaraha galon kang? Mangga antri we hehehehe =D

Balas

Hehehehe biar ga pusing bikin tabel di postingan mas =D tapi tetep valid HTML5 :D

Balas

nanti kalau saya buat postingan yang ada tabelnya pasti tak coba mas

Balas

Kalo saya naroh CSSnya di dalam template Kang, ternyata itu berpengaruh sama widget yang dibuat berdampingan :)
Yang belum teratasi tabel yang diarsip kalender masih error he..

Balas

kalau blog saya buat table rasanya aneh ya, kira2 ada yang mau beli tidak kuntilanak dan pocong ya kwkwkwkwk... seremm :)

Balas

Oke Kang sama-sama tapi tetap salut bagus komplit
Dan valid Html5. kalau saya yah masih harus banyak
Belajar maklum Kang dalam upaya belajar makasih :-d

Balas

Gakgakagk Mbak Leony ada-ada aja ketewa dulu akh :-)
Saya beli tuyul nya aja Mbak buat mainan hehehh :)

Balas

siap :) kiriman anda pada malam ini jam 12 sampai mas heheheh :-d

Balas

ada diskon 60% mas jika pesan tiga. nbak kunti, pocong dan sundel. kkwkwkwkwk... @@,

Balas

mantap kang,, pekerjaan jadi lebih ringan.. :-d

Balas

Sangat keren ya mas tampilannya udah gitu Valid lagi . :)

Balas

Pake MS word ternyata bisa juga ya, kayaknya ini opsi yang bakal saya pilih kang :D

Balas

mf kang teu ka tombol OOT .. meh langsung diwaler hehe
Kang coba lihat postingan2 yg bukan blogazine .. ko ada scroll ke pinggir ya
padahal di beranda gak ada .. terang te kg kunaon tah ??

Balas

Sudah teratasi kang hehe .. ada html ngeror
BTW keren nih kang buat yg ikut contest SEO ..

Balas

Kita semua dalam proses belajar kang =D

Balas

Silahkan mas Agus =D

Balas

bagus nih kang valid html5 lagi hehe terima kasih kang salut sama akang yang bisa membuat table valid html5 terus berkarya ya kang .. :)

Balas

Jika ingin tabelnya hanya satu macam saja, CSSnya lebih baik simpan di Edit HTML, namun jika inigin ganti-ganti tampilan tabel sebaiknya pakai cara ini. Iya nanti saya cek barang kali saya ada solusi....

Balas

Hehehehe lucu juga kalau bikin tabel hantu =D

Balas

iya mas =D jadi enggak bikin pusing :D

Balas

Iya mas itu yang pentingnya =D tampilannya ok namun tetap valid.

Balas

Iya bisa mas, sebenarnya pakai MS Word bisa aja pakai trik Save As Web tapi kodenya error semua di validasi HTML5

Balas

Biasana mah aya elemen blog anu horizontal sareng width-nya melebihi kang, abdi kantos ngalaman, masalahna tina lebar menu header.

Balas

Mantap mas adi, saya sudah cek validasi halaman posting ini, dan hasilnya Passed. Memang rajanya valid HTML5 nih :D

Balas

Makasih sista Friska =D atas apresiasinya...

Balas

Hasil dari belajar kang hehehee :D

Balas

Keren mas saya simpan dulu scriptnya

Balas

Hhehe kalau saya malah biasanya kalau bikin table pakai DW .. :)

Balas

wah, ini sangat bermanfaat jika aku sewaktu-waktu mau buat tabel..
makasih mas tutorialnya..

Balas

mas, mau tanya nih, gimana caranya agar item widget pada sidebar bisa rata tengah sejajar ke bawah??
soalnya item widget pada sidebar blogku rata tengah tapi menyamping.
mohon bantuannya mas..

Balas

Coba pakai ini
<div style="text-align:center">
KODE WIDGET
</div>

Balas

sipp mas,, berhasil..
thanks :D

Balas

Silahkan mas =D

Balas

Orang yang kreatif pasti akan menemukan banyak cara..
Tapi sayang .. Aku selalu di pusingkan dengan hal edit mengedit..
Alhasil... Blognya yaa tetep manteb jadulnya tanpa editan apapun

Balas

keren mas ,,,,,,,, memang benar-benar valid tapi mas di css3 masih ada 3 error


Balas

Ohhh itu bukan dari table tapi dari template blog ada kesalahan ketik kode hehehe udah saya betulkan. makasih informasinya.

Balas

Heheheehe kalau mau belajar pasti bisa sis... tar juga pusingnya malah jadi ketagihan...coba saja... =D

Balas

Silahkan dicoba mas =D

Balas

Mantab gan infonya..blog informatif, unik dan pantas sbg rujukan blogger newbie. thanks sdh di share... jgn lupa mampir ke blog saya, Blog Dofollow Auto Approve tentang blackhat web traffic, backlink gratis dll http://backlinkpr1.co.vu .

Balas

Mantab gan infonya..blog informatif, unik dan pantas sbg rujukan blogger newbie. thanks sdh di share... jgn lupa mampir ke blog saya, Blog Dofollow Auto Approve tentang blackhat web traffic, backlink gratis dll http://backlinkpr1.co.vu

Balas

makasih bos.. tablenya keren banget :D keliatan profesional banget :D

Balas

Makasih Gan...mo praktek dulu nih...

Balas

Makasih Gan...mo praktek dulu nih...

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×