Cara Membuat Tabel di Blog Valid HTML5

Oleh Unknown

Jumat, 06 Juni 2014

Bagikan :

Tweet

Cara Membuat Tabel di Blog Valid HTML5 - Terkadang, ketika kita ingin memposting sesuatu, kita harus membutuhkan yang namanya tabel. Tabel ini berfungsi untuk mempermudah pembaca dalam melihat data-data yang ingin kita sampaikan. Dengan tabel pula, data-data kita akan lebih rapi dan teratur. 

Di sini, saya akan menjelaskan cara membuat tabel di postingan dan tabelnya sudah valid HTML5. Cara membuatnya memang sedikit panjang. Tapi, akan jadi mudah jika kita mencobanya terlebih dahulu. 

Langkah Pertama

Silahkan anda buat terlebih dahulu, terserah mau di Microsoft Excel atau Microsoft Word. Kalau saya lebih menyarankan dengan menggunakan Microsoft Excel. Karena lebih mudah menurut saya. 

Lalu, silahkan buat tabel yang berisi data-data yang ingin Anda posting. Tabelnya tidak usah diatur sebagus mungkin. Karena pengaturan tabelnya pada langkah kedua. Setelah sudah jadi tabelnya dan sudah diisi data-datanya, silahkan copy tabel tersebut dengan memblok seluruh tabelnya.

Langkah Kedua

Silahkan masuk di Tool Table Generator DI SINI. Lalu, klik menu File -- Paste table data.

Kemudian, akan muncul jendela pop up. Silahkan paste-kan tabel yang sudah dicopy tadi. Seperti pada gambar di bawah ini. Setelah itu, klik Load.

Langkah Ketiga

Tabel yang sudah anda buat akan tampil di halaman pengaturannya. Silahkan atur jika kurang pas dan sesuai. Anda bisa mengatur warnanya mungkin agar lebih serasi dengan template blog anda. Jika semuanya sudah dan menurut anda pas, klik tombol Generate. Jika anda menemukan kotak centang Do not generate CSS dan Compact mode, itu jangan dicentang. Kemudian, akan muncul kode tabelnya di bawahnya.

Langkah Keempat

Silahkan copy CSS-nya terlebih dahulu. Jika CSS tabelnya ingin valid HTML5, silahkan tambahkan atribut scoped. Dan agar lebarnya sesuai dengan lebar postingan kita, silahkan tambahkan width:100%. Sehingga, akan menjadi seperti ini.

<style type="text/css" scoped>
.tg  {width:100%;border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-p5ym{font-weight:bold;background-color:#ffce93;text-align:center}
.tg .tg-hfgn{background-color:#dadaf4}
.tg .tg-hy62{background-color:#c0c0c0}
</style>

Lalu, buka halaman postingan anda yang ingin anda tambahkan tabel. Buka postingan mode HTML, silahkan simpan CSS ini paling atas sendiri dari kode-kode yang lain. Tapi, jika anda ingin menjadikan style tabel-nya tetap (tidak ganti-ganti) di blog kita, silahkan simpan CSS tersebut pada Edit HTML di atas ]]></b:skin> atau </style> dan hilangkan kode <style type="text/css" scoped> dan tag penutup </style> nya.

Kembali lagi ke halaman Tool Table Generator-nya, silahkan copy juga HTML-nya, dan simpan di mana anda ingin meletakkannya. Sama, taruh kode tersebut di postingan itu tadi pada mode HTML. Contoh seperti berikut ini adalah kode yang saya ambil dari Tool Table Generator.

<table class="tg">
  <tr>
    <th class="tg-p5ym">Negara</th>
    <th class="tg-p5ym">Pendapatan Per Kapita</th>
    <th class="tg-p5ym">Golongan Negara (Maju/Berkembang)</th>
  </tr>
  <tr>
    <td class="tg-hy62">Amerika Serikat</td>
    <td class="tg-hy62">$ 49.601</td>
    <td class="tg-hy62">Negara Maju</td>
  </tr>
  <tr>
    <td class="tg-hfgn">Jerman</td>
    <td class="tg-hfgn">AS$ 34.212</td>
    <td class="tg-hfgn">Negara Maju</td>
  </tr>
  <tr>
    <td class="tg-hy62">India</td>
    <td class="tg-hy62">US$ 3.991</td>
    <td class="tg-hy62">Negara Berkembang</td>
  </tr>
  <tr>
    <td class="tg-hfgn">Mesir</td>
    <td class="tg-hfgn">US$ 6.653</td>
    <td class="tg-hfgn">Negara Berkembang</td>
  </tr>
  <tr>
    <td class="tg-hy62">Australia</td>
    <td class="tg-hy62">$ 39.699</td>
    <td class="tg-hy62">Negara Maju</td>
  </tr>
</table>

Jadinya, akan seperti tabel di bawah ini.

Negara	Pendapatan Per Kapita	Golongan Negara (Maju/Berkembang)
Amerika Serikat	$ 49.601	Negara Maju
Jerman	AS$ 34.212	Negara Maju
India	US$ 3.991	Negara Berkembang
Mesir	US$ 6.653	Negara Berkembang
Australia	$ 39.699	Negara Maju

Cukup mudah bukan. Semoga bermanfaat. 

Tag : Blogging, HTML5