Hello sobat Icloudzer kai ini admin bakalan memberikan informasi mengenai bagaimana caranya membuat tabel yang responsif di blogger, yang mana fungsi dan kegunaan table tersebut sangat bermanfaat saat di gunakan
Info: Oke sobat icloudzer jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Tabel
Apa itu tabel? kalau pernah sekolah pasti mengetahui apa itu tabel! masa sih guru ente ngak pernah nyuruh buat tabel? yang bener...! tapi secara singkatnya tabel merupakan suatu tampilan informasi data bisa berupa apapun yang menggunakan format tabel sebagai frame nya, yakni garis yang di sesuaikan dengan informasi data tersebut, biasanya tabel di mulai dengan urutan nomor sebagai pembukanya
Fungsi Tabel
Jika sudah mengetahui mengenai tabel terus fungsibtabel untuk apa sih? bayak sekali manfaat tabel semisal menampilkan daftar harga, anggota mahasiswa, daftar barang dan sebagainya banyak yang menggunakan tabel sebagai rumusannya atau pengelompokan nya
Table Responsif
Kenapa admin mengatakan tabel tersebut responsif, karena tabel tersebut di buat menggunakan kode CSS saja, dan untuk menampilkan nya cukup menggunakan kode HTML, pokoknya sangat eingan dan elegan lah pastinya
Contoh Tampilan
Jika kamu penasaran dengan contih tampilan nya silahkan periksa menggunakan tombol di bawah ini ok
Info: Bagaimana sobat keren sekali yak, pastilah keren 🥰
Cara pembuatan
Baiklah sobat Iclouzer sekarang saatnya admin bakakan menjelaskan bagaimana caranya membuat tabel yang responsif silahkan baca dan pelajari hingga selesai ok
Kode CSS
Seperti biasa lagkah pertama yang bisa kamu lakukan adalah menyalin kode CSS di bawah ini, kemudian letakkan di atas kode ]]>/b:skin>
/* Table by ICloudice.com */ table{margin:0 auto; font-size:14px;font-family:var(--rahfontB)} table:not(.tr-caption-container){min-width:90%;border:1px solid #ebeced;border-radius:3px;overflow:hidden} table:not(.tr-caption-container) td{padding:16px} table:not(.tr-caption-container) tr:not(:last-child) td{border-bottom:1px solid #ebeced} table:not(.tr-caption-container) tr:nth-child(2n+1) td{background:rgba(0,0,0,.01)} table th{padding:16px; text-align:inherit; border-bottom:1px solid #ebeced} .table{display:block; overflow-y:hidden;overflow-x:auto;scroll-behavior:smooth}@media screen and (max-width: 640px){.table{position:relative; width:calc(100% + 60px);left:-20px;right:-20px;padding:0 20px; display:flex}}Info: Atau kamu bisa menggunakan tag kode <style untuk meletakkan kode CSS di atas
Cara penggunaan
Baiklah jika sebelumnya kamu telah memasang atuoun menginstall kode CSS yabgadmin berikan, langkah selanjutnya untuk menampilkan tabel silahkan salin dan gunakan kode HTML di bawah ini
<div class='table'>
<table>
<thead>
<tr>
<th>No</th>
<th>Subjudul1</th>
<th>Subjudul2</th>
<!--<th>Seterusnya</th>-->
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Isi subjudul1</td>
<td>Isi subjudul2</td>
<!--<td>Seterusnya</td>-->
</tr>
<tr>
<td>2</td>
<td>Isi subjudul1</td>
<td>Isi subjudul2</td>
<!--<td>Seterusnya</td>-->
</tr>
<tr>
<td>3</td>
<td>Isi subjudul1</td>
<td>Isi subjudul2</td>
<!--<td>Seterusnya</td>-->
</tr>
<tr>
<td>4</td>
<td>Isi subjudul1</td>
<td>Isi subjudul2</td>
<!--<td>Seterusnya</td>-->
</tr>
<tr>
<td>5</td>
<td>Isi subjudul1</td>
<td>Isi subjudul2</td>
<!--<td>Seterusnya</td>-->
</tr>
<!-- Barisan table selanjutnya <tr></tr> -->
</tbody>
</table>
</div>Info: Silahkan edit text di dalam tabel sesuai kebutuhan mu aja
Penjelasan
Jika setelah kamu mempublikasikan tabel tersebut namun tampilannya acak kadut, coba deh hapus kode CSS tabel yang emang ada di template sobat, dan gunakan kode CSS yang saya berikan, karena apa? karena setiap template itu berbeda beda mulaibdari class, tag, dan juga id nya, semiga bermanfaat
| No | Kota | Kecamatan | Kabupaten | Provinsi |
|---|---|---|---|---|
| 1 | Tanjung batu | Kundur barat | Karimun | Kepulauan riau |
| 2 | Tanjung batu | Kundur barat | Karimun | Kepulauan riau |
