Cara Mudah Membuat Tabel Kolom dalam Postingan Blog

Santos el Salam

4 April 2020

Dalam dunia tulis menulis, tabel merupakan suatu elemen berisi data informasi yang ditulis dengan bilangan/angka atau kata-kata berdasarkan kategori tertentu dan disusun secara sistematis berurutan ke arah bawah menggunakan struktur baris dan kolom.

Selain membuat tampilan menjadi terlihat rapi dan enak dilihat, penggunaan tabel juga cukup penting untuk mengelompokkan data-data penting agar mudah dipahami oleh pembacanya. Atau juga bisa dikatakan adanya tabel berfungsi untuk memberikan kemudahan dalam membaca data, karena data yang tersusun secara sistematis tentunya akan memudahkan pengguna atau si pembaca sehingga bisa dengan lebih mudah untuk memahaminya.

Sebagai media yang dapat diisi dengan berbagai macam informasi, suatu blog atau web juga seringkali menggunakan kolom tabel untuk mengelompokkan data-data tertentu agar lebih mudah dipahami oleh pembacanya.

Bagi anda yang terbiasa menulis menggunakan komputer (PC) mungkin tidak asing lagi mengenai cara membuat suatu bentuk tabel, dimana misalnya pada MS Word sudah disediakan Toolbar untuk membuat kolom-kolom tabel. Namun bagi penulis blog, tampaknya untuk membuat kolom tabel mesti menggunakan cara lain karena fitur tersebut sampai saat ini belum dijumpai pada toolbar blogger.

Meski begitu, sebetulnya hal ini bisa dibuat dengan mudah jika anda paham mengenai struktur html dan CSS. Bagi yang masih awam tentang html dan CSS, mungkin masih bingung mengenai cara membuat tabel di dalam postingan blog, namun bagi blogger-blogger kawakan mungkin hal itu tidak menjadi masalah. Bahkan tampilannya pun bisa diatur sedemikian rupa agar terlihat cantik dan menarik. 

Nah, bagi anda yang ingin membuatnya namun masih bingung caranya, anda bisa simak tutorial sederhana membuat tabel kolom di postingan blog dari saya berikut ini. Untuk tampilannya kurang lebih seperti berikut ini:

Bagaimana cara membuatnya? Berikut langkah-langkahnya:

1. Buka akun blogger anda. 

2. Pada isi postingan, jika hendak membuat tabel silahkan ganti mode penulisan dari compose menjadi mode html. 

3. Setelahnya, masukkan kode berikut ini ke dalamnya:

<style>
.table { margin: 1.5rem 0; overflow: auto; white-space: nowrap; }
table {background:#ffe599;width:100%;border:1px solid black}
th,td {height:20px;padding:10px;border:1px solid white}
th {background:black;color:white}
</style>

<br />
<div class="table">
<table>
    <tbody>
<tr>
            <th>Judul kolom 1</th>
            <th>Judul kolom 2</th>
            <th>Judul kolom 3</th>
        </tr>
<tr>
            <td>daftar isi kolom</td>
            <td>daftar isi kolom</td>
             <td>daftar isi kolom</td>
        </tr>
<tr>
             <td>daftar isi kolom</td>
            <td>daftar isi kolom</td>
             <td>daftar isi kolom</td>
        </tr>
<tr>
          <td>daftar isi kolom</td>
            <td>daftar isi kolom</td>
             <td>daftar isi kolom</td>
        </tr>
</tbody>
</table>
</div>

Keterangan:

• Jika ingin mengganti warna background atau bingkai (border), anda bisa menggantinya dengan warna lain sesuka anda pada kode di dalam atribut style. 
• Pada kolom judul (ditandai warna merah), silahkan isikan kolom dengan 3 judul anda. 
• Pada kolom di bawahnya dan seterusnya (ditandai warna hijau), silahkan isi dan sesuaikan dengan daftar isi pada tabel anda. 
• Jika ingin menambahkan kolom baru baik itu ke samping atau pun ke bawah, anda bisa sesuaikan dengan menambahkan deret lagi di bawahnya atau sesuaikan urutannya. 

4. Jika sudah diatur semuanya, silahkan publish dan lihat hasilnya. 

Sebagai gambaran, berikut saya contohkan penerapannya:

<style>
.table { margin: 1.5rem 0; overflow: auto; white-space: nowrap; }
table {background:#ffe599;width:100%;border:1px solid black}
th,td {height:20px;padding:10px;border:1px solid white}
th {background:black;color:white}
</style>

<br />
<div class="table">
<table>
    <tbody>
<tr>
            <th>Nama</th>
            <th>Umur</th>
            <th>Pekerjaan</th>
        </tr>
<tr>
            <td>Udin Saripudin</td>
            <td>19 th</td>
             <td>Karyawan</td>
        </tr>
<tr>
              <td>Nanang Gumilang</td>
            <td>22 th</td>
             <td>Wiraswasta</td>
        </tr>
<tr>
               <td>Wawan Setiawan</td>
            <td>20 th</td>
             <td>PNS</td>
        </tr>
<tr>
            <td>Jarot Sudrajat</td>
            <td>23 th</td>
             <td>Petani</td>
        </tr>
</tbody>
</table>
</div>

Dan hasilnya:

Nama	Umur	Pekerjaan
Udin Saripudin	19 th	Karyawan
Nanang Gumilang	22 th	Wiraswasta
Wawan Setiawan	20 th	PNS
Jarot Sudrajat	23 th	Petani

Itulah cara mudah dan sederhana untuk membuat tabel kolom di dalam postingan blog. Semoga bermanfaat.

Labels: Blogging

Thanks for reading Cara Mudah Membuat Tabel Kolom dalam Postingan Blog. Please share...!

Facebook

Twitter