CSS Tablolar - Tables

CSS Tablo Sınır/Kenar Kalınlığı - Table Border

Bir etiketin sınır/kenar kalınlığını belirtmek veya stil vermek için border özelliğini kullanacağız.

Bir örnek görelim ve örneği açıklayalım.

table td {
    border: 1px solid black;
}

Yukarıda ki örnekte " table td " şeklinde bir yazım görüyoruz. Bu yazımı bir yol gösterici olarak düşünelim. Örneğin bir tablomuz var ve sadece td etiketine stil vermek istiyoruz ama table etiketi altında ki td etiketleri o kadar çok ki hepsine stil vermek büyük zaman kaybı ve fazladan kod kalabağı olacaktır. Bu yazım tam olarak table altında ki tüm td etiketlerine aşağıda ki stili uygula anlamına gelmektedir.

" border: 1px solid black; " şeklinde bir kod görüyoruz. Bu, çerçeve kalınlığı 1 piksel, çerçeve stili solid (düz çizgi) ve çerçeve rengi siyah (black) olsun anlamına gelmektedir. border stillerini ilerleyen konularda ayrıntılı olarak göreceğiz.

CSS Kapsama Kenar Stili - Collapse Borders

Normal tablolarda tüm hücreler bir çerçeve içerisindedir. çerçeveleri iptal etmek için ise " border-collapse:collapse; " özelliğini kullanacağız.

Örnek olarak görelim.

table {
    border-collapse:collapse;
}

table td {
    border: 1px solid black;
}

CSS Tablo Genişliği ve Yüksekliği - Table Width & Height

Tablo genişliği için " width " özelliğini, tablo yüksekliği için ise " height " özelliğini kullanacağız.

Örnek olarak görelim.

table {
    width:100%;
}

td {
    height:50px;
}

CSS Tablo Metin Hizalama - Table Text Alignment

Hücrelerin içinde ki metinleri yatay hizalamak için " text-align " özelliğini kullanacağız. Bu özelliğin değerleri ise " right " (Sağ) , " left " (sol) ve " center " (orta) 'dır. " center " değeri genişliğe göre ortalar.

Örnek olarak görelim.

td {
    text-align:right;
}

Hücrelerin içinde ki metinleri dikey hizalamak için " vertical-align " özelliğini kullanacağız. Bu özelliğin değerleri ise " top " (üst) , " bottom " (alt) ve " middle " (orta) 'dır. " middle " değeri yüksekliğe göre ortalar.

Örnek olarak görelim.

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

CSS Tablo İç Kenar Boşluğu - Table Padding

Tabloda ki, td elementi üzerinde " padding " özelliğini kullanarak sınır ve içerik arasındaki boşluğu kontrol edebiliriz. " padding " i ilerleyen konularda ayrıntılı olarak göreceğiz.

Örnek olarak görelim.

td {
    padding:10px;
}

CSS Tablo Rengi - Table Color

Hücreleri renklendirmek için " color " (Metin Rengi) ve " background-color " (Arkaplan Rengi) özelliklerini kullanacağız.

Örnek olarak görelim.

td {
    background-color:pink;
    color:gray;
}