border-collapse
Bu özellik ile tablo içerisindeki hücrelerin kenarlıklarının ayrık ya da birleşik olması ayarlanabilir. Varsayılan değer olan separate kullanıldığında her hücrenin kendisine ait kenarlıkları olur. collapse değeri kullanıldığında ise yan yana olan kenarlıklar tek bir kenarlık olarak görünür. Bu özellik ile yapılan biçimlendirmeler alt elemanlara da aktarılır.
<!DOCTYPE html>
<html>
<head>
<title>CSS Tablolar</title>
<meta charset="UTF-8">
<style>
table.ornek1{
border-collapse: separate;
}
table.ornek2{
border-collapse: collapse;
}
table, td{
border: 1px solid black;
}
</style>
</head>
<body>
<table class="ornek1">
<tr>
<td>ABC</td>
<td>ABC</td>
</tr>
<tr>
<td>ABC</td>
<td>ABC</td>
</tr>
</table>
<br>
<table class="ornek2">
<tr>
<td>ABC</td>
<td>ABC</td>
</tr>
<tr>
<td>ABC</td>
<td>ABC</td>
</tr>
</table>
</body>
</html>
border-spacing
Bu özellik ile border-collapse değeri separate olan tablolardaki hücrelerin aralarındaki boşluklar ayarlanabilir. Bu özelliğin karşısına iki uzunluk değeri girilir. İlk değer yatay, ikinci değer dikey boşluğu belirler. Tek değer girilirse iki boşluk da bu değere eşit olacaktır. Bu özellikle yapılan biçimlendirmeler de alt elemanlara akrarılır.
<!DOCTYPE html>
<html>
<head>
<title>CSS Tablolar</title>
<meta charset="UTF-8">
<style>
table.ornek1{
border-spacing: 10px 20px;
}
table.ornek2{
border-spacing: 20px;
}
table, td{
border: 1px solid black;
border-collapse: separate;
}
</style>
</head>
<body>
<table class="ornek1">
<tr>
<td>ABC</td>
<td>ABC</td>
</tr>
<tr>
<td>ABC</td>
<td>ABC</td>
</tr>
</table>
<br>
<table class="ornek2">
<tr>
<td>ABC</td>
<td>ABC</td>
</tr>
<tr>
<td>ABC</td>
<td>ABC</td>
</tr>
</table>
</body>
</html>
caption-side
Bu özellik ile tabloya girilecek başlığın tablonun üstüne mi yoksa altına mı yerleştirileceği belirlenir. Varsayılan top değeri başlığı üste yerleştirirken bottom değeri başlığı tablonun altına yerleştirir. Bu özellik ile yapılan biçimlendirmeler alt elemanlara da aktarılır.
<!DOCTYPE html>
<html>
<head>
<title>CSS Tablolar</title>
<meta charset="UTF-8">
<style>
table.ornek1{
caption-side: top;
}
table.ornek2{
caption-side: bottom;
}
table, td{
border: 1px solid black;
border-collapse: separate;
}
</style>
</head>
<body>
<table class="ornek1">
<caption>Top</caption>
<tr>
<td>ABC</td>
<td>ABC</td>
</tr>
<tr>
<td>ABC</td>
<td>ABC</td>
</tr>
</table>
<br>
<table class="ornek2">
<caption>Bottom</caption>
<tr>
<td>ABC</td>
<td>ABC</td>
</tr>
<tr>
<td>ABC</td>
<td>ABC</td>
</tr>
</table>
</body>
</html>
empty-cells
Bu özellik ile boş hücrelerin arkaplan ve kenarlıklarının görünüp görünmeyeceği belirtilir. Varsayılan değer olan show boş hücreleri de gösterir, hide değeri ise boş hücrelerin arkaplan ve kenarlıklarının görünmemesini sağlar. Bu özellik ile yapılan biçimlendirmeler alt elemanlara da aktarılır.
<!DOCTYPE html>
<html>
<head>
<title>CSS Tablolar</title>
<meta charset="UTF-8">
<style>
table.ornek1{
empty-cells: show;
}
table.ornek2{
empty-cells: hide;
}
table, td{
border: 1px solid black;
border-collapse: separate;
}
</style>
</head>
<body>
<table class="ornek1">
<tr>
<td>ABC</td>
<td>ABC</td>
</tr>
<tr>
<td>ABC</td>
<td></td>
</tr>
</table>
<br>
<table class="ornek2">
<tr>
<td>ABC</td>
<td>ABC</td>
</tr>
<tr>
<td>ABC</td>
<td></td>
</tr>
</table>
</body>
</html>
table-layout
Bu özellik ile tablonun hücre genişliklerinin nasıl belirleneceği ayarlanır. Varsayılan değer olan auto değeri kullanıldığında tarayıcı hücre genişliklerini hücrelerin içeriğine göre, içeriği mümkün mertebe bölmeden belirler. fixed değeri kullanıldığında ise hücre genişlikleri belirtilen tablo ve hücre genişliklerine uyar. Bu özellik ile yapılan biçimlendirmeler alt elemanları etkilemez.
<!DOCTYPE html>
<html>
<head>
<title>CSS Tablolar</title>
<meta charset="UTF-8">
<style>
table.ornek1{
table-layout: auto;
width: 200px;
}
table.ornek2{
table-layout: fixed;
width: 200px;
}
table, td{
border: 1px solid black;
border-collapse: separate;
}
td{
width: 100px;
}
</style>
</head>
<body>
<table class="ornek1">
<tr>
<td>ABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
<td>ABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
</tr>
<tr>
<td>ABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
<td>ABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
</tr>
</table>
<br>
<table class="ornek2">
<tr>
<td>ABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
<td>ABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
</tr>
<tr>
<td>ABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
<td>ABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
</tr>
</table>
</body>
</html>