Membuat Tabel Daftar Dengan CSS

Mad Trik - Pembahasan kali ini adalah cara membuat tabel daftar. Sebenarnya di blog ini juga sudah ada sejenis tabel yang seperti ini tapi bukan daftar melainkan tabel bacaan yang sudah ada di artikel-artikel sebelumnya di blog ini seperti pada artikel forum dengan fitur signature, disitu saya menaruh semacam alat yang saya bikin sendiri atau mungkin saya edit sedemikian rupa.

Hasil dari tabel daftar.
Hasil dari tabel daftar.

Entahlah, saya juga tidak pernah melihat  alat atau widget yang semacam ini sebelumnya di blogger mana pun, jadi mungkin cuman ada di blog ini saja, kalaupun ada tolong beritahu saya ya. Saya juga sebernarnya nggak pengen klaim sembarangan tapi kalo ada yang sejenis itu sebelum blog ini tolong kabarin saya saja.


Untuk pembahasan kali ini mungkin saya akan membahas tentang tabel daftar yang saya dapat dari situs CSSDeck ini terlebih dahulu, mungkin nanti saya akan membahas juga tentang alat yang sudah saya pakai di blog ini yang namanya juga tidak beda jauh, yaitu tabel bacaan, mungkin beberapa hari setelah artikel ini dipublikaskan.

Sistem tabel daftar ini sebenanya memakai tag ol (Ordered List) atau numbered list, yang biasanya ada di menu format di Blogger maupun Wordpress saat menulis artikel.

Nah, daripada banyak basa-basi, lebih baik kita langsung ke tutorialnya:

CSS

Seperti pada penempatan CSS biasanya ya, </style> ataupun ]]><b:skin/>:

.kotaknya-tabel-daftar {
    width: auto;
    margin: auto;
    background: #FFF;
    padding: 10px 20px;
    margin-top: 10%;
}
.judul-tabel-daftar:before {
    content:'\f0cb';
    font-family:fontAwesome;
    font-size:33px;
    font-style:normal;
    background: #ccc;
    color:#333;
    top:0;
    left:0;
    padding:13px 20px;
    position:absolute
}
.judul-tabel-daftar {
    background: #fff;
    color: #333;
    padding: 15px 20px 15px 75px;
    font-weight: normal;
    position: relative;
    text-align: center;
    font-size: 29px;
    border: 2px solid #ccc;
}
ol.daftarnya {
    counter-reset:li;
    /* Memulai penghitungan */
    margin-left:0;
    /* Menghilangkan left margin bawaan */
    padding-left:0;
    /* Menghilangkan left padding bawaan */
}
ol.daftarnya > li {
    position:relative;
    /* Buat posisi konteks */
    margin:0 0 6px 2em;
    /* Berikan setiap daftar item left margin untuk membuat sejumlah ruang untuk nomor */
    padding:3px 8px;
    /* Tambahkan beberapa ruang untuk konten */
    list-style:none;
    /* menon-aktifkan default penomoram item */
    border-top:2px solid #ccc;
    border-bottom:2px solid #ccc;
    border-right:2px solid #ccc;
    background:#fff;
    cursor: default
}
ol.daftarnya > li:before {
    content:counter(li);
    counter-increment:li;
    /* Posisi dan gaya penomoran */
    position:absolute;
    top:-2px;
    left:-2em;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:2em;
    margin-right:8px;
    padding:4px;
    border-top:2px solid #ccc;
    color:#fff;
    background:#ccc;
    font-weight:bold;
    font-family:"Helvetica Neue", Arial, sans-serif;
    text-align:center;
}
ol.daftarnya > li:hover, ol > li:hover {
    border-color: #00afaf;
    background-color: #f5f5f5;
}
ol.daftarnya > li:hover:before, ol > li:hover:before {
    background-color: #00afaf;
    border-color: #00afaf;
}
.daftarnya li ol, .daftarnya li ul {
    margin-top:6px;
}
.daftarnya ol ol li:last-child {
    margin-bottom:0;
}

Jika kamu teliti melihat kode CSS diatas, ada .judul-tabel-daftar:before {, untuk menampilkan font-nya, sebelumnya kamu harus memasang Font Awesome Icons dulu untuk menampilkan ikonnya.

Untuk warna dan tampilannya kalau tidak sesuai dengan selera kamu, silahkan diganti saja tampilannya.

HTML

Untuk men-summon atau memanggil tabel daftarnya tinggal masukin saja kode dibawah ini pada mode HTML saat membuat artikel:

<div class="kotaknya-tabel-daftar">
    <div class="judul-tabel-daftar">Tabel Daftar</div>
    <ol class="daftarnya">
        <li>--- Daftar Isinya ---</li>
        <li>--- Daftar Isinya ---</li>
        <li>--- Daftar Isinya ---</li>
        <li>--- Daftar Isinya ---</li>
        <li>--- Daftar Isinya ---</li>
        <li>--- Daftar Isinya ---</li>
        <li>--- Daftar Isinya ---</li>
        <li>--- Daftar Isinya ---</li>
        <li>--- Daftar Isinya ---</li>
        <li>--- Daftar Isinya ---</li>
    </ol>
</div>

Jangan lupa juga untuk mengganti --- Daftar Isinya --- dengan daftar yang ingin kamu masukan kedalam sini.

Setelah itu lihat hasilnya akhirnya di blog kamu. Bagaimana sudah cukup cantik bukan hasilnya ?

[Balik Keatas]

Jika ada pertanyaan yang ingin ditanyakan, silahkan berkomentar dibawah. Jika tidak ada kata terimakasih juga sudah cukup kok untuk pembahasan kali ini. Dan sampai jumpa di tutorial lainnya.

8 comments

  1. Keren euy. Saya lagi suka bikin tulisan untuk resep makanan. Cocok kayaknya pakai ini. Ini kalau di wordpress.org taruh dimana yah

    ReplyDelete
    Replies
    1. Kalo nembahin CSS kurang tau mas :(

      tapi kalo HTMLnya sih tau :D

      Delete
    2. Bukannya itu HTML yah.
      MEmang mau pakai HTML, kan di postnya support html.

      Delete
  2. Asyik kalau hanya HTML dan CSS pasti bisa terapkan juga di WordPress ya mas?

    ReplyDelete
  3. saya biasanya pakai ini
    http://tableizer.journalistopia.com
    tinggal copas dari word/excell, langsung jadi :)

    ReplyDelete
    Replies
    1. Kalo saya malah agak susah (ribet) pakai cara yang itu om @@,

      Delete

Perlu diingat saya juga manusia, yang kadang punya salah, jika ada kesalahan pada artikel yang dibuat kamu bisa membantu saya untuk memperbaiki artikel tersebut. Dan kadang saya juga tidak bisa manjawab pertanyaan kamu.