HTML’de <table></table> etiketi ile oluşuturulan tabloları daha estetik bir hale getirmek için css ile müdahle edilmektedir. CSS ile table etiketinin bir çok elementine ulaşabilir ve istediğimiz renkte ve desende tablolar oluşturabilir. Tablo özellikleri aşağıda açılamaları ile verilmiştir. Başarılar.
1 2 3 4 5 6 7 | .tablo{ border-collapse:collapse / separate; /*Bu özellik iki adet özellik almaktadır. Sınır çizgisi durumunu tanımlar.*/ border-spacing:10px;/*Hücreler arası sınır boşluklarını tanımlar.*/ caption-side: top/ bottom/ left/ right;/*Başlık yerini tanımlar.*/ empty-cells:show/ hide;/*İçi boş hüreleri tanımlar.*/ table-layout:auto/ fixed;/*Tablo görünüşünü tanımlar.*/ } |
Border-collapse
Bu özellik iki adet özellik almaktadır. Sınır çizgisi durumunu tanımlar.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS TABLO ÖZELLİKLERİ</title> <!-- Çağlar BOSTANCI --> <style> table{ border-collapse:collapse; /* border-collapse: separate;*//* Tablo kenarlık sitilini belirler.*/ } </style> </head> <body> <table border="1"> <tr> <td>HÜCRE 1</td> <td>HÜCRE 2</td> <td>HÜCRE 3</td> </tr> <tr> <td>HÜCRE 4</td> <td>HÜCRE 5</td> <td>HÜCRE 6</td> </tr> </table> </body> </html> |
border-spacing Kullanımı
IE 7 ve öncesi border-spacing özelliği desteği yoktur. Eğer eski sürüm internet Explorer web tarayıcılarına aynı özelliği kazandırmak istiyorsak bu durumda cellspacing özelliğine istenen bir boşluk değeri verilebilir. Örneğin cellspacing=”10″ gibi.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS TABLO ÖZELLİKLERİ</title> <!-- Çağlar BOSTANCI --> <style> table{ border-spacing:15px 5px; } </style> </head> <body> <table border="1"> <tr> <td>HÜCRE 1</td> <td>HÜCRE 2</td> <td>HÜCRE 3</td> </tr> <tr> <td>HÜCRE 4</td> <td>HÜCRE 5</td> <td>HÜCRE 6</td> </tr> </table> </body> </html> |
Caption-side Kullanımı
Tablo içi bir başlık bilgisini tanımlar ve bu başlık bilgisinin tablonun hangi kenarından duracağını belirler. IE 7 de dahil desteği yok IE8 den sonra desteği vardır. IE 7 ve öncesi için valing özelliği kullanılmalıdır. valign=”top” gibi belirlenir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS TABLO ÖZELLİKLERİ</title> <!-- Çağlar BOSTANCI --> <style> caption{ caption-side: bottom; } </style> </head> <body> <table border="1"> <caption>ÇAĞLAR BOSTANCI</caption> <tr> <td>HÜCRE 1</td> <td>HÜCRE 2</td> <td>HÜCRE 3</td> </tr> <tr> <td>HÜCRE 4</td> <td>HÜCRE 5</td> <td>HÜCRE 6</td> </tr> </table> </body> </html> |
Empty-Cells Kullanımı
Bu özellik içi boş olan bir tablo hücresinin gösterilmesini ya da gizlenmesini tanımlar. İki değer alır bunlar show ve hide dir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS TABLO ÖZELLİKLERİ</title> <!-- Çağlar BOSTANCI --> <style> table.deneme{ border-collapse: separate; empty-cells: hide; } td{ border:1px solid #000; padding:5px; } </style> </head> <body> <table border="0" class="deneme"> <tr> <td>HÜCRE 1</td> <td>HÜCRE 2</td> <td>HÜCRE 3</td> </tr> <tr> <td>HÜCRE 4</td> <td>HÜCRE 5</td> <td> </td> </tr> </table> </body> </html> |
Table-Loyut Kullanımı
Klasik tablolarda içeriğin bir kısmı ya da tümü kesintisiz devam ediyorsa tablonun genişliği ona göre uzar. Normalde tabloya verdiğimiz genişlik bu gibi durumlarda işlevsiz kalır. Aşağıda ilk örnek bu anlatımda konu edilen tabloların genel özelliğini yansıtır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS TABLO ÖZELLİKLERİ</title> <!-- Çağlar BOSTANCI --> <style> table.deneme{ width:600px; table-layout: auto ; } td{ border:1px solid #000; padding:5px; } </style> </head> <body> <table border="0" class="deneme"> <tr> <td>Klasik tablolarda içeriğin bir kısmı ya da tümü kesintisiz devam ediyorsa tablonun genişliği ona göre uzar. Normalde tabloya verdiğimiz genişlik bu gibi durumlarda işlevsiz kalır. Aşağıda ilk örnek bu anlatımda konu edilen tabloların genel özelliğini yansıtır.Klasik tablolarda içeriğin bir kısmı ya da tümü kesintisiz devam ediyorsa tablonun genişliği ona göre uzar. Normalde tabloya verdiğimiz genişlik bu gibi durumlarda işlevsiz kalır. Aşağıda ilk örnek bu anlatımda konu edilen tabloların genel özelliğini yansıtır.Klasik tablolarda içeriğin bir kısmı ya da tümü kesintisiz devam ediyorsa tablonun genişliği ona göre uzar. Normalde tabloya verdiğimiz genişlik bu gibi durumlarda işlevsiz kalır. Aşağıda ilk örnek bu anlatımda konu edilen tabloların genel özelliğini yansıtır.Klasik tablolarda içeriğin bir kısmı ya da tümü kesintisiz devam ediyorsa tablonun genişliği ona göre uzar. Normalde tabloya verdiğimiz genişlik bu gibi durumlarda işlevsiz kalır. Aşağıda ilk örnek bu anlatımda konu edilen tabloların genel özelliğini yansıtır.</td> <td>Klasik tablolarda içeriğin bir kısmı ya da tümü kesintisiz devam ediyorsa tablonun genişliği ona göre uzar. Normalde tabloya verdiğimiz genişlik bu gibi durumlarda işlevsiz kalır. Aşağıda ilk örnek bu anlatımda konu edilen tabloların genel özelliğini yansıtır.</td> <td>Klasik tablolarda içeriğin bir kısmı ya da tümü kesintisiz devam ediyorsa tablonun genişliği ona göre uzar. Normalde tabloya verdiğimiz genişlik bu gibi durumlarda işlevsiz kalır. Aşağıda ilk örnek bu anlatımda konu edilen tabloların genel özelliğini yansıtır.</td> </tr> <tr> <td>HÜCRE 4</td> <td>HÜCRE 5</td> <td> </td> </tr> </table> </body> </html> |