Tutorial Membuat Tabel Pada Postingan Blog Mudah Dan Cepat 

ucivergo.com - Ketika Sobat menjadi seorang penulis,khususnya penulis website,pasti Sobat akan menemui sebuah artikel yang mengharuskan Sobat untuk membuat sebuah tabel.

tampilan tabel yang di buat haruslah semenarik mungkin,agar terlihat profesional dalam menulis,oleh karena itu pada artikel kali ini admin akan menjelaskan bagaimana cara membuat tabel dengan mudah.tabel bisa Sobat buat dengan memasukan kode html ke dalam artikel postingan.

Pengertian Tabel

tabel adalah 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.

Fungsi Tabel

Tabel berfungsi untuk memberikan tampilan postingan menjadi terlihat rapi serta enak dilihat,  tabel juga cukup penting untuk mengelompokkan data-data penting agar mudah dipahami oleh pembacanya.

fungsi utama tabel adalah 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 dipahami.

Setelah Sobat paham pengertian dan fungsi Tabel,selanjutnya adalah tutorial langkah langkah membuat tabel dalam postingan blog.

langkah langkah membuat tabel dalam postingan blog:

1. Masuk akun blogger Sobat . 

2.Buat sebuah postingan.

3.Pada isi postingan,sebelum membuat tabel,Sobat ganti mode penulisan dari compose menjadi mode html. 

4. Setelahnya sudah Sobat ganti,pilih lokasi yang akan Sobat letakan tabel 

5.Jika sudah menemukan lokasi yang di ingin kan, 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 1</td>
            <td>daftar isi kolom</td>
             <td>daftar isi kolom</td>
        </tr>
<tr>
             <td>daftar isi kolom 2</td>
            <td>daftar isi kolom</td>
             <td>daftar isi kolom</td>

        </tr>
<tr>
          <td>daftar isi kolom 3</td>
            <td>daftar isi kolom</td>
             <td>daftar isi kolom</td>
        </tr>
</tbody>
</table>
</div>

Penjelasan Kode html di atas:

• Mengganti warna background atau bingkai (border), Sobat bisa menggantinya dengan warna lain sesuka Sobat tentunya,dengan cara ubah kode di dalam atribut style. 
• Kolom judul (ditandai warna merah), silahkan isikan kolom dengan 3 judul Sobat. 
• Pada kolom di bawahnya dan seterusnya (ditandai warna hbiru), silahkan isi dan sesuaikan dengan daftar isi pada tabel Sobat. 

Bila Sobat ingin menambahkan kolom baru baik itu ke samping atau pun ke bawah, Sobat bisa sesuaikan dengan menambahkan deret lagi di bawahnya atau sesuaikan urutannya. 

Contoh:

Menambahkan kolom ke bawah, sobat tambahkan kode html berikut ke daftar kode setelah kode daftar isi ke 3

sebelum di tambahkan:

<tr>

          <td>daftar isi kolom 3</td>

            <td>daftar isi kolom</td>

             <td>daftar isi kolom</td>

        </tr>

kemudian di tambahkan kode berikutnya untuk membuah kolom kebawah:

<tr>

          <td>daftar isi kolom 4</td>

            <td>daftar isi kolom</td>

             <td>daftar isi kolom</td>

        </tr>

Menambahkan kolom ke samping dengan menambah kode 

sebelum

<tr>

          <td>daftar isi kolom 1</td>

            <td>daftar isi kolom1.2</td>

             <td>daftar isi kolom1.3</td>

        </tr>

kemudian sobat tambahkan kode 

<td>daftar isi kolom1.4</td>

Menjadi 

<tr>

          <td>daftar isi kolom 1</td>

            <td>daftar isi kolom1.2</td>

             <td>daftar isi kolom1.3</td>

             <td>daftar isi kolom1.4</td>

        </tr>

contoh hasil dari menggunakan kode di atas adalah sebagai berikut:

<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(thn)</th>

            <th>JENIS KELAMIN</th>

        </tr>

<tr>

            <td>PAIJO</td>

            <td>22</td>

             <td>LAKI-LAKI</td>

        </tr>

<tr>

             <td>SUTINEM</td>

            <td>19</td>

             <td>PEREMPUAN</td>

        </tr>

<tr>

          <td>RUBEN</td>

            <td>23</td>

             <td>LAKI-LAKI</td>

        </tr>

</tbody>

</table>

</div>

hasilnya:

Nah itulah cara membuat tabel pada postingan blog.