close

Panduan Memformat Senarai dan Jadual dalam CSS- Sifat dan Contoh

Memformat senarai dan jadual adalah bahagian penting untuk memaparkan maklumat di tapak web anda. CSS menyediakan sifat dan kelas untuk membuat dan menyesuaikan senarai dan jadual mengikut keinginan anda. Berikut ialah panduan terperinci tentang cara memformat senarai dan jadual dalam CSS.

 

Memformat Senarai

Senarai Tidak Tertib(ul)

Harta utama: jenis gaya senarai.

Nilai: none, disc, circle, square.

Contoh:

ul {  
  list-style-type: disc;  
}

Senarai Tertib(ol)

Harta utama: jenis gaya senarai.

Nilai: tiada(lalai), perpuluhan, alfa bawah, alfa atas, roman bawah, roman atas.

Contoh:

ol {  
  list-style-type: decimal;  
}

Senarai Definisi(dl)

Sifat utama: Tiada sifat CSS khusus untuk memformat senarai definisi. Walau bagaimanapun, anda boleh menggayakan elemen dalam senarai menggunakan kelas atau sifat 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 Jadual

Pemformatan Struktur Jadual

Harta utama: border-collapse.

Nilai: separate(default), collaps e.

Contoh:

table {  
  border-collapse: collapse;  
}

Pemformatan Sempadan Jadual

Harta utama: border.

Nilai: Nilai sempadan, contohnya: 1px solid black.

Contoh:

table {  
  border: 1px solid black;  
}

Pemformatan Sempadan Sel

Harta utama: border.

Nilai: Nilai sempadan, contohnya: 1px solid black.

Contoh:

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

Penjajaran dan Jarak Sel Jadual

Ciri-ciri utama: text-align, padding.

  • text-align: Nilai penjajaran, contohnya: left, right, center.
  • padding: Nilai jarak dalam sel, contohnya: 10px.

Contoh:

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

Warna Latar Belakang dan Teks dalam Jadual

Sifat utama: background-color, color

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

Contoh:

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

Saiz Lajur dan Baris dalam Jadual

Ciri-ciri utama: width, height.

  • width: Nilai lebar, contohnya: "100px", "20%".
  • height: Nilai ketinggian, contohnya: "50px", "10%".

Contoh:

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

 

Ini ialah panduan komprehensif tentang cara memformat senarai dan jadual dalam CSS. Anda boleh menyesuaikan nilai dan sifat untuk membuat senarai dan gaya jadual yang sesuai dengan keperluan reka bentuk anda di tapak web anda.