HTML’de Nasıl Tablo Oluşturulur?

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