Border-collapse

border-collapse ile hücre kenarlıklarını birleştirirsin.

Border-collapse nedir?

border-collapse özelliği iki değer alır: collapse ve separate (varsayılan). collapse hücre kenarlıklarını tek çizgide birleştirir; separate her hücrenin kenarlığını ayrı tutar.

Çoğu veri tablosunda collapse tercih edilir; daha sade bir görünüm verir. separate ise hücreler arası boşluk istendiğinde işe yarar. Hangisini seçeceğin tasarıma bağlıdır.

Border-spacing

border-spacing özelliği, yalnızca border-collapse: separate durumunda çalışır. Hücreler arasındaki yatay ve dikey boşluğu belirler.

Örnek: border-spacing: 8px; tüm yönlere 8 piksel boşluk koyar. İki değer verirsen ilki yatay, ikincisi dikey boşluktur: border-spacing: 4px 12px. collapse kullanıyorsan bu özelliğin etkisi olmaz. Bu nedenle ikisi birlikte düşünülür.

Uygulama Satış raporu tablosuna border-collapse ekle

Bir .satislar sınıflı tabloya şunları ekle: .satislar seçicisine border-collapse: collapse; ve width: 100%;; .satislar td, .satislar th seçicisine border: 1px solid #cbd5e1; ve padding: 10px; yaz.

Örnek çözümü göster

.satislar seçicisi aç, içine border-collapse: collapse; ve width: 100%; yaz. Sonra .satislar td, .satislar th seçicisi aç, içine border: 1px solid #cbd5e1; ve padding: 10px; yaz.
Örnek çözüm:
.satislar {
  border-collapse: collapse;
  width: 100%;
}
.satislar td, .satislar th {
  border: 1px solid #cbd5e1;
  padding: 10px;
}

Kendini test et

Hangi değer hücre kenarlıklarını birleştirir?
```
table {
  border-collapse: ?;
}
```
- separate
- collapse
- spacing
- merge
Cevabı göster

collapse — Doğru! collapse değeri hücre kenarlıklarını tek çizgide birleştirir.

Kenarlıkları birleştir

table {
  border-collapse: ____;
}

Cevabı göster

table {
  border-collapse: collapse;
}

Değerleri davranışla eşleştir

collapse

kenarlıkları birleştirir
separate

kenarlıkları ayrı tutar
border-spacing: 8px

hücreler arası boşluk
padding: 12px

hücre iç boşluğu

Sıradaki ders: Başlık hücreleri

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler