HTML < table > Yapısı: Tabloları Oluşturmak ve Biçimlendirmek
2 Eylül 2023 | 197
Tablolar, web sayfalarında verileri düzenlemek, görsel olarak anlamlı bir şekilde sunmak ve bilgileri kolayca okunabilir hale getirmek için sıkça kullanılan bir araçtır. HTML'de tabloları oluşturmak için <table> etiketi kullanılır. Bu etiket, içerisine yerleştirilen diğer etiketlerle birlikte satır ve sütunlardan oluşan bir yapı oluşturur. Bu blog yazısında, <table> etiketinin temel kullanımını gösterecek ve tabloları biçimlendirmek için kullanılan bazı ek etiketleri de ele alacağız.
İçerik:
<table>Etiketi ve Temel Kullanımı: HTML<table>etiketi, tablonun başladığını ve bittiğini belirtmek için kullanılır. Tablo içerisindeki verileri düzenlemek için<tr>(tablo satırı) etiketi kullanılır. Her satırda,<td>(tablo hücresi) veya<th>(başlık hücresi) etiketiyle hücreler oluşturulur. Örnek bir tablo yapısı şu şekildedir:
<tr>
<th>Başlık 1</th>
<th>Başlık 2</th>
</tr>
<tr>
<td>Veri 1</td>
<td>Veri 2</td>
</tr>
</table>
Tablo Biçimlendirme:
HTML tabloları, CSS kullanarak biçimlendirilebilir. Tablonun satır ve sütun arkaplan renkleri, kenarlık stil ve genişlikleri gibi özelliklerle görünümü geliştirilebilir. İşte bazı yaygın kullanılan CSS özellikleri:
border: Tablonun kenarlık özelliğini belirler.background-color: Tablonun arkaplan rengini belirler.text-align: Hücre içeriğinin yatay hizalamasını belirler.padding: Hücre içerisindeki içeriğin kenardan olan uzaklığını belirler.width: Tablonun genişliğini belirler.
<tfoot> Etiketi: <tfoot>, tablonun alt kısmında (footer) yer alacak ek bilgileri belirtmek için kullanılır. Genellikle tablonun toplam değerlerini veya açıklamalarını içeren satırları içerir. <tfoot> etiketi, <table> etiketinin hemen sonra yer almalıdır. Örnek kullanım şu şekildedir:
<tr>
<th>Başlık 1</th>
<th>Başlık 2</th>
</tr>
<tr>
<td>Veri 1</td>
<td>Veri 2</td>
</tr>
<tfoot>
<tr>
<td colspan="2">Toplam:</td>
</tr>
</tfoot>
</table>
Sonuç:
HTML <table> yapısı, verileri düzenlemek, tablolar oluşturmak ve bilgileri görsel olarak daha anlamlı bir şekilde sunmak için güçlü bir araçtır. Bu blog yazısında, <table> etiketinin temel kullanımını ve tabloları biçimlendirmek için kullanılabilecek bazı CSS özelliklerini ele aldık. Ayrıca, tabloların alt kısmında ek bilgiler sağlamak için <tfoot> etiketini de tanıttık. Tabloları kullanırken bu etiketleri ve CSS biçimlendirme yöntemlerini kullanarak, web sayfalarınızda verilerinizi daha etkili bir şekilde sunabilirsiniz.
Umarım bu blog yazısı size yardımcı olur!
