Pazartesi , 11 Aralık 2017
Anasayfa » WEB » CSS » CSS Tablo Düzenleme

CSS Tablo Düzenleme

Verileri bir düzen içinde tutmak ve bu verileri kullanıcıların kolay bir biçimde okuyabileceği basit bir yol sağlamak için HTML tabloları kullanılır.

Ancak CSS’in tarayıcılarda yaygın şekilde desteklenmediği dönemlerde, tablolar verileri bir düzen içinde satır ve sütun gibi 2 boyutlu bir yapıda göstermek yerine, web sitelerinin oluşturulduğu ana iskele gibi bir görevi üstlendi. Bir sayfanın genel düzenini oluşturmak için olduğu kadar aynı zamanda içeriği konumlandırmak için de kullanılıyorlardı. O sırada işe yaradı, ancak tabloların genel amacı bu olmamalıydı.

Neyse ki o zamandan beri uzunca bir yol katettik. Bugün tablolar, verileri organize etmek için (olması gerektiği gibi) özel olarak kullanılmaya başladı. Neyse ki konumlandırma ve düzen işlemleriyle sorumlu CSS’i kullanmaya başladık. Dolayısıyla artık tablolar HTML’nin başladığı günden bu güne hiç olmadıkları kadar özgür ve amaçları doğrultusunda kullanılmaya hazırlar.

Bir tablonun HTML’de nasıl oluşturulacağı büyük ölçüde verilere ve nasıl görüntüleneceğine bağlıdır. Tablolar buna göre HTML’de dizayn edildikten sonra, bilgilerin kullanıcılara daha okunaklı ve anlaşılır gösterilmesini sağlamak için CSS ile şekillendirilmesi gerekir.

Tablo Kenarları

Tablo kenarlarında veya hücre duvarlarında border özelliği kullanarak kenar çizgileri oluşturulabilir. <table>,<td> ve <th> öğelerine uygulanır.

Örnek ;

Yukarıdaki örnekteki tabloda çift kenarlıklar olduğunu unutmayın. Bunun nedeni, tablonun ve <th> ve <td> öğelerinin ayrı kenarlıkları olmasıdır.

Örnek ;

Yalnızca tablo etrafında bir kenarlık istiyorsanız, yalnızca <table> öğesi için border bildirimi yapmanız yeterli olacaktır.

Tablo kenarları yapısı gereği çizgilerini çift olarak çizmektedir. Bunun sebebi, hem <table> hemde <td>,<tr> öğelerinin ayrı ayrı çizgilere sahip olmasıdır. Bunu kendi içine çökertip zaten olan bir duvar çizgisinin yanına ikinci bir duvar çizgisinin olmasını engelleyebilirsiniz. Bunun için “border-collapse” özelliğini kullanarak “collapse” değerini atayın.

bildirimi gereğini yapacaktır. Bir örnekle görelim;

Tablonun Genişliği ve Yüksekliği

Bir tablonun genişliği width, yüksekliği height özellikleri ile ayarlayabilirsiniz.

Yatay Hizalama Yapın

text-align Özelliğini kullanarak <td> <th> içeriğin (sola, sağa veya merkez gibi) yatay hizalama yapar.

Varsayılan olarak, <th> öğelerinin içeriği ortalanmış ve <td> öğelerin içeriği sola hizalanmıştır.

Örnek ;

Aşağıdaki örnek, metni <th> elemanlarında sola hizalar.

Dikey Hizalama Yapın

vertical-align Özelliği veya <td> <th> içeriğin (üst, alt veya orta gibi) dikey konumunu belirler.

Varsayılan olarak, bir tablodaki içeriğin dikey hizalaması orta değerdedir (hem <th> hem de <td> elemanları için).

Aşağıdaki örnek, <td> öğeleri için dikey metin hizalamasını altına ayarlar:

Hücre İç Boşluğunu Kontrol Edin

padding Özelliği bir tablodaki sınır çizgisi ile içeriği arasında kalan iç boşluğu ayarlamanızı sağlar. <td> ve <th> öğeleri için kullanın.

Satırlarda Yatay Çizgiler Kullanın

border-bottom Özelliği ile alt kenar stilini belirleyebilirsiniz. Bu sayede daha sade tasarımlı tablolar elde edebilirsiniz. <td> ve <th> öğeleri için kullanın.

Mouse Etkilerini Kullanın

Mouse (fare) üzerinde iken tablo satırlarını vurgulamak için <tr> üzerindeki :hover seçicisini kullanın.

Satırları Farklı Renklendirin

Tabloları daha okunaklı hale getirme çabası olarak, ortak bir tasarım uygulaması olan, art arda arka plan renkleri olan tablo satırlarını “şeritlemek” iyi bir fikirdir. Bu satırları daha net yapar ve bilgileri taramak için görsel zenginlik sağlar. Böyle bir görünüm için <tr> öğelerine nth-child() sözde seçicisini kullanarak background-color özelliğine farklı bir renk atayabilirsiniz.
nth-child(even) veya nth-child(odder) sözde seçicisi yalnızca çift veya tek tablo satırlarını etkileyecektir.

Örnek ;

Başlık Satırının Arka Planını Ayarlayın

Bir tabloda başlık satırı <th> öğesi ile belirtilir. background-color Özelliğini kullanarak başlıkların arka plan rengini tayin edebilir, color özelliği ile yazı rengini değiştirebilirsiniz.

Kaydırma Çubukları Tabloyu Ekrana Sığdırın

Tablo içeriğiniz oldukça geniş ise (çok fazla sütun) bu durumda ekrana sığdırma sorunları ile karşı karşıya kalabilirsiniz. Böyle bir durumda yatay kaydırma çubukları işinizi görecektir. Bunu yapabilmek için <table> öğesinin dışına onu kapsayan bir <div> yerleştirin. “overflow-x” Özelliğine “auto” değeri vererek, sayfa dışına taşma durumu meydana geldiğinde kaydırma çubuklarını otomatik olarak göstermesini sağlayın.

Bir HTML tablosunun görünümü CSS ile büyük ölçüde geliştirilebilir.

Hakkında Recep ORTAKÖYLÜ

İlginizi Çekebilir

CSS Grid: Web Sayfası Şabolunu Oluşturma

CSS Grid Layout, CSS içinde bulunan en güçlü yerleşim düzenidir.  Tek boyutlu flexbox’ın aksine hem …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir