Html ile Web İşlemleri 17 - Tablo ve Hücre Özellikleri
TABLE ETİKETİ ÖZELLİKLERİ
5.1.3. Border
Border parametresi, hücrenin ve tablonun etrafındaki çerçevenin kalınlığını ayarlamak için kullanılır. Border=0 olduğu zaman çerçeve tarayıcıda görünmez. Web sayfası hazırlama sürecinde bu seçenek sıklıkla kullanılmaktadır.
Örnek 1:
Örnek 2:
5.1.3.1. Bordercolor
Border parametresi ile kalınlığı belirlenen çerçevenin rengini ayarlamak için kullanılır.
Örnek1:
Örnek 2:
5.1.4. Bgcolor
Tablonun veya istediğimiz hücre veya hücrelerin arka plân rengini değiştirmek için kullanılır.
Örnek 1:
Örnek 2:
5.1.5. Background
Tablonun veya istenilen hücrenin arka plânına resim eklemek için kullanılır.
Örnek:
5.1.10. Cellspacing
Tablonun içerisindeki hücrelerin, birbirlerinden ve tablo sınırlarından uzaklığını pixel türünden ayarlamak için kullanılır.
Örnek 1:
Örnek 2:
5.1.11. Cellpadding
Hücrelerin içindeki verilerin, hücre sınırlarından uzaklığının ne kadar olacağını belirlemek için kullanılır.
Örnek 1:
Örnek 2:
Uygulama
Anlamsal HTML tablo komutlarını kullanarak tablo oluşturma işlemini yönergeler doğrultusunda gerçekleştiriniz.
2. Adım: <table> blokunu <body> etiketi içine yazınız.
3. Adım: <caption> .. </caption> elemanını oluşturunuz.
4. Adım: <thead> .. </thead> elemanını oluşturunuz.
5. Adım: <tbody> .. </tbody> elemanını oluşturunuz.
6. Adım: <tfoot> .. </tfoot> elemanını oluşturunuz.
7. Adım: Oluşturduğunuz elemanların içine <th>, <tr>, <td> etiketlerini kullanarak tablonun satır ve sütunlarını oluşturunuz.
8. Adım: HTML belgesini “tablo.html” olarak kaydediniz ve tarayıcıda Görsel 3.23’teki gibi görüntüleyiniz.
<caption>Yazılı Notları</caption>
<thead>
<tr>
<th>İsim</th>
<th>Not</th>
</tr>
</thead>
<tbody>
<tr>
<td>Halide Edip</td>
<td>100</td>
</tr>
<tr>
<td>Sabiha</td>
<td>90</td>
</tr>
<tr>
<td>Gökçen</td>
<td>80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Ortalama</td>
<td>95</td>
</tr>
</tfoot>
</table>
 |
| Görsel 3.23: Anlamsal HTML tablo komutları |
Sıra Sizde
Sütun başlıkları haftanın günleri, satır başlıkları ders saatleri olan kendi ders programı tablonuzu HTML5 etiketlerini kullanarak oluşturunuz.
Hiç yorum yok