CSSMateri CourseNusantech Academy

Modul 3-6. CSS List and Table

By 13 Mei 2020 Juni 3rd, 2020 No Comments

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!

Leave a Reply