HTML sayfalarımız üzerinde tablo oluşturmak için <table> etiketini kullanmalıyız. Satırlar için <tr>, sütunlar için de <td> etiketlerini kullanmalıyız.
Aşağıda hazırlanmış örneği inceleyebilirsiniz:
<table> <tr> <td>1.satır, 1.sütun</td> <td>1.satır, 2.sütun</td> </tr> <tr> <td>2.satır, 1.sütun</td> <td>2.satır, 2.sütun</td> </tr> </table> |
Bu kodun çıktısı ise aşağıdaki gibi olacaktır:
1.satır, 1.sütun | 1.satır, 2.sütun |
2.satır, 1.sütun | 2.satır, 2.sütun |
Tablo Çerçevesi – border kodu kullanımı
Yukardaki örneğin çıktığını aldığımızda göze hoş gelmeyen bir görüntü olduğunu fark ettik. Tablomuzun çerçevesi olmadığı için metinler birazda olsa karışık bir şekilde gözükebiliyor. Bu durum da göze hitap etmiyor.
Bu kötü görüntüyü ortadan kaldırmak için border etiketini kullanabiliriz. table etiketinin içerisine border etiketini ve kalınlık seviyesini girmemizle çıktımıza çerçeve eklenebiliyor.
<table border=”3″> <tr> <td>1.satır, 1.sütun</td> <td>1.satır, 2.sütun</td> </tr> <tr> <td>2.satır, 1.sütun</td> <td>2.satır, 2.sütun</td> </tr> </table> |
Kodumuza table içerisinde border yazdık ve kalınlığını 3 olarak belirledik. Aşağıda kodumuzun çıktısını inceleyebilirsiniz.
1.satır, 1.sütun | 1.satır, 2.sütun |
2.satır, 1.sütun | 2.satır, 2.sütun |
Gördüğünüz gibi çerçeve daha kalın oldu.
Tablolara Başlık Ekleme – <th> etiketi
Tablomuzdaki sütunlarımıza başlık ekleyebilmek için <th></th> etiketini kullanabiliriz.
<table border=”3″> <tr> <th>Başlık 1</th> <th>Başlık 2</th> </tr> <tr> <td>1.satır, 1.sütun</td> <td>1.satır, 2.sütun</td> </tr> <tr> <td>2.satır, 1.sütun</td> <td>2.satır, 2.sütun</td> </tr> </table> |
Çıktısı ise şu şekilde oluyor:
Başlık 1 | Başlık 2 |
---|---|
1.satır, 1.sütun | 1.satır, 2.sütun |
2.satır, 1.sütun | 2.satır, 2.sütun |
Bir Yorum Bırak