close

Panduan Memformat Daftar dan Tabel di CSS- Properti dan Contoh

Memformat daftar dan tabel adalah bagian penting untuk menampilkan informasi di situs web Anda. CSS menyediakan properti dan kelas untuk membuat dan menyesuaikan daftar dan tabel sesuai keinginan Anda. Berikut adalah panduan terperinci tentang cara memformat daftar dan tabel di CSS.

 

Daftar Pemformatan

Daftar Tidak Terurut(ul)

Properti utama: tipe-daftar-gaya.

Nilai: none, disc, circle, square.

Contoh:

ul {  
  list-style-type: disc;  
}

Daftar Pesanan(ol)

Properti utama: tipe-daftar-gaya.

Nilai: tidak ada(default), desimal, alfa bawah, alfa atas, romawi rendah, romawi atas.

Contoh:

ol {  
  list-style-type: decimal;  
}

Daftar Definisi(dl)

Properti utama: Tidak ada properti CSS khusus untuk memformat daftar definisi. Namun, Anda dapat mengatur gaya elemen dalam daftar menggunakan kelas atau properti lain seperti font-size, font-weight, margin, padding, etc.

Contoh:

<dl>  
  <dt>HTML</dt>  
  <dd>A markup language for creating web pages</dd>  
  <dt>CSS</dt>  
  <dd>A styling language for web pages</dd>  
</dl>  

dt {  
  font-weight: bold;  
}

 

Memformat Tabel

Pemformatan Struktur Tabel

Properti utama: border-collapse.

Nilai: separate(default), collaps e.

Contoh:

table {  
  border-collapse: collapse;  
}

Pemformatan Perbatasan Tabel

Properti utama: border.

Nilai: Nilai batas, misalnya: 1px solid black.

Contoh:

table {  
  border: 1px solid black;  
}

Pemformatan Batas Sel

Properti utama: border.

Nilai: Nilai batas, misalnya: 1px solid black.

Contoh:

td, th {  
  border: 1px solid black;  
}

Penjajaran dan Spasi Sel Tabel

Properti utama: text-align, padding.

  • text-align: Nilai perataan, misalnya: left, right, center.
  • padding: Spasi nilai dalam sel, misalnya: 10px.

Contoh:

th {  
  text-align: center;  
  padding: 10px;  
}

Latar Belakang dan Warna Teks dalam Tabel

Properti utama: background-color, color

  • background-color: Nilai warna latar belakang, misalnya: lightgray.
  • color: Nilai warna teks, misalnya: white.

Contoh:

table {  
  background-color: lightgray;  
  color: white;  
}

Ukuran Kolom dan Baris dalam Tabel

Properti utama: width, height.

  • width: Nilai lebar, misalnya: "100px", "20%".
  • height: Nilai tinggi, misalnya: "50px", "10%".

Contoh:

th {  
  width: 100px;  
  height: 50px;  
}

 

Ini adalah panduan lengkap tentang cara memformat daftar dan tabel di CSS. Anda dapat menyesuaikan nilai dan properti untuk membuat gaya daftar dan tabel yang sesuai dengan kebutuhan desain Anda di situs web Anda.