css-tablolar

Masa Bordürleri
CSS'de tablo kenarlıklarını belirtmek için border mülkü kullanın .
Aşağıdaki örnek, <table>, <th> ve <td> öğeleri için siyah bir kenarlık belirtir:
table, th, td {
border: 1px solid black;
}

Daralt Tablo Kenarlıklar
border-collapse Mülkiyet Sınırlar tek sınıra içine çökmüş gerekip gerekmediğini belirler:
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
Yalnızca tablo etrafında bir kenarlık istiyorsanız, yalnızca border<tablo> için mülkü belirtin :
table {
border: 1px solid black;
}

Masa Genişliği ve Yüksekliği
Bir tablonun genişliği ve yüksekliği özellikleri widthve heightözellikleri ile tanımlanır .
Aşağıdaki örnekte, tablonun genişliği% 100'e, <th> öğelerin yüksekliği ise 50 piksele ayarlanır:
table {
width: 100%;
}
th {
height: 50px;
}

Yatay hizalama
text-align Mülkiyet veya <td> <th> içeriğin (sol gibi, sağa veya merkez) yatay hizalama ayarlar.
Varsayılan olarak, <th> öğelerinin içeriği ortalanmış ve <td> öğelerin içeriği sola hizalanmıştır.
Aşağıdaki örnek, metni <th> elemanlarında sola hizalamaktadır:
th {
text-align: left;
}

Dikey hizalama
vertical-align Özellik 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> lemanlar için).
Aşağıdaki örnek, <td> öğeleri için dikey metin hizalamasını altına ayarlar:
td {
height: 50px;
vertical-align: bottom;
}

Masa Dolabı
Bir tablodaki sınır ile içerik arasındaki boşluğu kontrol etmek paddingiçin <td> ve <th> öğelerindeki mülkü kullanın :
th, td {
padding: 15px;
text-align: left;
}

Yatay Bölücüler
border-bottomMülkü yatay bölücüler için <th> ve <td> ye ekleyin :
th, td {
border-bottom: 1px solid #ddd;
}

Taşınabilir Tablo
:hover Faredeki tablo satırlarını vurgulamak için <tr> üzerindeki seçiciyi kullanın :
tr:hover {background-color: #f5f5f5;}

Çizgili Masalar
Zebra çizgili tablolar için nth-child()seçiciyi kullanın ve background-colortümü çift (veya tek) tablo satırlarına ekleyin :
tr:nth-child(even) {background-color: #f2f2f2;}

Masa Rengi
Aşağıdaki örnek, <th> öğelerinin arka plan rengini ve metin rengini belirtir:
th {
background-color: #4CAF50;
color: white;
}

Yanıtlayıcı Tablo
Ekran, tam içeriği görüntülemek için çok küçükse, duyarlı bir tablo yatay bir kaydırma çubuğu görüntüleyecektir:
overflow-x:auto Duyarlı yapmak için <table> öğesinin etrafına bir kapsayıcı öğe (<div> gibi) ekleyin :
<div style="overflow-x:auto;">
<table>
... table Gövde...
</table>
</div>
Not: OS X Lion'da (Mac'te), kaydırma çubukları varsayılan olarak gizlidir ve yalnızca "taşma: kaydırma" ayarlanmış olsa bile, kullanılırken gösterilir.