CSS Dersleri #18 - Tablo Özellikleri

Описание: Bu dersimizde CSS tablo biçimlendirme, tablo oluşturma, tablo renklendirme ve tablo kenarlık kaldırma gibi konuları öğreneceğiz.

#WebProgramlama derslerimizin devamı olan Başlangıçtan İleri Seviyeye #CSS Dersleri ile #HTML kodlarınızı daha şık bir hale dönüştürecek ve göz alıcı web siteleri oluşturabileceksiniz.

Kodlama Vakti Kanalına Hoşgeldiniz !

Abone Olmayı Unutmayın🔔
► Abone Ol :    / @kodlamavakti  
► Ders Linki : https://kodlamavakti.com/css/tablo/
► CSS Dersleri : https://kodlamavakti.com/css/
► Sıfırdan İleri Seviyeye HTML Dersleri :    • HTML Dersleri - Sıfırdan İleri Seviyeye  
► 2 Saatte CSS Öğrenin ! :    • 2 Saatte CSS Öğrenin !  - Temel CSS Eğitimi  

https://www.kodlamavakti.com

Kodlama Vakti ekibi olarak , programlamanın herkes tarafından öğrenilebilir olduğunu takipçilerimize benimsetmek olup , kanalımızda ki eğitimler özenle hazırlanmaktadır ve tamamen ücretsizdir! Vakit Kodlama Vaktidir !

Eğitimlerimizin size yararlı olduğunu düşünüyor ve beğeniyorsanız videoyu beğenmeyi , kanalımıza abone olmayı unutmayın.

border : Tablo Kenarlıkları
CSS'de tablo kenarlıklarını belirtmek için "border" özelliğini kullanılır.Aşağıdaki örnek table, th ve td etiketleri için siyah bir kenarlık belirtir.

Tam Ekran (Full-Width) Tablo Oluşturma
Bazı durumlarda oluşturduğumuz tablolar küçük görünebilir. Tüm ekrana (tam genişlik) yayılması gereken bir tabloya ihtiyacınız varsa, table etiketine width:100% ekleyin:

Tablolarda Çift Kenarlık Sorunu
Yukarıdaki örneklerdeki tablonun çift kenarlı olduğuna dikkat edin. Bunun nedeni, hem table hem de th ve td etiketlerinin ayrı kenarlıklara sahip olmasıdır. Bunun çözümü ise CSS'de ki "border-collapse" özelliğidir.

border-collapse
CSS'de "border-collapse" özelliği, tablo kenarlıklarının tek bir sınır olarak daraltılıp daraltılmayacağını belirler:

Tablo Genişliği ve Yüksekliği
Bir tablonun genişliği ve yüksekliği, width ve height özellikleriyle tanımlanır. Aşağıdaki örnek, tablonun genişliğin 100% ve th etiketinin yüksekliğini 70 piksel olarak ayarlarmasını sağlar.

Tablolarda Yatay (Horizontal) Hizalama
CSS'de "text-align" özelliği, th veya td içindeki içeriğin yatay hizalamasını (sol, sağ veya merkez gibi) ayarlar.Varsayılan olarak, th etiketinin içeriği ortaya hizalanır ve td etiketinin içeriği sola hizalanır.

Tablolarda Dikey (Vertical) Hizalama
CSS'de "vertical-align" özelliği, içeriğin th veya td içindeki dikey hizalamasını (üst, alt veya orta gibi) ayarlar.Varsayılan olarak, bir tablodaki içeriğin dikey hizalaması ortadır.

CSS Tablo Stilleri
Tablolarda Padding
Bir tablodaki kenarlık ve içerik arasındaki boşluğu kontrol etmek için td ve th öğelerinde "padding" özelliğini kullanın:

Yatay Ayraç
Tablolarımıza yatay ayraç eklemek için border-bottom özelliğini th ve td 'ye ekleyin:

Tablolarda Hover Özelliği
Tablolarda fareyle üzerine gelindiğinde tablo satırlarını vurgulamak için tr üzerindeki :hover seçicisini kullanın:

Tablolarda Responsive Özelliği
Duyarlı (Responsive) bir tablo, ekran tüm içeriği görüntülemek için çok küçükse yatay bir kaydırma çubuğu görüntüleyecektir:

CSS'de tablolarımızı responsive hale getirmek için table etiketinin etrafına overflow-x: auto özelliği olan bir kapsayıcı (div) ekleyin.