CSS Table Özellikleri Nelerdir ve Nasıl Kullanılırlar?
Tablolar diğer HTML etiketlerinden daha farklı kendine has elemanlardır ve farklı özellikleri vardır. CSS table özellikleri ile tablo etiketinin birçok özelliklerine stiller uygulayabiliriz.
Tablo Planı Özelliği (table-layout)
Yapısı: table-layout: <deger>
Aldığı Değerler: auto | fixed | kalıtsallık
Başlangıç Değeri: auto
Uygulanabilen Elemanlar: display: table ve display:inline-table olarak belirlenen elemanlara
Kalıtsallık: Var
Normalde tablolar içeriğindeki bilgiye göre genişliğini arttırır. Bu bize bir esneklik kazandırır ancak bazen tablo genişliğimizin sabit kalmasını isteriz. table-layout:fixed değeri tablo genişliğimizi sabitlememizi sağlar. tablelayout: auto ise tablo genişliğini içeriğe göre arttırır.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title> Örnek </title>
<style>
table{
table-layout: auto;
width: 350px;
}
td, th {
border: 1px solid;
}
</style>
</head>
<body>
<table cellpadding="5" cellspacing="5">
<caption> Araba Fİyatları </caption>
<tr>
<th> Marka </th>
<th> Model </th>
<th> Yıl </th>
<th> Fiyat </th>
</tr>
<tr>
<td>Mercedes</td>
<td>A180</td>
<td>2012</td>
<td>165.000 TL</td>
</tr>
<tr>
<td>BMW</td>
<td>320</td>
<td>2012</td>
<td>210.000 TL</td>
</tr>
<tr>
<td>Ferrari</td>
<td>458</td>
<td>2012</td>
<td>2.775.000 TL</td>
</tr>
</table>
</body>
</html>
Başlık Konumu Özelliği (caption-side)
Yapısı: caption-side: <deger>
Aldığı Değerler: top | bottom | inherit
Başlangıç Değeri: top
Uygulanabilen elemanlar: display: tablecaption olarak belirlenen elemanlara
Kalıtsallık: Yok
caption-side: Tablonun başlığının (<caption>) nerede (altta mı üstte mi) olacağını belirler.
Hücre Boşluklarını Ayarlama (border-collapse)
Yapısı: border-collapse: <deger>
Aldığı Değerler: collapse | separate | kalıtsallık
Başlangıç Değeri: separate
Uygulanabilen elemanlar: display:table ve display:table-caption olarak belirlenen elemanlara
Kalıtsallık: Var
border-collapse, tablo hücrelerinin etrafındaki kenarlık ile olan mesafeyi azaltmamızı veya arttırmanızı sağlar. separate ataması yapılmış ise hücreler arasına bir kaç piksellik mesafe konur. HTML içinden bu boşlukları <table> etiketinin cellspacing özelliği ile kaldırmak istesek bile tarayıcılar bu seferde iki kenarlığı birbiri üstü gösterecektir. Eğer collapse değeri verilirse iki hücre arasındaki mesafe kalkacaktır ve tek kenarlık görünecektir.
<!DOCTYPE html PUBLIC>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>border-collapse örnegi</title>
<style>
table.ayri {
border-collapse: separate;
}
table.birlesik {
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 3px;
}
</style>
</head>
<body>
<table cellspacing="0" class="ayri">
<tr>
<td>hücre1</td>
<td>hücre2</td>
</tr>
<tr>
<td>hücre3</td>
<td>hücre4</td>
</tr>
</table>
<table border="0" cellspacing="0" class="birlesik">
<tr>
<td>hücre1</td>
<td>hücre2</td>
</tr>
<tr>
<td>hücre3</td>
<td>hücre4</td>
</tr>
</table>
</body>
</html>
Hücre Dışı Boşluklarını Ayarlama (border-spacing)
Yapısı: border-spacing: <deger>
Aldığı Değerler: <uzunluk> | inherit
Başlangıç Değeri: 0
Uygulanabilen elemanlar: display:table ve display:table-caption olarak belirlenen elemanlara
Kalıtsallık: Var
border-spacing, normal uzunluk değerleri alır ve border-collapse:separate ile birlikte kullanılır. Eğer tek değer verilirse bu tüm kenarlar için geçerlidir, iki değer atanırsa ilki yatayda boşluk için ikincisi dikey de boşluk vermek için tanımlanmıştır.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>border-spacing örnegi</title>
<style>
table.ayri {
border-collapse: separate;
border-spacing: 3px 5px;
}
table.birlesik {
border-collapse: separate;
}
td {
border: 1px solid black;
padding: 3px;
}
</style>
</head>
<body>
<table cellspacing="0" class="ayri">
<tr>
<td>hücre1</td>
<td>hücre2</td>
</tr>
<tr>
<td>hücre3</td>
<td>hücre4</td>
</tr>
</table>
<table border="0" cellspacing="0" class="birlesik">
<tr>
<td>hücre1</td>
<td>hücre2</td>
</tr>
<tr>
<td>hücre3</td>
<td>hücre4</td>
</tr>
</table>
</body>
</html>
Boş Hücre Ayarları (empty-cells)
Yapısı: empty-cells: <deger>
Aldığı Değerler: show | hide | kalıtsallık
Başlangıç Değeri: show
Uygulanabilen elemanlar: display:table-cell olarak belirlenen elemanlara
Kalıtsallık: Var
Bir tabloya bazı değerler atadığımızda (örneğin kenarlık değeri) boş olan hücreler bu değeri görmez, bu durumu düzeltmek için bos olan hücreler için bos karakter ( ) koyarız. empty-cells özelliği ile boş kalan hücrelere nasıl davranması gerektiğini bildirebiliriz. Göster (show) değeri ile hücrenin içeriği olan hücreler ile aynı özellikleri almasını sağlayabiliriz. Gizle (hide) değeri ile de hücrenin yokmuş gibi davranmasını sağlarız.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>empty-cells örnegi</title>
<style>
table.goster {
empty-cells:show
}
table.gizle {
empty-cells:hide
}
td {
border: 1px solid black;
padding: 3px;
}
</style>
</head>
<body>
<table cellspacing="0" class="goster">
<tr>
<td></td>
<td>hücre2</td>
</tr>
<tr>
<td>hücre3</td>
<td>hücre4</td>
</tr>
</table>
<table border="0" cellspacing="0" class="gizle">
<tr>
<td></td>
<td>hücre2</td>
</tr>
<tr>
<td>hücre3</td>
<td>hücre4</td>
</tr>
</table>
</body>
</html>
CSS table özellikleri konusunu gördük. Konu ile ilgili soru, öneri ya da fikirlerinizi aşağıda bulunan yorumlar kısmına yazarak bize iletebilirsiniz. CSS ile ilgili konuları aşağıdaki linke tıklayarak CSS kategorisi altındaki başlıklardan öğrenebilirsiniz. Ayrıca aşağıdaki Instagram ve Twitter logolarına tıklayarak bizi Instagram ve Twitter üzerinde de takip edebilirsiniz.
https://yazilimdelisi.com/category/web-gelistirme/css/
Sosyal Medya Hesaplarımız
