CSS Tablolar

Web tasarım kursumuzun CSS derslerine tablolarla devam ediyoruz. Herkese başarılar dilerim.

Önceki derslerimizde temel seviyede gördüğümüz tablolara bu dersimizde CSS stilleri vermeyi öğreneceğiz.

Bir HTML tablosunun tasarımı CSS yardımıyla çok büyük oranda değiştirilebilir.

Tablo Kenarlıkları

CSS’te tablolarımıza kenarlık verebilmek için border özelliği kullanılır.

Aşağıdaki örnekte <table>, <th> ve <td> öğelerine kenarlık verilmiştir.

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

Fark ettiyseniz yukarıdaki kodla tablonun çift kenarlığa sahip olduğunu görmüşsünüzdür.

Bunun sebebi <table>, <th> ve <td> etiketlerinin kendilerine ait ayrı birer kenarlıklarının olmasıdır.

Daraltılmış Tablo Kenarlıkları

border-collapse özelliği tablo kenarlıklarının tek bir kenarlıkta birleştirilip birleştirilmeyeceğini ayarlar.

table {
    border-collapse: collapse;
}

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

Eğer yalnızca tablonun etrafında bir kenarlık olmasını isterseniz border özelliğini yalnızca <table> öğesine verirsiniz.

Örnek:

table {
    border: 1px solid black;
}

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

Tablomuzun genişlik ve yükseklik ayarlarını belirlemek için width ve height özelliklerini kullanırız.

Aşağıdaki örnekte tablonun genişliği %100, başlık hücrelerinin yüksekliği ise 50px olarak belirlenmiştir.

table {
    width: 100%;
}

th {
    height: 50px;
}

Yatay Hizalama

text-align tablolarımızdaki <th> ve <td> etiketleri arasındaki yazıları istediğimiz tarafa yaslamamıza olanak sağlar.

Tablolarımızda <th> öğelerinin içindeki yazılar varsayılan olarak ortalanmış biçimde gelir.

<td> öğelerinin içindeki yazılar ise varsayılan olarak sol tarafa yaslanmış biçimde gelir.

Aşağıdaki örnekte <th> öğelerinin içindeki yazılar da sola yaslanmıştır.

th {
    text-align: left;
}

Dikeyde Hizalama

vertical-align <th> ve <td> içeriklerinin dikey olarak hizalanmasında kullanılır.

Bir tabloda hücre içerikleri varsayılan olarak dikeyde ortalanmış şekilde gelir.

td {
    height: 50px;
    vertical-align: bottom;
}

Tablo Dolgusu (table padding)

Web tasarımlarımızda tablolarımızın daha güzel görünmesi için tablo içeriği ile kenarlık arasında bir boşluk bırakmak küçük ama etkili bir ayrıntıdır.

th, td {
    padding: 15px;
    text-align: left;
}

Yatay Kenarlıklar

Tasarımlarımıza daha şık bir görünüm vermek ve alışılmış tablolardan biraz farklı bir şey yapmak istiyorsanız tablonuzun kenarlıklarını kaldırıp yalnızca alt kenarlık vermeyi deneyebilirsiniz.

th, td {
    border-bottom: 1px solid #ddd;
}

Üzerine Gelince Renk Değiştiren Tablo

Daha önceki derslerimizde :hover seçicisinin ne işe yaradığını işlemiştik.

Şimdi bu seçiciyi tablolarımıza stil vermek amacıyla kullanacağız. Fare bir satırın üzerine geldiğinde o satırın arka planı renklenir.

tr:hover {
    background-color: #f5f5f5;
}