Lompat ke konten Lompat ke sidebar Lompat ke footer

Tutorial Membuat Tabel dengan CSS di Blogger

Salah satu cara untuk menyajikan data yakni dengan menggunakan tabel. Tabel yang disajikan bertujuan untuk memudahkan pembaca memahami informasi yang disampaikan. Dalam postingan blog, adakalanya kita membutuhkan tabel untuk menyatakan data, baik untuk keperluan komersial maupun artikel ilmiah. Setidaknya ada dua cara yang bisa kita lakukan.
  • Cara sederhana. Tabel terlebih dahulu dibuat di word/excel-lakukan screencapture menjadi format jpg/png, lalu upload tabel tersebut ke dalam postingan blog. Cara ini mungkin sedikit kurang efisien, tetapi menjadi alternatif termudah dan tidak banyak proses. 
  • Cara sedikit mumet dengan menggunakan kode HTML+CSS. Dengan cara kedua, terlebih dahulu dibuat kode CSS dan identitas tertentu sehingga pada saat ditampilkan (digunakan sebagai script html) akan sesuai dengan desain kode CSS tersebut. Dalam kode "table" harus dibuat manual dan disisipkan identitas CSS yang dibuat sebelumnya. 

Pada postingan kali ini kita akan membahas tutorial membuat tabel dengan cara kedua yaitu menggunakan kode CSS. Berikut langkah-langkah yang bisa kita lakukan.

1. Sediakan format tabel yang akan ditampilkan di blog.
2. Salin kode CSS berikut dan tempel pada tema blog, tepat diatas kode ]]></b:skin>.
/* ----format tabel mrregar.com---- */ .tabel{ border-collapse:collapse; margin-left:auto; margin-right:auto; text-align:center; } .tabel th { padding:5px 15px; background-color:#2E8B57;color:white;border-top:green 1px solid; border-left:green 1px solid; border-right:green 1px solid;border-bottom:3px solid darkgreen;} .tabel td:nth-child(1) { padding:3px 10px; background-color: #76B291; color:black; } .tabel td{ padding:3px; border:green 1px solid; } /* Ini untuk memberikan tampilan minimal jika menggunakan IE8 dan di bawahnya */ .tabel tr{ background: #99FF99; } /* Menentukan warna latar untuk semua baris ganjil */ .tabel tr:nth-child(odd){ background: #99FF99;} /* Menentukan warna latar untuk semua baris genap */ .tabel caption{font-family:arial;font-size:14px; color:green;text-align:left; background:none} /* Menentukan warna latar untuk kolom pertama */ .tabel tr:nth-child(even){background: #D6FFD6;}

Keterangan: 

#99FF99  warna latar baris ganjil

green  warna latar baris genap

#D6FFD6 warna latar kolom pertama

Ketiga kode warna diatas bisa diganti, tergantung selera. Untuk memilih kode warna bisa Klik disini.

3. Setelah kode CSS tersebut ditempel, maka selanjutnya kita akan membuat tabel sesuai keinginan. Sebagai demo, saya membuat tabel dengan form 4 kolom dan 33 baris. Tabel berisi nomor, nama admin, alamat blog, dan link postingan sahabat Lagerunal pada tantangan #KamisMenulis-TSP. Berikut tampilan tabelnya.
Nomor Admin Alamat Blog Link Postingan
1 Mohamad Bajuri misterbejebelajarpenjas.blogspot.com Klik disini
2 Susanto blogsusanto.com Klik disini
3 Jonter Siregar mrregar.com Klik disini
4 Ansar Salihin winansar.com Klik disini
5 Hariyanto hariyanto17.blogspot.com Klik disini
6 Nasirun pakiroen.blogspot.com Klik disini
7 Ziyyarin hariinspirasiku.blogspot.com Klik disini
8 Susi Arpa mamakazka.blogspot.com Klik disini
9 Sri Yamini literasingeblog.blogspot.com Klik disini
10 Nunung Komalasari nungkom.blogspot.com Klik disini
11 Kainan Punuf fisikainan.blogspot.com Klik disini
12 Ihin Solihin belajarberbgai-kangihin.blogspot.com Klik disini
13 Kusnaidin kusgurusmp3lingsar.blogspot.com Klik disini
14 Lusia lusia07.blogspot.com Klik disini
15 Budi Idris budiidris.blogspot.com Klik disini
16 Yusni edukasiyusni.blogspot.com Klik disini
17 Sumarjiyati 81-atik.blogspot.com Klik disini
18 Jawahir ninibelajar.blogspot.com Klik disini
19 Indra Wahyudin jarimisterindra.blogspot.com Klik disini
20 Aam Nurhasanah aamnurhasanah12.blogspot.com Klik disini
21 Heri Apri kiaedukasi.blogspot.com Klik disini
22 Marinan marinan80.blogspot.com Klik disini
23 Sudomo eigendomo.com Klik disini
24 Suyati suyatibinyo.blogspot.com Klik disini
25 Ai Setiawati untaiankata2019.blogspot.com Klik disini
26 Rita Wati ritapinang.my.id/ Klik disini
27 Min Hermina minhermina.blogspot.com Klik disini
28 Rince W Utami gupres2020.blogspot.com Klik disini
29 Astuti septiasapalu68.blogspot.com Klik disini
30 E. Hasanah hasanahhalima.blogspot.com Klik disini
31 Erry Y. Siahaan erryyulia28.blogspot.com Klik disini
32 Tini Sumartini ambuguru.blogspot.com Klik disini
Untuk menampilkan tabel diatas, kode script yang saya buat sebagai berikut.
<table class="tabel"> 
<tbody> 
<tr> 
<th>Nomor</th> 
<th>Admin</th> 
<th>Alamat Blog</th> 
<th>Link Postingan</th> 
</tr> 
<tr> 
<td>1</td> 
<td>Mohamad Bajuri</td> 
<td>misterbejebelajarpenjas.blogspot.com</td> 
<td>Klik disini</td> 
</tr> 
<tr> 
<td>2</td> 
<td>Susanto</td> 
<td>blogsusanto.com</td> 
<td>Klik disini</td> 
</tr> 
<tr> 
<td>3</td> 
<td>Jonter Siregar</td>
<td>mrregar.com</td> 
<td>Klik disini</td> 
</tr> 
<tr> 
<td>4</td> 
<td>Ansar Salihin</td> 
<td>winansar.com</td> 
<td>Klik disini</td> 
</tr> 
<tr>
<td>5</td> 
<td>Hariyanto</td> 
<td>hariyanto17.blogspot.com</td> 
<td>Klik disini</td> 
</tr> 
<tr> 
<td>6</td> 
<td>Nasirun</td> 
<td>pakiroen.blogspot.com</td> 
<td>Klik disini</td> 
</tr> 
<tr> 
<td>7</td> 
<td>Ziyyarin</td> 
<td>hariinspirasiku.blogspot.com</td> 
<td>Klik disini</td> 
</tr> 
<tr> 
<td>8</td> 
<td>Susi Arpa</td> 
<td>mamakazka.blogspot.com</td> 
<td>Klik disini</td> 
</tr> 
<tr> 
<td>9</td> 
<td>Sri Yamini</td> 
<td>literasingeblog.blogspot.com</td> 
<td>Klik disini</td> 
</tr> 
<tr> 
<td>10</td> 
<td>Nunung Komalasari</td> 
<td>nungkom.blogspot.com</td> 
<td>Klik disini</td> 
</tr> 
<tr> 
<td>11</td> 
<td>Kainan Punuf</td> 
<td>fisikainan.blogspot.com</td> 
<td>Klik disini</td> 
</tr> 
<tr> 
<td>12</td> 
<td>Ihin Solihin</td> 
<td>belajarberbgai-kangihin.blogspot.com</td> 
<td>Klik disini</td> 
</tr> 
<tr> 
<td>13</td> 
<td>Kusnaidin</td> 
<td>kusgurusmp3lingsar.blogspot.com</td> 
<td>Klik disini</td> 
</tr> 
<tr> 
<td>14</td> 
<td>Lusia</td> 
<td>lusia07.blogspot.com</td> 
<td>Klik disini</td> 
</tr> 
<tr> 
<td>15</td> 
<td>Budi Idris</td> 
<td>budiidris.blogspot.com</td> 
<td>Klik disini</td> 
</tr> 
<tr> 
<td>16</td> 
<td>Yusni</td> 
<td>edukasiyusni.blogspot.com</td> 
<td>Klik disini</td> 
</tr> 
<tr> 
<td>17</td> 
<td>Sumarjiyati</td> 
<td>81-atik.blogspot.com</td> 
<td>Klik disini</td> 
</tr> 
<tr> 
<td>18</td> 
<td>Jawahir</td> 
<td>ninibelajar.blogspot.com</td> 
<td>Klik disini</td> 
</tr> 
<tr> 
<td>19</td> 
<td>Indra Wahyudin</td> 
<td>jarimisterindra.blogspot.com</td> 
<td>Klik disini</td> 
</tr> 
<tr> 
<td>20</td> 
<td>Aam Nurhasanah</td> 
<td>aamnurhasanah12.blogspot.com</td> 
<td>Klik disini</td> 
</tr> 
<tr> 
<td>21</td> 
<td>Heri Apri</td> 
<td>kiaedukasi.blogspot.com</td> 
<td>Klik disini</td> 
</tr> 
<tr> 
<td>22</td> 
<td>Marinan</td> 
<td>marinan80.blogspot.com</td> 
<td>Klik disini</td> 
</tr> 
<tr> 
<td>23</td> 
<td>Sudomo</td> 
<td>eigendomo.com</td> 
<td>Klik disini</td> 
</tr> 
<tr> 
<td>24</td> 
<td>Suyati</td> 
<td>suyatibinyo.blogspot.com</td> 
<td>Klik disini</td> 
</tr> 
<tr> 
<td>25</td> 
<td>Ai Setiawati</td> 
<td>untaiankata2019.blogspot.com</td> 
<td>Klik disini</td> 
</tr> 
<tr> 
<td>26</td> 
<td>Rita Wati</td> 
<td>ritapinang.my.id/</td> 
<td>Klik disini</td> 
</tr> 
<tr> 
<td>27</td> 
<td>Min Hermina</td> 
<td>minhermina.blogspot.com</td> 
<td>Klik disini</td> 
</tr> 
<tr> 
<td>28</td> 
<td>Rince W Utami</td> 
<td>gupres2020.blogspot.com</td> 
<td>Klik disini</td> 
</tr> 
<tr> 
<td>29</td> 
<td>Astuti</td> 
<td>septiasapalu68.blogspot.com</td> 
<td>Klik disini</td> 
</tr> 
<tr> 
<td>30</td> 
<td>E. Hasanah</td> 
<td>hasanahhalima.blogspot.com</td> 
<td>Klik disini</td> 
</tr> 
<tr> 
<td>31</td> 
<td>Erry Y. Siahaan</td> 
<td>erryyulia28.blogspot.com</td> 
<td>Klik disini</td> 
</tr> 
<tr> 
<td>32</td>
<td>Tini Sumartini</td>
<td>ambuguru.blogspot.com</td>
<td>Klik disini</td>
</tr>
</tbody> 
</table>
Untuk mendapatkan script css diatas, silahkan unduh pada tautan download dibawah.

Dengan adanya tabel gaya otomatis seperti diatas, akan membantu kita kerja untuk simple. Namun, tetap ada kekurangan dibalik kesederhanaanya yaitu gayanya monoton seperti itu saja. Jadi, jika ingin bentuk tampilan yang berbeda silahkan menggunakan referensi lainnya.

Semoga bermanfaat.

Bang Regar
Bang Regar Mentor - Educator - Writer

22 komentar untuk "Tutorial Membuat Tabel dengan CSS di Blogger"

  1. Sangat membantu dan mencerahkan bang. Termkash

    BalasHapus
  2. Ilmu yang sangat bermanfaat. Terus berbagi, Kak Jo!

    BalasHapus
  3. Ambu mah pilih jln ke satu ajah hahaha.... mkasìh Pak..

    BalasHapus
    Balasan
    1. Praktisnya memang cara yg pertama, Ambu.
      Tapi manatau mencoba tantangan, bolehlah.

      Hapus
  4. Kereen banget pak.. tulisannya tp blm bs sy aplikasikan

    BalasHapus
    Balasan
    1. Pelan-pelan saja, Bu.
      Yang penting berani mencoba.
      Tetap semangat.

      Kapan2 boleh sharing.

      Hapus
  5. Kereen banget pak.. tulisannya tp blm bs sy aplikasikan

    BalasHapus
  6. Kereen banget pak.. tulisannya tp blm bs sy aplikasikan

    BalasHapus
  7. Kapan-kapan mau mencobanya. Lebih simple menjadi alasan kuat.

    BalasHapus
    Balasan
    1. Monggo, Bu.
      Memang sih kita akan pilih yg simpel dengan screencapture.

      Hapus
  8. Balasan
    1. Iya, Bu.
      Menjawab tantangan dengan praktek.
      Semangat.

      Hapus
  9. terimakasih ilmunya, pak.
    kapan-kapan saya coba

    BalasHapus
  10. terima kasih ilmunya pak,. sangat bermanfaat ini untuk pemula

    BalasHapus
  11. Mantaaapppp betul ini, siap dieksekusi.
    Terimakasih sudah berbagi

    BalasHapus
  12. Tutorial membuat tabel di blog,,,pengen bisa tapi agak ribet kayaknya 🤭

    BalasHapus

  13. Nagaqq Yang Merupakan Agen Bandarq terbaik , Domino 99, Dan Bandar Poker Online Terpercaya di asia hadir untuk anda semua dengan permainan permainan menarik dan bonus menarik untuk anda semua

    Bonus yang diberikan NagaQQ :
    * Bonus rollingan 0.5%,setiap senin di bagikannya
    * Bonus Refferal 10% + 10%,seumur hidup
    * Bonus Jackpot, yang dapat anda dapatkan dengan mudah
    * Minimal Depo 15.000
    * Minimal WD 20.000
    * Deposit via Pulsa TELKOMSEL
    * 6 JENIS BANK ( BCA , BNI, BRI , MANDIRI , CIMB , DANAMON )

    Memegang Gelar atau title sebagai AGEN POKER ONLINE Terbaik di masanya

    Games Yang di Hadirkan NagaQQ :
    * Poker Online
    * BandarQ
    * Domino99
    * Bandar Poker
    * Bandar66
    * Sakong
    * Capsa Susun
    * AduQ
    * Perang Bacarrat
    * Perang Dadu (New Game)


    Info Lebih lanjut Kunjungi :
    Website : NAGAQQ
    Facebook : NagaQQ official
    WHATSAPP : +855977509035
    Line : Cs_nagaQQ
    TELEGRAM :+855967014811

    BACA JUGA BLOGSPORT KAMI YANG LAIN:
    Winner NagaQQ
    Daftar NagaQQ
    nagaqq

    BalasHapus