ETİKETLER

doctype

İÇERİK TÜRLERİ
İÇERİK TÜRLERİ

Tarayıcı Uyumluluğu

Internet Explorer 8 ve önceki sürümlerde boşluk (padding) ve sınır (border), genişlik özelliği içine katılıyordu. Internet Explorer 8 ve öncesi sürüm web tarayıcılarla uyum probleminden kaçınmak için, HTML sayfasına <!DOCTYPE html> ifadesini ekleyiniz.

Örnek bir <!DOCTYPE html> ifadesini aşağıda bulabilirsiniz:

Tablo Rengi

Tablo renklerini istediğiniz gibi değiştirebilirsiniz. Bu eğitimimizde göreceğiniz üzere sınır renkleri, metin ve zemin rengi atamaları, <th> elemanının içinde gerçekleştirilmektedir:

table, td, th {
    border: 2px solid yellow;
}

th {
    background-color: pink;
    color: white;
}

background-color ve color özellikleriyle arka zemin ve yazı renklerini kolayca ayarlayabilirsiniz. Dilerseniz, tablonun border özelliğini kullanarak çerçevenin kalınlığı ve renginin nasıl değiştirildiğini de deneyebilirsiniz.

Tablo Doldurma

Bir tablonun sınırı ile içerik arasındaki boşluğu ayarlamak için td ve th elemanları üzerinde padding özelliği kullanılır. Şimdi örneğimizle içerideki boşluğu 17 piksel (px) yapalım. Bunun için aşağıda gördüğünüz gibi, istediğimiz boşluk miktarını td parametresinin içinde padding özelliğine piksel cinsinden söyleyebiliriz:

td {
    padding: 17px;
}

Şimdi HTML dosyasında nasıl kullandığımıza bakalım:

Metin Yerleştirme

Tabloya metin yerleştirmek için, text-align ve vertical-align özellikleri kullanılır. text-align özelliği, yatay yerleştirmeyi belirler; değerleri, left (sol), right (sağ) ya da center (merkez, ortala) olabilir.

td {
    text-align: right;
}

Vertical-align özelliğiyse hücre içinde düşey doğrultudaki atamayı gerçekleştirir; değerler, top (üstte), bottom (altta) veya middle (ortada) olabilir.

Genişlik ve Yükseklik

Bir tablonun ebatları, width (genişlik) ve height (yükseklik) özellikleriyle belirlenir. Aşağıdaki örnek kod ile bunlarla ilişkili atamalar yapacağız:

CSS Tablolar

CSS'in sağladığı araçlarla HTML'in tablo oluşturma olanakları büyük ölçüde iyileştirilmiştir. Bu eğitim içeriği ve alt içeriklerinde tabloları nasıl daha güzel ve kullanışlı tasarlayacağınızı göstereceğiz.

 

Tablo sınırları

CSS'te tablo sınırlarını belirlemek için border özelliğini kullanmalısınız.

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

Aşağıdaki örnek, tablo, th ve td elemanları için siyah sınırlar belirliyor:

Abone ol doctype