Kursus IT Dasar CSS 029_Daftar dan Tabel

Daftar

Dalam CSS, Anda dapat mengoptimalkan gaya daftar melalui properti list-style-type list-style-image list-style-position.

Tipe Daftar

Mendefinisikan tipe daftar, termasuk daftar tidak berurutan, daftar berurutan, dan daftar definisi. none tidak ditampilkan, disc titik bulat, circle lingkaran, square persegi, decimal angka, lower-alpha huruf kecil, upper-alpha huruf besar, decimal-leading-zero angka dengan awalan 0, lower-roman angka romawi kecil, upper-roman angka romawi besar, dll.

Contoh:

1
.ul-none{
2
    list-style-type: none;
3
}
4
.ul-disc{
5
    list-style-type: disc;
6
}
7
.ul-circle{
8
    list-style-type: circle;
9
}
10
.ul-square{
11
    list-style-type: square;
12
}
13
.ul-decimal{
14
    list-style-type: decimal;
15
}
16
.ul-lower-alpha{
17
    list-style-type: lower-alpha;
18
}
19
.ul-upper-alpha{
20
    list-style-type: upper-alpha;
21
}
22
.ul-decimal-leading-zero{
23
    list-style-type: decimal-leading-zero;
24
}
25
.ul-lower-roman{
26
    list-style-type: lower-roman;
27
}
28
.ul-upper-roman{
29
    list-style-type: upper-roman;
30
}

1
    <ul class="ul-none">
2
        <li>Demonstrasi tipe daftar</li>
3
        <li>Demonstrasi tipe daftar</li>
4
        <li>Demonstrasi tipe daftar</li>
5
    </ul>
6
    <ul class="ul-disc">
7
        <li>Demonstrasi tipe daftar</li>
8
        <li>Demonstrasi tipe daftar</li>
9
        <li>Demonstrasi tipe daftar</li>
10
    </ul>
11
    <ul class="ul-circle">
12
        <li>Demonstrasi tipe daftar</li>
13
        <li>Demonstrasi tipe daftar</li>
14
        <li>Demonstrasi tipe daftar</li>
15
    </ul>
16
    <ul class="ul-square">
17
        <li>Demonstrasi tipe daftar</li>
18
        <li>Demonstrasi tipe daftar</li>
19
        <li>Demonstrasi tipe daftar</li>
20
    </ul>
21
    <ul class="ul-decimal">
22
        <li>Demonstrasi tipe daftar</li>
23
        <li>Demonstrasi tipe daftar</li>
24
        <li>Demonstrasi tipe daftar</li>
25
    </ul>
26
    <ul class="ul-lower-alpha">
27
        <li>Demonstrasi tipe daftar</li>
28
        <li>Demonstrasi tipe daftar</li>
29
        <li>Demonstrasi tipe daftar</li>
30
    </ul>
31
    <ul class="ul-upper-roman">
32
        <li>Demonstrasi tipe daftar</li>
33
        <li>Demonstrasi tipe daftar</li>
34
        <li>Demonstrasi tipe daftar</li>
35
    </ul>
36
    <ul class="ul-decimal-leading-zero">
37
        <li>Demonstrasi tipe daftar</li>
38
        <li>Demonstrasi tipe daftar</li>
39
        <li>Demonstrasi tipe daftar</li>
40
    </ul>
41
    <ul class="ul-lower-roman">
42
        <li>Demonstrasi tipe daftar</li>
43
        <li>Demonstrasi tipe daftar</li>
44
        <li>Demonstrasi tipe daftar</li>
45
    </ul>
46
    <ul class="ul-upper-roman">
47
        <li>Demonstrasi tipe daftar</li>
48
        <li>Demonstrasi tipe daftar</li>
49
        <li>Demonstrasi tipe daftar</li>
50
    </ul>

Efek: Efek contoh

Penanda Daftar

Mengatur posisi penanda item daftar (di dalam atau di luar). inside di dalam, outside di luar

Contoh:

1
.ul-inside{
2
    list-style-position: inside;
3
}
4
.ul-outside{
5
    list-style-position: outside;
6
}
7
li{
8
    background-color: aquamarine;
9
}

1
    <ul class="ul-inside">
2
        <li>Demonstrasi penanda daftar</li>
3
        <li>Demonstrasi penanda daftar</li>
4
        <li>Demonstrasi penanda daftar</li>
5
    </ul>
6
    <ul class="ul-outside">
7
        <li>Demonstrasi penanda daftar</li>
8
        <li>Demonstrasi penanda daftar</li>
9
        <li>Demonstrasi penanda daftar</li>
10
    </ul>

Efek: Efek contoh

Gambar Daftar

Mengatur gambar penanda daftar, dapat diatur ke alamat URL gambar.

Contoh:

1
.ul-image1{
2
    list-style-image: url("li1.png");
3
}
4
.ul-image2{
5
    list-style-image: url("li2.png");
6
}
7
.ul-image3{
8
    list-style-image: url("li3.png");
9
}

1
    <ul class="ul-image1">
2
        <li>Demonstrasi penanda daftar</li>
3
        <li>Demonstrasi penanda daftar</li>
4
        <li>Demonstrasi penanda daftar</li>
5
    </ul>
6
    <ul class="ul-image2">
7
        <li>Demonstrasi penanda daftar</li>
8
        <li>Demonstrasi penanda daftar</li>
9
        <li>Demonstrasi penanda daftar</li>
10
    </ul>
11
    <ul class="ul-image3">
12
        <li>Demonstrasi penanda daftar</li>
13
        <li>Demonstrasi penanda daftar</li>
14
        <li>Demonstrasi penanda daftar</li>
15
    </ul>

Efek:

Efek contoh Ukuran yang diatur melalui ul mungkin menyebabkan gambar meregang atau terkompresi, oleh karena itu sebaiknya gunakan alat pengeditan untuk mengatur ukuran asli gambar. Jika ingin menyesuaikan ukuran tampilan gambar dalam item daftar tanpa mengubah gambar itu sendiri, Anda dapat menggunakan background-image (gambar latar belakang) dari li untuk mengontrol gambar daftar secara fleksibel.

Contoh:

1
li{
2
    list-style-type: none;
3
    background-image: url("li1.png");
4
    background-size: 10px 10px;
5
    background-repeat: no-repeat;
6
    background-position: 2px center;
7
    padding-left: 20px;
8
}

1
    <ul>
2
        <li>Demonstrasi penanda daftar</li>
3
        <li>Demonstrasi penanda daftar</li>
4
        <li>Demonstrasi penanda daftar</li>
5
    </ul>

Efek: Efek contoh Bentuk singkatan: Properti list-style digunakan untuk mengatur tiga properti gaya penanda daftar secara bersamaan: list-style-type, list-style-position, dan list-style-image. Nilai dapat dihilangkan, tetapi urutan tidak boleh diubah.

Contoh:

1
ul{
2
    list-style: square inside url('li1.png');
3
}

Tabel

Dalam CSS, Anda dapat mengontrol tampilan dan tata letak tabel melalui beberapa properti seperti border.

`border`

Mendefinisikan border tabel, dapat mengatur lebar, warna, dan gaya border.

Contoh:

1
table {
2
    border: 1px solid red;
3
}

1
<table>
2
    <tr>
3
        <td>Demonstrasi tabel 1</td>
4
        <td>Demonstrasi tabel 2</td>
5
        <td>Demonstrasi tabel 3</td>
6
        <td>Demonstrasi tabel 4</td>
7
    </tr>
8
    <tr>
9
        <td>Demonstrasi tabel 1</td>
10
        <td>Demonstrasi tabel 2</td>
11
        <td>Demonstrasi tabel 3</td>
12
        <td>Demonstrasi tabel 4</td>
13
    </tr>
14
    <tr>
15
        <td>Demonstrasi tabel 1</td>
16
        <td>Demonstrasi tabel 2</td>
17
        <td>Demonstrasi tabel 3</td>
18
        <td>Demonstrasi tabel 4</td>
19
    </tr>
20
</table>

Efek:

Efek contoh

`th` `td`

Dalam CSS, th dan td dapat mengontrol gaya header, baris, dan sel data tabel.

Contoh:

1
table {
2
    border: 1px solid red;
3
}
4
th {
5
    background-color: #d6d7d8; /* Mengatur warna latar belakang header */
6
    color: #333; /* Mengatur warna teks header */
7
    font-weight: bold; /* Mengatur teks header menjadi tebal */
8
    padding: 10px; /* Mengatur padding header */
9
    text-align: center; /* Mengatur teks rata tengah */
10
}
11
td {
12
    border: 1px solid green; /* Mengatur border bawah antar baris */
13
    padding: 8px; /* Mengatur padding sel */
14
    text-align: center; /* Mengatur teks rata tengah */
15
}

1
    <table>
2
        <tr>
3
            <th>Demonstrasi tabel 1</th>
4
            <th>Demonstrasi tabel 2</th>
5
            <th>Demonstrasi tabel 3</th>
6
            <th>Demonstrasi tabel 4</th>
7
        </tr>
8
        <tr>
9
            <td>Demonstrasi tabel 1</td>
10
            <td>Demonstrasi tabel 2</td>
11
            <td>Demonstrasi tabel 3</td>
12
            <td>Demonstrasi tabel 4</td>
13
        </tr>
14
        <tr>
15
            <td>Demonstrasi tabel 1</td>
16
            <td>Demonstrasi tabel 2</td>
17
            <td>Demonstrasi tabel 3</td>
18
            <td>Demonstrasi tabel 4</td>
19
        </tr>
20
    </table>

Efek:

Efek contoh

`border-collapse`

Properti untuk mengontrol cara penggabungan border yang berdekatan pada tabel.

separate: tidak menggabungkan border, border tabel tetap independen.
collapse: menggabungkan border, border tabel digabung menjadi satu.

Contoh:

1
.table1 {
2
    border: 2px solid red;
3
    border-collapse: separate;
4
}
5
.table2 {
6
    border: 2px solid red;
7
    border-collapse: collapse;
8
}

1
    <table class="table1">
2
        <tr>
3
            <td>Demonstrasi tabel 1</td>
4
            <td>Demonstrasi tabel 2</td>
5
            <td>Demonstrasi tabel 3</td>
6
            <td>Demonstrasi tabel 4</td>
7
        </tr>
8
        <tr>
9
            <td>Demonstrasi tabel 1</td>
10
            <td>Demonstrasi tabel 2</td>
11
            <td>Demonstrasi tabel 3</td>
12
            <td>Demonstrasi tabel 4</td>
13
        </tr>
14
        <tr>
15
            <td>Demonstrasi tabel 1</td>
16
            <td>Demonstrasi tabel 2</td>
17
            <td>Demonstrasi tabel 3</td>
18
            <td>Demonstrasi tabel 4</td>
19
        </tr>
20
    </table>
21
    <table class="table2">
22
        <tr>
23
            <td>Demonstrasi tabel 1</td>
24
            <td>Demonstrasi tabel 2</td>
25
            <td>Demonstrasi tabel 3</td>
26
            <td>Demonstrasi tabel 4</td>
27
        </tr>
28
        <tr>
29
            <td>Demonstrasi tabel 1</td>
30
            <td>Demonstrasi tabel 2</td>
31
            <td>Demonstrasi tabel 3</td>
32
            <td>Demonstrasi tabel 4</td>
33
        </tr>
34
        <tr>
35
            <td>Demonstrasi tabel 1</td>
36
            <td>Demonstrasi tabel 2</td>
37
            <td>Demonstrasi tabel 3</td>
38
            <td>Demonstrasi tabel 4</td>
39
        </tr>
40
    </table>

Efek:

Efek contoh

`border-spacing`

Mendefinisikan jarak border tabel, dapat mengatur jarak antar border.

Contoh:

1
table {
2
    border: 1px solid red;
3
    border-spacing: 10px;
4
}

1
    <table>
2
        <tr>
3
            <td>Demonstrasi tabel 1</td>
4
            <td>Demonstrasi tabel 2</td>
5
            <td>Demonstrasi tabel 3</td>
6
            <td>Demonstrasi tabel 4</td>
7
        </tr>
8
        <tr>
9
            <td>Demonstrasi tabel 1</td>
10
            <td>Demonstrasi tabel 2</td>
11
            <td>Demonstrasi tabel 3</td>
12
            <td>Demonstrasi tabel 4</td>
13
        </tr>
14
        <tr>
15
            <td>Demonstrasi tabel 1</td>
16
            <td>Demonstrasi tabel 2</td>
17
            <td>Demonstrasi tabel 3</td>
18
            <td>Demonstrasi tabel 4</td>
19
        </tr>
20
    </table>

Efek:

Efek contoh

`table-layout`

Mendefinisikan mode tata letak tabel.

auto: tata letak otomatis, lebar dan tinggi tabel ditentukan oleh konten.
fixed: tata letak tetap, lebar dan tinggi tabel ditentukan oleh nilai yang ditentukan.

Contoh:

1
.table1 {
2
    border: 1px solid red;
3
    table-layout: auto;
4
    width: 100%;
5
}
6
.table2 {
7
    border: 1px solid red;
8
    table-layout: fixed;
9
    width: 100%;
10
}
11
th, td {
12
    border: 1px solid red;
13
}

1
    <table class="table1">
2
        <tr>
3
            <td>Demonstrasi tabel 1Demonstrasi tabel 1Demonstrasi tabel 1Demonstrasi tabel 1</td>
4
            <td>Demonstrasi tabel 2</td>
5
            <td>Demonstrasi tabel 3</td>
6
            <td>Demonstrasi tabel 4</td>
7
        </tr>
8
        <tr>
9
            <td>Demonstrasi tabel 1</td>
10
            <td>Demonstrasi tabel 2</td>
11
            <td>Demonstrasi tabel 3</td>
12
            <td>Demonstrasi tabel 4</td>
13
        </tr>
14
        <tr>
15
            <td>Demonstrasi tabel 1</td>
16
            <td>Demonstrasi tabel 2</td>
17
            <td>Demonstrasi tabel 3</td>
18
            <td>Demonstrasi tabel 4</td>
19
        </tr>
20
    </table>
21
    <br>
22
    <table class="table2">
23
        <tr>
24
            <td>Demonstrasi tabel 1Demonstrasi tabel 1Demonstrasi tabel 1Demonstrasi tabel 1</td>
25
            <td>Demonstrasi tabel 2</td>
26
            <td>Demonstrasi tabel 3</td>
27
            <td>Demonstrasi tabel 4</td>
28
        </tr>
29
        <tr>
30
            <td>Demonstrasi tabel 1</td>
31
            <td>Demonstrasi tabel 2</td>
32
            <td>Demonstrasi tabel 3</td>
33
            <td>Demonstrasi tabel 4</td>
34
        </tr>
35
        <tr>
36
            <td>Demonstrasi tabel 1</td>
37
            <td>Demonstrasi tabel 2</td>
38
            <td>Demonstrasi tabel 3</td>
39
            <td>Demonstrasi tabel 4</td>
40
        </tr>
41
    </table>

Efek:

Efek contoh

`caption-side`

Mendefinisikan posisi keterangan tabel, dapat diatur dengan nilai berikut:

top: keterangan berada di bagian atas tabel.
bottom: keterangan berada di bagian bawah tabel.

Contoh:

1
.table1 {
2
    border: 1px solid red;
3
    caption-side: top;
4
}
5
.table2 {
6
    border: 1px solid red;
7
    caption-side: bottom;
8
}

1
    <table class="table1">
2
        <caption>Demonstrasi header ABC123</caption>
3
        <tr>
4
            <td>Demonstrasi tabel 1Demonstrasi tabel 1Demonstrasi tabel 1Demonstrasi tabel 1</td>
5
            <td>Demonstrasi tabel 2</td>
6
            <td>Demonstrasi tabel 3</td>
7
            <td>Demonstrasi tabel 4</td>
8
        </tr>
9
        <tr>
10
            <td>Demonstrasi tabel 1</td>
11
            <td>Demonstrasi tabel 2</td>
12
            <td>Demonstrasi tabel 3</td>
13
            <td>Demonstrasi tabel 4</td>
14
        </tr>
15
        <tr>
16
            <td>Demonstrasi tabel 1</td>
17
            <td>Demonstrasi tabel 2</td>
18
            <td>Demonstrasi tabel 3</td>
19
            <td>Demonstrasi tabel 4</td>
20
        </tr>
21
    </table>
22
    <br>
23
    <table class="table2">
24
        <caption>Demonstrasi header ABC123</caption>
25
        <tr>
26
            <td>Demonstrasi tabel 1Demonstrasi tabel 1Demonstrasi tabel 1Demonstrasi tabel 1</td>
27
            <td>Demonstrasi tabel 2</td>
28
            <td>Demonstrasi tabel 3</td>
29
            <td>Demonstrasi tabel 4</td>
30
        </tr>
31
        <tr>
32
            <td>Demonstrasi tabel 1</td>
33
            <td>Demonstrasi tabel 2</td>
34
            <td>Demonstrasi tabel 3</td>
35
            <td>Demonstrasi tabel 4</td>
36
        </tr>
37
        <tr>
38
            <td>Demonstrasi tabel 1</td>
39
            <td>Demonstrasi tabel 2</td>
40
            <td>Demonstrasi tabel 3</td>
41
            <td>Demonstrasi tabel 4</td>
42
        </tr>
43
    </table>

Efek: Efek contoh

Daftar

Tipe Daftar

Penanda Daftar

Gambar Daftar

Tabel

border

th td

border-collapse

border-spacing

table-layout

caption-side

Komentar

`border`

`th` `td`

`border-collapse`

`border-spacing`

`table-layout`

`caption-side`