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.

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.

Lihat Hasilnya

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.