TABLO BİÇİMLENDİRME
1 2 3 4 5 6 7 8 9 10 11
<table border="1">
<caption>Tablo Başlığımız</caption>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Şimdi yine tablo oluştururken kullanılan etiketler …
caption etiketini tablo başlığı oluşturmak için kullanılır ve bu etiket table etiketinin hemen altına yazılır.
Örnek:
Tablolarda bulunan hücrelerden
bazılarının birleştirilmesi gerekebilir.
Bu durumda rowspan ve colspan
parametrelerini td veya th etiketine eklenmelidir.
1 23 4 56 7 8 910 11 1213 14 15 1617 18 19 2021 22 2324 25 26 27
<table border="1">
<tr>
<td colspan="2">A11A Sınıfı</td>
<td colspan="2">A11B Sınıfı</td>
</tr>
<tr>
<td>Numara</td>
<td>İsim</td>
<td>Numara</td>
<td>İsim</td>
</tr>
Dikkat edilirse en üstteki satırda
bulunan hücreler birleştirilmiştir. Sağa doğru bir birleşme olduğu için colspan parametresi kullanıldı. 2 sayısı ise kaç tane hücrenin birleştiğini
göstermektedir.
1.Tablo için table etiketi açılır.
2.İlk satır için tr etiketi açılır.
3.İlk satırda bulunan ilk hücreye bakılır. Eğer birleştirilmiş hücre ise rowspan veya colspan ile td eklenir.
4.Birleştirilmiş değilse td açılır ve kapatılır.
5.Aynı şekilde diğer hücrelere de bakılır ve td'ler oluşturulur.
6.Sona gelindiğinde tr kapatılır.
7.Aynı işlemler bütün tr'ler için yapılır.
CSS ile tabloları biçimlendirmesi. Öncelikle tablolara özgü aşağıdaki CSS özellikler
incelendiğinde:
table-layout: table etiketine eklenen bu özelliğin karşısına fixed yazıldığında bütün sütunlar eşit
genişlikte olur.
border-collapse: table etiketine eklenen bu özelliğin karşısına collapse yazılarak hücreleri oluşturan kenarlıklar tek çizgi şeklinde gözükür.
caption-side: Sadece caption etiketine
eklenebilecek bu özelliğin karşısına top, left, right ve bottom yazarak tablo başlığının konumunu
değiştirilir.
table border="1">
<caption>Web
Tasarımında Kullanılan Bazı
Programlar</caption>
<tr>
<th>Program</th>
<th>Üretici</th>
<th>Açıklama</th>
</tr>
<tr>
<td>Dreamweaver</t d>
<td>Adobe</td>
<td>Kod editörü</td>
</tr>