CSS Tabloları
HTML bir tablonun görünümü CSS ile çok gelişmiş bir görselliğe kavuşturulabilir.
Tablo Kenarları
CSS ile tablo kenarı belirlemek için border özelliğini kullanabilirsin. Bu örnekte <table>, <th> ve <td> elementleri için 2 piksellik siyah düz birer kenarlık verilmektedir.
<html>
<head>
<style type="text/css">
table,tr,th,td
{
border-width:2px;
border-color:Black;
border-style:solid;
}
</style>
</head>
<body>
<table>
<tr>
<th>Adı</th>
<th>Doğum Tarihi</th>
</tr>
<tr>
<td>Tarık</td>
<td>02.02.1982</td>
</tr>
<tr>
<td>Metin</td>
<td>07.07.1985</td>
</tr>
</table>
</body>
</html>
Ekran çıktısı aşağıdaki gibidir :
css-tablo
Tablo Genişlik ve Yükseklik
Bir HTML tablonun genişlik ve yüksekliği width ve height özellikleri ile tanımlanır. Aşağıdaki örnekte bu CSS özelliklerini görebilirsin :
<Table> etiketi için genişlik yüzde (%) ile verilmiştir. Buna göre kullanıcının tarayıcısı hangi boyutta olursa olsun tablo kendini yeniden boyutlandırıp ekranın tamamına sığdıracaktır. <th> etiketi için verilen yükseklik ise kesin bir değer ile 30px olarak verilmiştir. Buna göre başlık satırının yüksekliği herhangi bir şarta göre değişkenlik göstermeyecektir.
<html>
<head>
<style type="text/css">
table,td,th
{
border-width:2px;
border-color:Black;
border-style:solid;
}
table { width:100%; }
th { height:30px; }
</style>
</head>
<body>
<table>
<tr>
<th>Kitap Adı</th>
<th>Yazarı</th>
<th>Baskı</th>
</tr>
<tr>
<td>Kar</td>
<td>Orhan Pamuk</td>
<td>15</td>
</tr>
<tr>
<td>Kızıl Nehirler</td>
<td>Grange</td>
<td>3</td>
</tr>
<tr>
<td>Ütopya</td>
<td>Thomas More</td>
<td>12</td>
</tr>
</table>
</body>
</html>
Aşağıda ekran çıktısını görebilirsiniz :
css-tablo-ornek
Sağlıcakla Kalın !
Konular: border, css, gelişmiş, genişlik, kaynak, kenar, kenarlar, kod, kolay, makale, not, öğren, oluştur, rehber, şablon, stil, style, table, tablo, td, th, tr, yükseklik, yüzde
Yorum yok
Bu yazı için Yorum Beslemesi
Geri izleme bağlantısı http://www.kodhane.com/css-tablo-olustur-ogren.html/trackback