HTML Tabloları Hakkında Temel Bilgiler
HTML tabloları, web tasarımcılar için bazen hayat kurtarıcı oluyor. HTML tabloları, özellikle verileri anlamlı şekilde görselleştirmek için kullanılıyor. Satır ve sütunlardan oluşan tabloları etkin şekilde kullanmak web tasarımcılar için çok önemli.
Peki, HTML’de tablo nasıl yapılır? Ne zaman ve neden kullanılır? Gelin bu soruların cevaplarına ve daha fazlasına birlikte göz atalım.
HTML tablosu ve kullanım alanları
HTML tablosu metin, görsel, bağlantı gibi verileri düzenlemek için kullanılır ve temel olarak satır ve sütunlardan oluşur.
Tablolar ne zaman kullanılma(ma)lıdır?
Bir HTML tablosu, verileri düzenlemek istediğiniz zaman büyük bir anlam ifade eder. Finansal veriler, takvimler, fiyatlandırma, özellik karşılaştırması, skorlar gibi pek çok veriyi sunmak için son derece ideal bir yoldur.
Bazı veriler tablolarda harika görünse de bazı veriler için tablo kullanmamakta fayda var. Örneğin site yerleşimi için asla tablo kullanmamanız gerekir. Genel kural web sitelerinin erişilebilir olması gerektiğidir. Erişilebilirlik ise, tabloları yukarıdan aşağıya, soldan sağa okuyan ekran okuyucularıyla doğrudan bağlantılıdır. HTML’deki tablolarla, sitenin sunuş sırasına erişilebilirlik seçenekleri yerine görsel seçimlerle karar verilir. Böyle durumlarda ekran okuyucuları istediğiniz gibi çalışmaz.
Tablo elementleri
HTML tabloları genellikle, amaçlarını açıklayan kısa bir tanımla birlikte gelir. Bazen daha detaylı bir tanım da kullanılabilir. Tablo satırları head, foot ve body bölümleri olarak gruplandırılabilir. Bunun için thead, tfoot, tbody elementlerinden faydalanılır.
Daha fazla yapısal bilgi vermek isterseniz, sütunları da gruplandırabilirsiniz. Buna ek olarak COLGROUP ve COL elementlerini kullanarak tablo tanımının başında sütün özelliklerini bildirebilirsiniz. Tablo hücreleri başlık bilgisi veya verileri içerir. Tablolarda birden fazla satır ve sütun yer alabilir.
Tablonun ilk satırı, tablonun başlığıdır ve veri içermez. Semantik olarak ilk tr etiketini içine alacak olan thead elementiyle bunu ifade edebilirsiniz. thead kullandığınız zaman table’ın çocuğu olan tr kullanılmamalarıdır. Tüm satırlar, thead, tbody veya tfoot içinde olmalıdır.
thead ve tbody ile birlikte, tablonun altbilgisini gösteren tablo satırlarını kapsamak için tfoot vardır. thead gibi, bunlar veri satırları değildir ve yardımcı bilgiler içerir.
tfoot dediğimiz zaman tablonun en altında yer verilecek bir bölüm akla gelse de böyle olmak zorunda değil. tfoot alt başlık gibi de düşünülebilir ve verilerden önce yerleştirilebilir. Örneğin, çok uzun tablolarda başlığı tekrar ederek hatırlatmak için kullanılabilir.
tfoot HTML etiketi
tfoot, bir tablonun sütunlarının kısa içeriğini kapsayan bir veya daha fazla tr ögesini tanımlar. tfoot etiketinin bir her zaman bir table etiketinin altında yer alması gerekir. HTML5’te tfoot, tbody ve tr etiketlerinin önüne ya da arkasına yerleştirilebilir ama caption, colgroup ve thead etiketlerinin önüne gelemez.
tbody HTML etiketi
tbody etiketinin bir her zaman bir table etiketinin altında yer alması gerekir ve tablonun gövdesini oluşturan tr etiketlerini tanımlamak için kullanılır. tbody etiketinin her zaman thead etiketinden sonra kullanılması gerekirken tfoot etiketinden önce veya sonra gelebilir.
HTML5 kullanmayı öğrenmek için siz de hemen HTML5 CSS3 kitabını edinin.
