close

CSS'de Listeleri ve Tabloları Biçimlendirme Kılavuzu- Özellikler ve Örnekler

Listeleri ve tabloları biçimlendirmek, web sitenizde bilgi görüntülemenin önemli bir parçasıdır. CSS, listeleri ve tabloları beğeninize göre oluşturmak ve özelleştirmek için özellikler ve sınıflar sağlar. İşte CSS'de listelerin ve tabloların nasıl biçimlendirileceğine ilişkin ayrıntılı bir kılavuz.

 

Listeleri Biçimlendirme

Sırasız Liste(ul)

Ana özellik: list-style-type.

Değerler: none, disc, circle, square.

Örnek:

ul {  
  list-style-type: disc;  
}

Sıralı Liste(ol)

Ana özellik: list-style-type.

Değerler: yok(varsayılan), ondalık, alt alfa, üst alfa, alt roman, üst roman.

Örnek:

ol {  
  list-style-type: decimal;  
}

Tanım Listesi(dl)

Ana özellik: Tanımlama listelerini biçimlendirmek için belirli bir CSS özelliği yoktur. Ancak, sınıfları veya aşağıdakiler gibi diğer özellikleri kullanarak listedeki öğelerin stilini belirleyebilirsiniz: font-size, font-weight, margin, padding, etc.

Örnek:

<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;  
}

 

Tabloları Biçimlendirme

Tablo Yapısı Biçimlendirmesi

Ana özellik: border-collapse.

Değerler: separate(default), collaps e.

Örnek:

table {  
  border-collapse: collapse;  
}

Tablo Kenarlığı Biçimlendirmesi

Ana özellik: border.

Değerler: Bir sınır değeri, örneğin: 1px solid black.

Örnek:

table {  
  border: 1px solid black;  
}

Hücre Sınırını Biçimlendirme

Ana özellik: border.

Değerler: Bir sınır değeri, örneğin: 1px solid black.

Örnek:

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

Tablo Hücrelerinin Hizalanması ve Aralığı

Ana özellikler: text-align, padding.

  • text-align: Hizalama değerleri, örneğin: left, right, center.
  • dolgu: Hücreler içindeki boşluk değeri, örneğin: 10px.

Örnek:

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

Tablolarda Arka Plan ve Metin Rengi

Ana özellikler: background-color, color

  • background-color: Arka plan rengi değeri, örneğin: lightgray.
  • color: Metin rengi değeri, örneğin: white.

Örnek:

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

Tablolarda Sütun ve Satır Büyüklüğü

Ana özellikler: width, height.

  • width: Genişlik değeri, örneğin: "100px", "%20".
  • height: Yükseklik değeri, örneğin: "50px", "%10".

Örnek:

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

 

Bu, CSS'de listelerin ve tabloların nasıl biçimlendirileceğine ilişkin kapsamlı bir kılavuzdur. Web sitenizdeki tasarım ihtiyaçlarınıza uygun liste ve tablo stilleri oluşturmak için değerleri ve özellikleri özelleştirebilirsiniz.