Css tablo biçimlendirme özellikleri Html dersleri'nde öğrendiğimiz tablolara stil vererek görsel açıdan daha güzel tablolar oluşturmak için kullanılmaktadır.
Tablolara renk ekleme, genişliğini ve yüksekliğini belirleme, kenarlıklara özellik ekleme kalınlığı inceliği gibi, tablo içindeki metinleri hizalama, tablo içindeki metinlerin görsel açıdan zengin olmasını sağlama, hücrelerin üzerine geldiğinde belirgin olması ve responsive tabloların nasıl yapılacağını anlatacağız.
Css tabloları biçimlendirirken kullanacağımız özellikler:
Tablo kenar çizgilerinin rengini , kalınlığını, tipini belirlemek için border, border-collapse, border-color özelliği kullanılmaktadır.
Border özelliği tablo kenar kalınlığı, kenar rengi ve kenar çizgi tipini belirlemek için kullanılmaktadır.
<style>
table,tr,td{
border:2px dotted blue;
}
</style>
Tabloda bulunan hücrelerin hepsi çerçeve içerisinde bulunmaktadır. Bu özelliği kaldırmak için border-collapse özelliği kullanılmaktadır.
<style>
table{
border-collapse:collapse;
}
table,tr,td{
border:2px solid black;
}
</style>
Eklediğimiz tablolara genişlik ve yükseklik vermek için kullanılmaktadır.
Width özelliği tablonun genişliğini ayarlamak için , height özelliği ise tablonun yüksekliğini ayarlamak için kullanılmaktadır.
<style>
table, th, td {
border: 2px solid black;
}
table {
width: 100%;
}
th {
height:40px;
}
</style>
Tablolarda metin hizalama için text-align ve vertical align özellikleri kullanılmaktadır.
Metnin konumunu yani sağ, sol veya ortada olmasını ayarlamak için kullanılmaktadır.
<style>
table, th, td {
border: 1px solid black;
}
table{
width:500px;
text-align:right;
}
</style>
Tabloda bulunan metni dikey olarak hizalamak için kullanılır. Vertical align özelliği 4 farklı değer almaktadır. Bunlar:
<style>
table, th, td {
border: 1px solid black;
}
tr{
height:50px;
vertical-align:bottom;
}
</style>
Tabloda kenar içi boşluk bırakmak için css kenar içi boşluk dersi'nde anlattığımız padding özelliği kullanılmaktadır.
Padding özelliği tabloda kenar içi boşluk bırakmak için kullanılmaktadır.
<style>
table, th, td {
border: 1px solid black;
border-collapse:collapse;
padding:25px;
}
</style>
Tabloda hücre rengini yani arkaplanına renk eklemek için background-color özelliği kullanılmaktadır.
Html ögelerinin arkaplanına renk eklemek için background-color özelliği kullanılmaktadır.
<style>
table{
width:100%;
text-align:left;
}
table, th, td {
border-collapse:collapse;
padding:15px;
}
th{
background-color:orange;
}
.renk{background-color: #eee}
</style>
Tabloda üzerine gelindiğinde tabloyu belirgin hale getiren tablo örneği.
<style>
table, th, td {
border-bottom: 1px solid black;
border-collapse:collapse;
padding:15px;
}
tr:hover{
background-color:#ddd;
}
</style>
Önceki Ders: Css Bağlantılar | Sonraki Ders: Css Listeler |