CSS Tablo

HTML tabloları CSS ile oldukça hoş görünümlere sahip olabilirler.

Normalde HTML tabloları belirli bir görünüme, stile sahip değildirler.

Tabloya CSS ile Kenar Çizgisi Eklemek

CSS border özelliği ile HTML tablolara sınır çizgisi eklemek mümkündür.

Aşağıdaki örnek tabloya mavi bir border oluşturucaktır:

table, th, td {
   border: 1px solid #0000ff;
}

Yukarıdaki örneğe dikkat ederseniz tablo çift bordera sahiptir. 

Tablonun <th> ve <td> elementi ayrı ayrı sınır çizgisine sahiptir. Bu sebepten çift çizgi görünür.

Tablonun Çift Çizgisini Birleştirmek

CSS border-collapse özelliği bu bahsedilen çift çizgiyi tek çizgi yapar.

table {
    border-collapse: collapse;
}

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

Eğer sadece tablonun etrafında çizgi oluşturmak istersek sadece <table> için border özelliği kullanabilirsiniz.

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

width  ve height özellikleri ile tablonun genişlik ve yüksekliği ayarlanabilir.

Aşağıdaki örnekte tablonun genişliği 100% ve <th> elementinin yüksekliği 50px olarak ayarlanmıştır.

Buradaki 100% genişlik üst elementin genişliği kadar genişleyecek demektir.

table {
    width: 100%;
}

th {
    height: 50px;
}

Tablo İç Boşluklarını Ayarlamak - Table Padding

Tablo içindeki içerik ve sınır çizgisi arasındaki boşlukları kontrol etmek için padding özelliği kullanılır.

<th> ve <td> için padding ayarlanarak içerik ve sınır çizgisi arasındaki boşluk kontrol edilebilir.

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