Cara Mengatur Tampilan list Pada HTML dengan CSS

All list properties atau beberapa properti css yang secara khusus bisa Anda gunakan untuk mengatur tampilan list. List atau daftar adalah sesuatu yang umum dan sering digunakan untuk menampilkan daftar item, misalkan daftar belanja, nama-nama hari, dsb.

Suatu list pada halaman web bisa Anda buat dengan menggunakan elemen li atau tag <li> beserta dengan beberapa tag lainnya pada HTML. Artikel ini membahas cara mengatur tampilan list dengan css.

Daftar isi

1. list-style-type

properti list-style-type digunakan secara khusus untuk menandai daftar item dari suatu list yang dibuat, Jenis penanda yang diinginkan bisa berupa kotak, lingkaran, disc, angka, huruf, angka romawi, dsb.

list-style-type memiliki beberapa nilai yang bisa anda gunakan sebagai penanda untuk daftar item yang dibuat. beberapa nilai yang cukup umum antara lain : disc, square, circle, none, decimal, dsb. Berikut tampilan daftar/list sebelum diberi style.

tampilan list html tanpa style css
Gambar 1

gambar diatas merupakan tampilan standar dari list html sebelum diberi style berupa properti list-style-type. Selanjutnya, coba perhatikan gambar dibawah ini.

tampilan list setelah diberi style list-style-type
Gambar 1.2
Gambar diatas menggunakan nilai lower-alpha, dimana nilai tersebut akan membuat penanda untuk daftar item berubah menjadi huruf a, b, c, dan seterusnya. Berikut kode css+html untuk membuat tampilan seperti diatas.

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> contoh list-style-type dengan nilai lower-alpha </title>
        <style>
            li{
                list-style-type: lower-alpha;
            }
        </style>
    </head>

    <body>
        <h2> Nama Hari </h2>
        <ul>
            <li>Senin</li>
            <li>Selasa</li>
            <li>Rabu</li>
            <li>Kamis</li>
            <li>Jum'at</li>
            <li>Sabtu</li>
            <li>Minggu</li>
        </ul>
    </body>

</html>

2. list-style-position

properti css ini digunakan untuk menentukan posisi penanda/marker pada daftar item. Properti list-style-position memiliki 2 nilai utama yaitu inside dan outside.

Nilai inside digunakan untuk menentukan posisi penanda yang nantinya akan terletak didalam daftar item. Sedangkan nilai outside akan membuat posisi penanda berapa diluar daftar item.

Contoh sederhana yaitu, misalkan suatu elemen li diberi style dengan nilai inside. Nah, nilai inside akan membuat penanda untuk daftar item berada didalam elemen li.

Sedangkan jika style yang diinginkan menggunakan nilai outside, maka penanda untuk daftar item akan berada diluar elemen li. Coba perhatikan gambar berikut ini, gambar berikut akan menampilkan contoh penggunaan list-style-position dengan ke-2 nilainya.

tampilan list dengan properti list-style-position(inside dan outside)
Gambar 2

Sebagai tanda untuk memperjelas penggunaan nilai inside dan outside, saya menambahkan properti border untuk memberi garis tepi pada elemen li. jika diatur dengan nilai inside, maka penanda akan berada didalam garis tepi yang dibuat.

Jika nilai outside yang digunakan, maka penanda untuk daftar item akan berada diluar garis tepi atau elemen li. berikut kode css+html untuk membuat tampilan list seperti gambar diatas.

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> contoh list-style-position dengan nilai inside dan outside </title>
        <style>
            li{
                list-style-type: circle;
                border: 1px solid black;
            }
            .inside li{
                list-style-position: inside;
            }
            .outside li{
                list-style-position: outside;
            }
        </style>
    </head>

    <body>
        <h3> Nilai - Inside </h3>
        <ul class="inside">
            <li>Senin</li>
            <li>Selasa</li>
            <li>Rabu</li>
        </ul>
        <br />
        <h3> Nilai - Outside </h3>
        <ul class="outside">
            <li>Kamis</li>
            <li>Jum'at</li>
            <li>Sabtu</li>
        </ul>
    </body>

</html>

3. list-style-image

Jika sebelumnya pada pembahasan No 1, Anda bisa membuat penanda untuk daftar item dengan tanda khusus seperti lingkaran, kotak, angka romawi. Hal tersebut berbeda jika Anda menggunakan properti list-style-image.

list-style-image digunakan untuk mengganti penanda daftar item dengan gambar/icon yang bisa ditentukan sendiri. Sebagai contoh, Saya akan menampilkan penanda datar item dengan logo gotutorid.com, berikut gambar contohnya pada halaman web.

tampilan list dengan properti list-style-image
Gambar 3

Nah, lalu seperti apakah contoh kode CSS untuk membuat gambar seperti diatas?. Berikut contoh kode css lengkap dengan kode html-nya.

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> contoh tampilan lis dengan properti list-style-image </title>
        <style>
            .custom li{
                list-style-image: url(logo.png);
            }
        </style>
    </head>

    <body>
        <h3> tampilan standart </h3>
        <ul>
            <li>Senin</li>
            <li>Selasa</li>
            <li>Rabu</li>
        </ul>
        <br />
        <h3> tampilan dengan properti list-style-image </h3>
        <ul class="custom">
            <li>Kamis</li>
            <li>Jum'at</li>
            <li>Sabtu</li>
        </ul>
    </body>

</html>

catatan : Anda harus menyiapkan image/icon yang akan digunakan sebagai penanda/numbering untuk daftar item, kemudian simpan gambar tersebut dilokasi yang sama dengan file berisi kode diatas.

4. list-style

list-style digunakan untuk menentukan semua properti list(all list properties) dalam satu deklarasi. Value untuk properti list-style yaitu nilai dari list-style-type, list-style-position, dan list-style-image. Properti list-style berfungsi untuk mempersingkat penulisan dari semua properti list. Sintaks css : list-style: list-style-type list-style-position list-style-image;. Berikut contoh kode selengkapnya.

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> contoh list-style css </title>
        <style>
            .custom li{
                list-style: circle inside none;
            }
        </style>
    </head>

    <body>
        <h3> tampilan standart </h3>
        <ul>
            <li>Senin</li>
            <li>Selasa</li>
            <li>Rabu</li>
        </ul>
        <br />
        <h3> tampilan dengan properti list-style </h3>
        <ul class="custom">
            <li>Kamis</li>
            <li>Jum'at</li>
            <li>Sabtu</li>
        </ul>
    </body>

</html>

dari contoh kode diatas, berikut jika ditampilkan pada halaman web.

contoh penggunaan dari properti list-style pada css
Gambar 4