Bu yazımda sizlere HTML tablolarının nasıl oluşturulduğu hakkında bilgiler vereceğim. Zaman zaman kullanmak zorunda olduğumuz bu yapıların aslında ne kadar kolay oluşturulduğunu göreceksiniz.
Mesela bir tablo örneği verelim:
<html>
<head>
<title>Tablo Örnek</Title>
</head>
<body>
<table border="9" width="50%" bgcolor="cccc33" align="center">
<caption align="center"><strong>Çalışanların Cinsiyet ve Bölgelere Göre Dağılımı</strong></caption>
<tr>
<th rowspan="2" colspan="2" align="center">Çalışanlar</th>
<th colspan="2" align="center">Cinsiyet</th>
</tr>
<tr>
<th align="center">Bay</th>
<th align="center">Bayan</th>
</tr>
<tr>
<th rowspan="2" align="center">Bölgeler</th>
<th align="center">Kuzey</th>
<td align="center" bgcolor="gold">11.000</td>
<td align="center" bgcolor="gold">9.000</td>
</tr>
<tr>
<th align="center">Güney</th>
<td align="center" bgcolor="gold">1.200</td>
<td align="center" bgcolor="gold">800</td>
</tr>
</table>
</html>
Tablo için kullanılan etiket <table>'dır. table özelliklerinden bazıları şöyledir:
border: Kenarlığın kalınlığını ayarlamak için kullanılır. Sayı büyüdükçe kalınlık artar.
width: Tablonun sayfadaki genişliğini ayarlamak için kullanılır. Yani sayfa içinde enlemesine kapladığı alanı belirtir.
bgcolor: Tablonun arkaplan rengini ayarlamak için kullanılır.
align: Etiketin ne tarafa yaslanacağını belirtmek için kullanılır. <caption> ve <p> etiketlerinde ve diğer birçok etikette de sıkça kullanılır.
<caption> etiketi tablo başlığı için kullanılır.
Unutulmaması gereken nokta tablolarda satır satır ilerlemek gerektiğidir. </tr> etiketi tablonun satırını gösterir.
</th> etiketi tablonun satırı içindeki yeni başlık sütununu temsil eder. Başlık olduğundan hücre içindeki yazı kalın yazılır.
</td> etiketi tablonun satırı içindeki yeni sütunu ifade eder. Hücre içindeki yazı kalın yazılmaz.
rowspan: Hücrenin kaplayacağı satır sayısını belirtir.
colspan: Hücrenin kaplayacağı sütun sayısını belirtir.
Bu verdiğim örnekteki tablo sayfada aşağıdaki gibi görünür:
Evet arkadaşlar görüldüğü üzere colspan değeri 2 olan hücreler 2 hücrelik sütun kaplıyorlar. rowspan değeri 2 olan hücreler de 2 hücrelik satır kaplıyorlar. Daha önce dediğim gibi satır satır işlem yapılmalı, bir satır bitmeden diğerine geçilmemelidir.
Kolay gelsin arkadaşlar.
Hiç yorum yok:
Yorum Gönder