Cara Mudah Membuat Tabel Responsif di Artikel Blog

0
309
responsive table
gambar : dedymanado.blogspot.co.id

Cara Mudah Membuat Tabel Responsif di Artikel Blog – Ketika menulis data suatu barang terkadang tak terlewatkan menggunakan tabel, baik itu membuat di kertas, komputer / excel, atau bahkan di blog atau website.

Contohnya membuat tabel harga setiap barang jual /beli, tabel data siswa-siswi suatu sekolah, tabel pendaftaran lomba, dan lain sebagainya. Karena apabila ditulis menggunakan tabel akan terlihat lebih rapi dan mudah dilihat.

Jika membuat tabel di MS Word atau MS Excel itu sangat mudah karena sudah ada tools khusus, namun ketika membuatnya di dalam artikel blog / website itu membutuhkan kode lain, supaya panjang pendek suatu tabel bisa menyesuaikan dengan perangkat yang digunakan.

Contoh Tabel Tidak Responsif

Kode umumnya tabel itu hanya

Kodenya

<table style="undefined;table-layout: fixed; width: 187px">
<colgroup>
<col style="width: 187px">
</colgroup>
 <tr>
 <th></th>
 </tr>
</table>

Keterangan

  • width: 187px” : itu lebar tabel, semakin besar angkanya maka semakin lebar.

Jika ditambahi keterangan di dalam tabel seperti :

NAMA

Maka hanya menambahkan tulisan “NAMA” antara kode <th>NAMA</th>. Menjadi

<table class=" aligncenter" style="undefined;table-layout: fixed; width: 187px;"><colgroup> <col style="width: 187px;" /> </colgroup>
<tbody>
<tr>
<th>NAMA</th>
</tr>
</tbody>
</table>

 Keterangan.

  • Kode <table clas=” aligncenter” : menunjukan posisi tabel ada ditengah halaman, kalau mau disamping kiri maka kata “center” dirubah menjadi left
  • Kalau tulisa NAMA ingin ditempatkan di kiri hanya menambahkan kode style=”text-align: left;” diantara <th —>NAMA</th>, menjadi :
<table class=" aligncenter" style="undefined;table-layout: fixed; width: 187px;"><colgroup> <col style="width: 187px;" /> </colgroup>
<tbody>
<tr>
<th style="text-align: left;">NAMA</th>
</tr>
</tbody>
</table>

Preview

NAMA

Membuat Tabel Responsif

Ketika membuat tabel responsif membutuhkan kode tambahan. saya kasih contoh seperti dibawah ini.

HadiahNamaQR CodeAlamat
Rumah Tipe 36/60SETYAWAN JODY216000842SURAKARTA
Mobil Toyota AgyaSARIF216015156SUKOHARJO

Kode yang digunakan.

<table style=”border: 1px dashed #AAAAAA;” border=”1″ width=”100%”>
<tbody>
<tr style=”color: white;”>
<td style=”border: 1px dashed #AAAAAA;” bgcolor=”#00a1e0″><strong>Hadiah</strong></td>
<td style=”border: 1px dashed #AAAAAA;” bgcolor=”#00a1e0“><strong>Nama</strong></td>
<td style=”border: 1px dashed #AAAAAA;” bgcolor=”#00a1e0“><strong>QR Code</strong></td>
<td style=”border: 1px dashed #AAAAAA;” bgcolor=”#00a1e0“><strong>Alamat</strong></td>
</tr>
<tr>
<td style=”border: 1px dashed #AAAAAA;”>Rumah Tipe 36/60</td>
<td style=”border: 1px dashed #AAAAAA;”>SETYAWAN JODY</td>
<td style=”border: 1px dashed #AAAAAA;”>216000842</td>
<td style=”border: 1px dashed #AAAAAA;”>SURAKARTA</td>
</tr>
<tr>
<td style=”border: 1px dashed #AAAAAA;”>Mobil Toyota Agya</td>
<td style=”border: 1px dashed #AAAAAA;”>SARIF</td>
<td style=”border: 1px dashed #AAAAAA;”>216015156</td>
<td style=”border: 1px dashed #AAAAAA;”>SUKOHARJO</td>
</tbody></table>

Untuk merubah kode warna background, rubahlah dengan kode warna html. bisa kamu lihat disini.

Untuk bantuan membuat tabel kamu bisa gunakan situs tabel generator sebagai berikut :

Itulah cara membuat tabel di blog. semoga artikel ini bermanfaat. Terima kasih

Bonus.

Kode tabel responsive

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr><th>Features</th><th>Availability</th></tr>
<tr><td>Responsive</td><td>True</td> </tr>
<tr><td>SEO</td><td>True</td></tr>
<tr><td>Mobile Friendly</td><td>True</td></tr>
<tr><td>Personal Blog</td><td>True</td> </tr>
<tr><td>Custom Threaded Comment</td><td>True</td></tr>
<tr><td>2 Column</td><td>True</td></tr>
<tr><td>Simple Flat Design</td><td>True</td></tr>
<tr><td>Auto Read More with Thumbnail</td><td>True</td></tr>
<tr><td>Responsive Ad Slot</td><td>True</td></tr>
<tr><td>Breadcrumbs</td><td>True</td></tr>
<tr><td>Related Posts with Thumb</td><td>True</td></tr>
<tr><td>Search Box</td><td>True</td></tr>
<tr><td>Social Share Button</td><td>True</td></tr>
<tr><td>Sidebar Tab Widget</td><td>True</td></tr>
<tr><td>Translation Ready</td><td>True</td></tr>
<tr><td>Social Links Widget</td><td>True</td></tr>
<tr><td>Smooth Scroll back To Top</td><td>True</td></tr>
<tr><td>Recent Posts by Label</td> <td>True</td></tr>
<tr><td>Subscribe Box Widget</td><td>True</td></tr>
<tr><td>Sitemap Widget</td><td>True</td></tr>
<tr><td>Well Documentation</td><td>True</td></tr>
</tbody> </table>

Preview

FeaturesAvailability
ResponsiveTrue
SEOTrue
Mobile FriendlyTrue
Personal BlogTrue
Custom Threaded CommentTrue
2 ColumnTrue
Simple Flat DesignTrue
Auto Read More with ThumbnailTrue
Responsive Ad SlotTrue
BreadcrumbsTrue
Related Posts with ThumbTrue
Search BoxTrue
Social Share ButtonTrue
Sidebar Tab WidgetTrue
Translation ReadyTrue
Social Links WidgetTrue
Smooth Scroll back To TopTrue
Recent Posts by LabelTrue
Subscribe Box WidgetTrue
Sitemap WidgetTrue
Well DocumentationTrue

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.