Cara Membuat Tabel Responsive di Blog
Tabel adalah terdiri dari heading, kolom (cell) dan baris kotak-kotak yang membentuk struktur tabulasi. Ini biasanya kita temukan pada MS-Excel yang digunakan untuk keperluan membuat data list atau analisis berdasarkan kategori tertentu. Untuk membuatnya pada blog tentunya memiliki cara dan tujuan yang berbeda dalam menyajikan tabel.
Tabel yang disajikan pada blog tentu akan menyesuaikan ukuran tampilan pada layar baik komputer maupun smartphone. Agar terlihat rapi dan tidak melewati garis batas ukuran lebar layar perangakat Anda, maka dibuatlah pengaturan menggunakan CSS.
Memasang CSS untuk Membuat Tabel
Berikut akan kami bahas cara membuat tabel yang sederhana responsive juga tampilannya menarik untuk blog. Gunakan kode CSS lengkap berikut ini untuk membuat tabel dengan kompleksitas sesuai kebutuhan Anda. Pasang CSS berikut dibawah pembuka <style> atau diatas penutup </style> pada pengaturan struktur HTML blog Anda.
/* ------ TABEL ------ */
.table-responsive{line-height:1.5em;overflow-x:auto;font-size:15px}
.table{width:100%;border-collapse:collapse;border-spacing:0}
.table td,.table th{
background-color:#F3F5EF;border:1px solid #fff;color:#333;font-family:sans-serif;font-size:100%;padding:5px;vertical-align:top
}
.table tr:nth-child(even) td{background-color:#F0F0E5}
.table th{background-color:#EAE2CF;color:#333;font-size:110%}
.table tr.even:hover td,.table tr:hover td{color:#222;background-color:#FFFBEF}
@media screen and (max-width:768px){.table-responsive,.table{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar}
}
@media screen and (max-width:414px){.table-responsive,.table{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar}
}
@media screen and (max-width:411px){.table-responsive,.table{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar}
}
@media screen and (max-width:360px){.table-responsive{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar}
}
@media screen and (max-width:320px){.table-responsive{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar}
}
Cara Membuat Postingan Tabel
Perlu diperhatikan untuk membuat tabel sederhana pada postingan blog menggunakan mode html berikut, terdiri dari heading, kolom dan baris tanpa variasi.
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Address</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>California</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>Boston</td>
</tr>
</tbody>
</table>
</div>
| Firstname | Lastname | Age | Address |
|---|---|---|---|
| Jill | Smith | 50 | California |
| Eve | Jackson | 94 | Boston |
Definisi Tags Pembentuk Tabel
Untuk memperjelas postingan ini saya kasih definisi tags yang membentuk tabel berdasarkan fungsinya sebagai berikut:
| Tags | Keterangan |
|---|---|
| <th></th> | Table Head yang membentuk heading pada tabel secara vertikal |
| <tr></tr> | Table Row yang membentuk baris pada tabel secara vertikal |
| <td></td> | Table Data yang membentuk cell (kolom) pada tabel secara horizontal |
Membuat Variasi Tabel
1. Menggabungkan Kolom (Col) Secara Vertikal
Untuk membuat variasi tabel dengan menghilangkan kolom (column) secara vertikal hanya perlu menyisipkan kode berikut:
<td colspan="JUMLAH-KOLOM-YG-DIGABUNG">ISI KOLOM</td>Misal tabel spesifikasi 2 buah smartphone yang salah satu bagian tersebut memiliki nilai komponen yang sama seperti berikut
| Spesifikasi | HP1 | HP2 |
|---|---|---|
| RAM | 8 GB | 6 GB |
| CPU | 1.2 GHz | 1.5 GHz |
| KAMERA | 20 MP | |
| LAYAR | 4,3 inch | 4,5 inch |
| HARGA | Rp. 4000.000,- | |
Cara posting htmlnya sebagai berikut
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<th>Spesifikasi</th>
<th>HP1</th>
<th>HP2</th>
</tr>
<tr>
<td>RAM</td>
<td>8 GB</td>
<td>6 GB</td>
</tr>
<tr>
<td>CPU</td>
<td>1.2 GHz</td>
<td>1.5 GHz</td>
</tr>
<tr>
<td>KAMERA</td>
<td colspan="2">20 MP</td>
</tr>
<tr>
<td>LAYAR</td>
<td>4,3 inch</td>
<td>4,5 inch</td>
</tr>
<tr>
<td>HARGA</td>
<td colspan="2">Rp. 4000.000,-</td>
</tr>
</tbody>
</table>
</div>2. Menggabungkan Baris (Row) Secara Horizontal
Sedangkan untuk variasi tabel baris (Row) yang digabung secara horizontal hanya perlu menyisipkan kode berikut:
<td rowspan="JUMLAH-BARIS-YG-DIGABUNG">ISI BARIS</td>Masih seperti contoh sebelumnya, jika beberapa data tabel memiliki nilai komponen yang sama seperti berikut
| Spesifikasi | GPU | CPU |
|---|---|---|
| HP1 | Adreno 640 | 1.5 GHz |
| HP2 | 1.2 GHz | |
| HP3 | Adreno 620 | 1.3 GHz |
| HP4 | Adreno 630 |
Cara posting htmlnya sebagai berikut
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<th>Spesifikasi</th>
<th>GPU</th>
<th>CPU</th>
</tr>
<tr>
<td>HP1</td>
<td rowspan="2">Adreno 640</td>
<td>1.5 GHz</td>
</tr>
<tr>
<td>HP2</td>
<td>1.2 GHz</td>
</tr>
<tr>
<td>HP3</td>
<td>Adreno 620</td>
<td rowspan="2">1.3 GHz</td>
</tr>
<tr>
<td>HP4</td>
<td>Adreno 630</td>
</tr>
</tbody>
</table>
</div>CATATAN !!!
CSS pada template blog yang Anda gunakan biasanya sudah terdapat kode khusus untuk table, bagi yang ingin mengimplementasikan metode yang dibahas diatas, Anda hanya perlu merombak bagian heading (th), baris (tr) dan kolom (td) saja.
Namun jika Anda sudah mahir dalam hal koding CSS bisa merombak secara total tampilan tabel tersebut, referensi belajar koding secara detil bisa Anda lihat di w3schools.com. Selamat mencoba - semoga bermanfaat.