Beytullah Toprak
CSS Temel - CSS Tablolar (Tables)

CSS Temel - CSS Tablolar (Tables)


Bu dersimizde , CSS Tablolar özelliğini kullanarak bir HTML tablonun CSS ile özellikler atayarak şekil vericeğiz.

Herhangi bir stil veya nitelik içermeyen bir HTML tablosu oluşturduğunuzda , tarayıcılar onları biçimsiz olarak görüntüler. Bir tabloyu CSS ile stillendirmek görünümünü büyük ölçüde iyileştirebilir.

Tablolara Kenarlık Ekleme (border)

CSS border özelliği, tabloların kenarlıklarını tanımlamanın en iyi yoludur.

Border özelliği tablo da <table><th> ve <td> elemanları için kullanılabilir.

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

CSS Kapsama Kenar Stili (Collapse Borders)

Önceki örneğin çıktısını gördüyseniz, her tablo hücresinin ayrı kenarlıklara sahip olduğunu ve bitişik tablo hücrelerinin kenarlıkları arasında biraz boşluk olduğunu fark ettiniz. Tablo hücre sınırlarının varsayılan olarak ayrılması nedeniyle oluşur. Ancak, CSS border-collapse özelliğini kullanarak ayrı tablo kenarlıklarını birleştirebilirsiniz.

Aşağıdaki örnekteki stil kuralları, tablo hücre kenarlıklarını daraltacaktır, aynı zamanda tablo ve tablo hücre öğelerine bir piksel siyah kenarlığı uygulayacaktır.

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>CSS Örneği</title>
<style type="text/css">
    table {
        border-collapse: collapse;
    }
    table, th, td {
        border: 1px solid black;
    }
</style>
</head>
<body>
    <table>
        <tr>
            <th>ID</th>
            <th>Adı</th>
            <th>Soyadı</th>
            <th>E-Posta</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Ali</td>
            <td>Yıldırım</td>
            <td>aliyildirim@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Veli</td>
            <td>Zambak</td>
            <td>zambakveli@mail.com</td>
        </tr>
    </table>
</body>
</html>

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.

table {
    width: 100%;
}
td {
    height: 40px;
}

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.

td {
    text-align: center;
}

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.

td {
    height: 65px;
    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.

td {
    padding: 10px;
}

CSS Tablo Rengi (Table Color)

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

td {
    background-color: #000;
    color: #fff;
}

 


Yorum (0)

Hiç Bir Yorum Bulunamadı. İlk Yorumuz Siz Yapın :)

Yorum Yap