Hai teman-teman, selamat datang kembali di course HTML & CSS. Hari ini kita akan bahas beberapa hal mengenai elemen List & Table. Di pertemuan sebelumnya kita sudah mengenal beberapa Property terkait pengaturan Font & Text CSS, seperti biasa, bagi teman-teman yang belum cek silahkan bisa membacanya.
List & Table
Sering kita lihat, banyak sekali website yang menggunakan elemen List dan Table untuk memudahkan pengunjung membaca dan memahami isi konten yang disajikan.
Beruntungnya, CSS memberikan kesempatan kepada kita untuk memanipulasi kedua elemen tersebut agar terlihat menarik.
List
List merupakan elemen yang bertugas menyajikan daftar item/text. List terbagi menjadi 2 jenis, Ordered dan Unordered List.
Ordered List adalah bentuk List yang sesuai urutan, dilambangkan dengan angka, huruf abjad, sampai huruf romawi.
Sedangkan Unordered List kebalikan dari Ordered List, biasanya dilambangkan dengan lingkaran, titik-titik, dan simbol-simbol lain yang sama.
Syntax HTML
- Ordered List
<ul>
<li> text </li>
<li> text </li>
<li> text </li>
</ul>- Unordered List
<ol>
<li> text </li>
<li> text </li>
<li> text </li>
</ol>Macam-macam Property yang bisa kita gunakan untuk mengatur elemen list diantaranya.
- list-style-type
list-style-type digunakan untuk menentukan jenis penanda/marker dari text List. Ada banyak sekali jenis marker yang dapat digunakan, dibawah ini beberapa contoh nilai list-style-type yang biasa digunakan :
- none
- disc
- circle
- square
- decimal
- decimal-leading-zero
- lower-roman
- upper-roman
- lower-greek
- lower-latin
- upper-latin
- lower-alpha
- upper-alpha
Dan masih banyak lagi, teman-teman bisa check nilai list-style-type lainnya di website MDN.
Sintaks
list-style-type: value;
Contoh penggunaan
Kode HTML:
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
Kode CSS:
ul {
list-style-type: upper-roman;
} Maka hasilnya seperti berikut
- list-style-image
Pada list-style-image, bukan karakter/simbol yang digunakan sebagai marker list, melainkan sebuah gambar.
Sintaks:
list-style-image: url(filename);
Kode CSS:
ul {
list-style-image: url(gambar/arrow.png);
} - list-style-position
list-style-position berfungsi menentukan dimana marker akan diletakkan. list-style-position hanya menerima nilai “inside” (didalam box elemen) atau “outside” (diluar box elemen),
Sintaks
list-style-position: inside | outside;
Kode CSS
ul {
list-style-position: inside;
} - list-style
Ketiga property di atas dapat digabung menjadi satu property: list-style.
Sintaks
list-style: list-style-type | list-style-position | list-style-image;
Kode CSS:
ul {
list-style: circle inside none;
}Table
Seperti pada materi Table sebelumnya, secara sederhana table dapat diartikan sebagai rangkaian/kumpulan data atau text yang tersusun atas kolom dan baris. Kita bisa merubah tampilan table dengan beberapa property berikut
- border
Border menjadi property table yang paling vital, karena biasanya yang pertama kali orang pikirkan ketika melihat table adalah garis/border. Walaupun begitu, terkadang dalam beberapa kasus border juga tidak diperlukan.
Sintaks
border: border-width border-style border-color;
border:
Contoh penggunaan:
table th tr {
border: 1px solid red;
}- border-radius
border-radius memberikan efek melingkar di sudut-sudut antar garis.
Sintaks
border-radius: size;
Contoh penggunaan:
table th {
border: 1px solid black;
border-radius: 10px;
}- border-collapse
Fungsinya mengatur apakah garis/border di tiap kolom akan berbagi tempat/menjadi satu garis atau terpisah/memiliki ukuran garis sendiri-sendiri.
Sintaks
border-collapse: collapse | separate;
Contoh Penggunaan:
table {
Border: 2px solid red;
border-collapse: collapse; // bawaan
}- border-spacing
border-spacing berfungsi menambahkan jarak antar garis kolom. border-spacing ini tidak akan memberikan efek jika nilai border-collapse : collapse;
Sintaks
border-spacing: length;
Contoh penggunaan:
table {
border: 1px red;
border-collapse: separate;
border-spacing: 4px;
}- caption-side
Pasti kita sering melihat tulisan dibawah atau diatas sebuah table seperti
“Table 1.1 data pemilik toko” bukan? Text diatas atau dibawah table ini disebut dengan caption, dan dapat diatur letaknya dengan property CSS caption-side.
Sintaks
caption-side: top | bottom;
Contoh penggunaan:
Kode HTML:
<table class="contoh">
<caption>Table 1.1 Detail Murid SMK</caption>
<tr>
<th> Name</th>
<th>Kelas.</th>
<th>Alamat</th>
</tr>
</table>Kode CSS:
.contoh {
border: 1px red;
caption-side: bottom;
}- empty-cells
empty-cells berguna untuk menyembunyikan atau menampilkan cell yang kosong. Nilai bawaan dari empty-cell adalah show.
Sintaks:
empty-cells: show | hide;
Contoh penggunaan:
table {
empty-cells: hide;
}- table-layout
Secara default, width dan height sebuah tablet ditentukan oleh panjang konten/text didalamnya. untuk mengatasi ukuran tiap cell yang tidak sama dan terkesan kurang rapi, maka kita bisa menggunakan table-layout dengan nilai fixed.
Sintaks
table-layout: auto | fixed;
tablet-layout: fixed mengatur lebar sebuah cell berdasarkan pembagian lebar keseluruhan table. Agar berfungsi elemen tablet yang diberi property ini harus ditentukan lebar/width nya
Contoh penggunaan:
tablet {
width: 100%;
text-align: center;
table-layout: fixed;
}
Hasilnya tiap cell dalam tablet akan memiliki lebar dan tinggi yang sama.
Penutup
Elemen list dapat kita modifikasi dengan Property list-style untuk mengatur bentuk dan posisi marker dari item List. Kitta juga dapat memanipulasi tampilan table, mulai dari border, jarak, visibilitas cell, hingga layout-nya. Selain Property di atas, teman-teman juga bisa mengkombinasikannya dengan property lain, seperti background-color, font, dan lain sebagainya.
Untuk pembahasan List dan Table kali ini kita cukupkan sampai disini dulu. Dan materi dasar yang akan kita bahas selanjutnya adalah CSS Box Model.!
Jika ada pertanyaan silahkan isi kolom komentar dibawah
See you next time!
