Widget HTML #1

Cara Membuat Tabel di Postingan Blogger untuk Templatenya Mas Sugeng

cara membuat tabel di blog

Untuk bikin sebuah tebal di postingan blogger sebenarnya bukan suatu pekerjaan yang rumit, ini bisa dibilang mudah. Meski begitu, yang membuat kita bingung adalah tidak adanya toolbar pada post editor blogger untuk langsung bisa membuat tabel.

Jadi sebagai penulis yang hendak membuat rangkaian data dalam sebuah tabel perlu membuat form kode HTML secara manual. Tapi jangan khawatir kita akan memberikan cara buat tabel di postingan Blog, baik itu yang standar tabel HTML, rowspan, hingga colspan.

Tabel sendiri fungsinya ada berbagai macam, tapi umumnya untuk melampirkan data penting tersusun secara berjajar. Data yang dimaksud bisa berupa teks dan angka serta tersusun mengikuti aturan tertentu.

Kita sendiri seringnya mencantumkan data tabel dalam sebuah post yang mengulas spesifikasi produk tertentu, yang mana jadi memudahkan mengumpulkan data informasi penting dalam satu tabel.

Langkah Buat Tabel dalam Postingan

Pada cara ini bisa diterapkan pada Template buatan Mas Sugeng yang telah kami coba. Karena yang kami ketahui memang tidak ada panduan khusus untuk membuat tabel dalam postingan khusus templatenya Mas Sugeng seperti EvoMagz, VioMagz, LinkMags, dan Wuzz. 

Mudah-mudahan ini akan membantu Anda yang baru pertama kali menggunakan dan mencoba mau menyisipkan sebuah tabel dalam artikel terbarunya.

[Tabel Standar/Sederhana]

  1. Pertama masuk ke Blogger
  2. Buat Post baru atau buka pastingan yang sudah ada
  3. Beralih ke "tampilan HTML"
  4. Letakkan skrip berikut ini pada area post HTML yang diinginkan


<table border="1">
  <tbody>
    <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
    <tr>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>
  </tbody>
</table>


Tabel dengan Menggabungkan Baris dan Kolom


Selanjutnya kita bisa menggabungkan cell pada tabel, aturan ini dalam HTML disebut sebagai rowspan (baris) dan colspan (kolom) pada tag td. Jadi kalau mau menggabungkan marge antar baris atau kolom maka bisa memakai atribut ini.

[Tabel dengan atribut rowspan]

Ini akan menggabungkan kolom baris pertama dengan kolom dibawahnya.
<table>
  <tbody>
    <tr>
      <td rowspan='2'>Baris 1-2, kolom 1</td>
      <td>Baris 1, kolom 2</td>
    </tr>
    <tr>
      <td>Baris 2, kolom 2</td>
    </tr>
    <tr>
      <td>Baris 3, kolom 1</td>
      <td>Baris 3, kolom 2</td>
    </tr>
  </tbody>
</table>

[Penggunaan atribut colspan]

Sementara yang ini untuk mengabungkan kolom tabel pertama dengan di sebelah atau sampingnya.
<table>
  <tbody>
    <tr>
      <th>Baris 1, kolom 1</th>
      <th colspan='2'>Baris 1, kolom 2-3</th>
    </tr>
    <tr>
      <td>Baris 2, kolom 1</td>
      <td>Baris 2, kolom 2</td>
      <td>Baris 2, kolom 3</td>
    </tr>
    <tr>
      <td>Baris 3, kolom 1</td>
      <td>Baris 3, kolom 2</td>
      <td>Baris 2, kolom 3</td>
    </tr>
  </tbody>
</table>

Contoh Hasilnya, dengan gabungan rowspan dan colspan.

Baris 1-2, kolom 1 Baris 1, kolom 2-3
Baris 2, kolom 2 Baris 2, kolom 3
Baris 3, kolom 1 Baris 3, kolom 2 Baris 2, kolom 3

Itulah langkah-langkah yang harus Anda kerjakan untuk membuat tabel di postingan blogger baik itu yang sederhana atau dengan aturan atribut khusus seperti penggabungan kolom. Kamu bisa memulai dengan tabel dasar yang telah kami sediakan dan silahkan kreasikan sesuai keinginan.
Buka Komentar