Cara Membuat Tabel Responsive di Postingan Blogger

Tabel adalah elemen penting dalam sebuah postingan blog, terutama jika Anda ingin menyajikan data atau informasi dalam bentuk yang lebih terstruktur. Namun, salah satu tantangan utama dalam menggunakan tabel di Blogger adalah membuatnya tetap terlihat rapi dan mudah dibaca di berbagai perangkat, baik desktop maupun mobile.

Tabel yang responsive akan membuat pengunjung merasa lebih nyaman dalam membaca postingan dan memberikan pengalaman terbaik pada pengunjung

Mengingat di jaman sekarang sudah hampir 100% Pengguna internet kebanyakan menggunakan Smartphone, Untuk itu kita sebagai pemilik situs web juga harus bisa menyesuaikan, Nah dalam artikel kali ini, kita akan membahas cara membuat tabel responsive di postingan Blogger dengan metode yang SEO-friendly dan mudah diterapkan.

Mengapa Tabel Harus Responsive?

Sebelum kita membahas lebih jauh tentang cara membuat tabel responsive di Blogger, penting untuk memahami alasan mengapa tabel harus responsive:

Meningkatkan Pengalaman Pengguna – Tabel yang responsive akan lebih mudah dibaca di berbagai ukuran layar baik pengguna PC atau Smartphone.
SEO-Friendly – Google lebih menyukai situs yang mobile-friendly, dan tabel yang responsif dapat meningkatkan skor SEO.
Memudahkan Aksesibilitas – Karena dengan adanya tabel yang Responsive, Pengguna yang mengakses blog dari ponsel tetap dapat membaca data dengan nyaman.
Menghindari Scroll Horizontal Berlebihan – Scroll horizontal dapat mengganggu pengalaman membaca, terutama di perangkat kecil.

Cara Membuat Tabel Responsive di Blogger

Setelah memahami alasan alasan mengapa kita harus membuat tabel yang Responsive, Nah berikut ada beberapa cara untuk membuat tabel responsive di Blogger, mulai dari penggunaan kode CSS hingga JavaScript. Berikut adalah langkah-langkahnya:

1. Menyiapkan Tabel Dasar di Blogger

Sebelum membuat tabel responsive, pertama-tama kita perlu membuat tabel dasar menggunakan kode HTML. Berikut adalah contoh menampilkan tabel sederhana di postingan blogger:

<table>
    <thead>
        <tr>
            <th>No</th>
            <th>Nama</th>
            <th>Usia</th>
            <th>Alamat</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Arief Setiawan</td>
            <td>30</td>
            <td>Jakarta</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Budi Santoso</td>
            <td>25</td>
            <td>Bandung</td>
        </tr>
    </tbody>
</table>

Namun, tabel ini belum responsive. Dan jika di buka pada layar lebih kecil misalnya dari HP, tabel bisa melebar keluar dari area tampilan, tentu tabel seperti ini akan sangat mengganggu bagi para pembaca yang mengakses postingan kita.

2. Membuat Tabel Responsive dengan CSS

Agar tabel tesebut bisa menjadi responsive, di buka di semua perangkat menjadi nyaman, kita bisa membungkusnya dalam elemen <div> dan menambahkan CSS khusus pada template blog anda. Berikut langkah langkah mudah untuk menambahkan kode CSS agar tabel bisa tampil Responsive:

Menambahkan CSS Responsive

Untuk menambahkan kode CSS Responsive caranya juga sangat mudah, tinggal login ke akun blogger masing masing, setelah masuk dasboard Blogger pilih menu Theme > Edit HTML, selanjutnya letakan kode CSS berikut tepat sebelum ]]></b:skin> Atau </style>

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive table {
    width: 100%;
    border-collapse: collapse;
}

.table-responsive th, .table-responsive td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
}

Membungkus Tabel dengan Div

Nah setelah selesai menambahkan kode CSS ke dalam Template blog anda, Sekarang ubah kode HTML tabel dasar di atas menjadi seperti Berikut :

<div class="table-responsive">
    <table>
        <thead>
            <tr>
                <th>No</th>
                <th>Nama</th>
                <th>Usia</th>
                <th>Alamat</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Arief Setiawan</td>
                <td>30</td>
                <td>Jakarta</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Budi Santoso</td>
                <td>25</td>
                <td>Bandung</td>
            </tr>
        </tbody>
    </table>
</div>

Dengan menerapkan cara ini, maka tabel akan otomatis memiliki scroll horizontal saat tampil di layar kecil contohnya seperti pada layar HP

3. Membuat Tabel Responsive dengan Media Query

Jika Anda ingin tabel lebih fleksibel tanpa perlu scroll horizontal, gunakan media query:

@media screen and (max-width: 600px) {
    .table-responsive table {
        display: block;
        overflow-x: auto;
    }
    .table-responsive tr {
        display: block;
        margin-bottom: 10px;
    }
    .table-responsive td {
        display: block;
        text-align: right;
        position: relative;
        padding-left: 50%;
    }
    .table-responsive td:before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        font-weight: bold;
        text-align: left;
    }
}

Tambahkan atribut data-label pada setiap <td> seperti ini:

<tr>
    <td data-label="No">1</td>
    <td data-label="Nama">Arief Setiawan</td>
    <td data-label="Usia">30</td>
    <td data-label="Alamat">Jakarta</td>
</tr>

Dengan cara ini, tabel akan menyesuaikan tampilannya seperti daftar vertikal di layar kecil. Tentu ini akan sangat keren dan pastinya pembaca akan lebih nyaman.

Kesimpulan

Membuat tabel responsive di Blogger sangat penting untuk meningkatkan pengalaman pengguna dan SEO. Dengan menggunakan teknik CSS dan media query, tabel dapat tetap terlihat rapi di semua ukuran layar. Anda dapat memilih metode yang paling sesuai dengan kebutuhan blog Anda, baik dengan scroll horizontal atau mengubah tampilan tabel menjadi format daftar di layar kecil.

Dengan mengikuti langkah-langkah di atas, blog Anda akan semakin profesional, user-friendly, dan mudah diakses oleh pengunjung. Selamat mencoba