Buat Tabel di 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

<style type="text/css">
.tg-left { text-align: left; } .tg-right { text-align: right; } .tg-center { text-align: center; }
.tg-bf { font-weight: bold; } .tg-it { font-style: italic; }
.tg-table-plain { border-collapse: collapse; border-spacing: 0; font-size: 100%; font: inherit; }
.tg-table-plain td, .tg-table-plain th { border: 1px #555 solid; padding: 10px; vertical-align: top; }
</style>
<table class="tg-table-plain">
<tr>
<th>1</th>
<th>SD Pius</th>
</tr>
<tr class="tg-even">
<td>2</td>
<td>SD Islam 02</td>
</tr>
<tr>
<td>3</td>
<td>SD Muhammadiyah 01 Kandang Panjang</td>
</tr>
<tr class="tg-even">
<td>4</td>
<td>SDN Panjang Wetan 01</td>
</tr>
<tr>
<td>5</td>
<td>SDN Sampangan 01</td>
</tr>
<tr class="tg-even">
<td>6</td>
<td>SD Islam Setono 01</td>
</tr>
<tr>
<td>7</td>
<td>SDN Degayu 01</td>
</tr>
<tr class="tg-even">
<td>8</td>
<td>SDN Degayu 02</td>
</tr>
<tr>
<td>9</td>
<td>SDN Gamer 01</td>
</tr>
<tr class="tg-even">
<td>10</td>
<td>SDN Gamer 02</td>
</tr>
<tr>
<td>11</td>
<td>SDN Sapuro 01</td>
</tr>
<tr class="tg-even">
<td>12</td>
<td>SDN Medono 07</td>

Hasil jadinya seperti di bawah ini

1	SD Pius
2	SD Islam 02
3	SD Muhammadiyah 01 Kandang Panjang
4	SDN Panjang Wetan 01
5	SDN Sampangan 01
6	SD Islam Setono 01
7	SDN Degayu 01
8	SDN Degayu 02
9	SDN Gamer 01
10	SDN Gamer 02
11	SDN Sapuro 01
12	SDN Medono 07
13	SDN Sapuro 03
14	SDN Sapuro 04