Bikin Tabel di Blogger Memangnya Bisa?

    Dalam dunia tulis menulis kalian pasti pernah membuat yang namanya tabel; baik tulis tangan secara langsung atau melalui perangkat lunak (Software) seperti Microsoft Office. Tujuan dibuatnya tabel adalah untuk merangkai kumpulan data-data berdasarkan klasifikasi oleh seorang penulis ke dalam sebuah bidang persegi yang terdiri dari beberapa kolom sehingga dengan tabel ini para pembaca akan semakin dimudahkan ketika membaca kumpulan data terkait yang telah dibuat sebelumnya.

    Kali ini penulis ajarkan sobat blogger sekalian tutorial membuat tabel di Blogger dan pembuatan tabel ini sempat admin lakukan sebelumnya pada artikel Sederet Kode Warna HTML yang Harus Diketahui. Telah kita ketahui bersama; biasanya orang membuat tabel melalui Microsoft Office sebagaimana yang penulis katakan sebelumnya, jangan salah mengira jika kita tidak bisa membuat tabel di blogger walaupun fiturnya memang tidak disediakan langsung sepertihalnya fitur menambahkan gambar, menyisipkan link dan semacamnya. Terdapat cara khusus memasukkan tabel kedalam Workspace (ruang kerja) blogger yaitu dengan mengandalkan sedikit kemampuan koding.

    Oke, tidak perlu bertele-tele lagi simak alur-alur panduannya dibawah ini;

1. Buka blogger seperti biasanya kemudian buka postingan yang akan disisipi tabel.

2. Seperti yang telah penulis singgung sebelumnya; disini kita akan membuat tabel dengan mengedit kode HTML, maka dari itu selanjutnya silakan temen-temen alihkan dari tampilan menulis ke tampilan HTML.

    Selanjutnya silakan salin lalu tempelkan semua kode script berikut;

<div class="table">

  <table style="white-space: nowrap;">

    <thead>

      <tr>

        <th>Nomor</th>

        <th>Kolom 1</th>

        <th>Kolom 2</th>

        <th>Kolom 3</th>

        <th>Kolom 4</th>

        <th>Kolom 5</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td>Kolom 6</td>

        <td>Kolom 7</td>

        <td>Kolom 8</td>

        <td>Kolom 9</td>

        <td>Kolom 10</td>

        <td>Kolom 11</td>

      </tr>

      

      <tr>

        <td>Kolom 12</td>

        <td>Kolom 13</td>

        <td>Kolom 14</td>

        <td>Kolom 15</td>

        <td>Kolom 16</td>

        <td>Kolom 17</td>

      </tr>

      

      <tr>

        <td>Kolom 18</td>

        <td>Kolom 19</td>

        <td>Kolom 20</td>

        <td>Kolom 21</td>

        <td>Kolom 22</td>

        <td>Kolom 23</td>

      </tr>

      

    </tbody>

  </table>

</div>

<style> 

.table {

    display: block;

    overflow-y: hidden;

    overflow-x: auto;

    scroll-behavior: smooth;

} 

  

 .table thead {

    display: table-header-group;

    vertical-align: middle;

    border-color: inherit;

    color: white;

    background: darkcyan;

}

  

tr {

    display: table-row;

    vertical-align: inherit;

    border-color: inherit;

}

  

 table th {

    padding: 16px;

    text-align: inherit;

    border-bottom: 1px solid black;

   color:white!important;

}

  

  tbody {

    display: table-row-group;

    vertical-align: middle;

    border-color: inherit;

}

  

 table:not(.tr-caption-container) {

    min-width: 100%;

    border-radius: 3px;

}

</style>

    Maka setelah berhasil tersimpan kembali ke tampilan menulis dan hasil tampilannya akan menjadi seperti dibawah ini;

Nomor	Kolom 1	Kolom 2	Kolom 3	Kolom 4	Kolom 5
Kolom 6	Kolom 7	Kolom 8	Kolom 9	Kolom 10	Kolom 11
Kolom 12	Kolom 13	Kolom 14	Kolom 15	Kolom 16	Kolom 17
Kolom 18	Kolom 19	Kolom 20	Kolom 21	Kolom 22	Kolom 23

3. Untuk memodifikasi table kalian hanya perlu kembali ke tampilan HTML tadi lalu bisa kalian ganti teks, tambah kolom, kurangi kolom dan sesuaikan sesuka hati. Untuk memudahkan jadikan hasil diatas sebagai contoh.

Sekian dan Semoga bermanfaat 🌟

Share :