HTML tabloları, satırlar ve sütunlar içeren tablo halindeki verileri görüntülemek için kullanılır. <table> kullanma kararı, sunduğunuz içeriğe ve kullanıcılarınızın bu içerikle ilgili ihtiyaçlarına dayalı olmalıdır. Veriler sunuluyor, karşılaştırılıyor, sıralanıyor, hesaplanıyor veya çapraz referans alınıyorsa <table> muhtemelen doğru seçimdir. Tablo biçiminde olmayan içerikleri (ör. büyük bir küçük resim grubu) düzgün bir şekilde yerleştirmek istiyorsanız tablolar uygun değildir. Bunun yerine resim listesi oluşturun ve ızgarayı CSS ile biçimlendirin.
Bu bölümde, tabloyu oluşturan tüm unsurların yanı sıra tablo verilerini sunarken göz önünde bulundurmanız gereken bazı erişilebilirlik ve kullanılabilirlik özelliklerini ele alacağız. HTML'yi Öğrenin temelde CSS ile ilgili olmasa ve tamamen CSS öğrenmeye özel bir kurs olsa da, tabloya özgü bazı CSS özelliklerini ele alacağız.
Tablo öğeleri, sırayla
<table> etiketi, tüm tablo öğeleri de dahil olmak üzere tablo içeriğini sarmalar.
<table> öğesinin örtülü ARIA rolü table'dir. Yardımcı teknolojiler, bu öğenin satırlar ve sütunlar halinde düzenlenmiş veriler içeren bir tablo yapısı olduğunu bilir. Tablo bir seçim durumunu koruyorsa, iki boyutlu gezinme içeriyorsa veya kullanıcının hücre sırasını yeniden düzenlemesine izin veriyorsa role="grid" değerini ayarlayın.
grid satırları genişletilebiliyor ve daraltılabiliyorsa bunun yerine role="treegrid" değerini kullanın.
<table> içinde tablo başlıkları (<thead>), tablo gövdeleri (<tbody>) ve isteğe bağlı olarak tablo altbilgileri (<tfoot>) bulunur.
Bunların her biri tablo satırlarından (<tr>) oluşur. Satırlarda tablo başlığı (<th>) ve tablo verisi (<td>) hücreleri bulunur. Bu hücreler de tüm verileri içerir.
DOM'de, bundan önce iki özellik daha görebilirsiniz: tablo başlığı (<caption>) ve sütun grupları (<colgroup>). <colgroup> öğesinin span özelliği olup olmadığına bağlı olarak, iç içe yerleştirilmiş tablo sütunu (<col>) öğeleri içerebilir.
Tablonun alt öğeleri sırasıyla şunlardır:
<caption>öğesi<colgroup>öğeleri<thead>öğeleri<tbody>öğeleri<tfoot>öğeleri
Tümü isteğe bağlı olan ancak önerilen <table> öğelerinin alt öğelerini ele alacağız. Ardından satırlara, tablo başlığı hücrelerine ve tablo veri hücrelerine göz atacağız. En son <colgroup> kapsanacak.
Tablo başlığı
Yerel ve anlamsal bir öğe olan <caption>, bir tabloya ad vermek için tercih edilen yöntemdir. <caption> açıklayıcı, programatik olarak ilişkilendirilmiş bir tablo başlığı sağlar. Varsayılan olarak tüm kullanıcılar tarafından görülebilir ve kullanılabilir.
<caption> öğesi, <table> öğesi içine yerleştirilen ilk öğe olmalıdır. Metnin dahil edilmesi, tüm kullanıcıların etrafındaki metni okumak zorunda kalmadan tablonun amacını anında bilmesini sağlar. Alternatif olarak, altyazı olarak erişilebilir bir ad sağlamak için <table> üzerinde aria-label veya aria-labelledby kullanabilirsiniz. <caption> öğesinin öğeye özel özellikleri yok.
Başlık tablonun dışında görünür. Altyazının konumu, CSS caption-side özelliğiyle ayarlanabilir. Bu, kullanımdan kaldırılan align özelliğini kullanmaya göre daha iyi bir uygulamadır. Bu şekilde resim yazısını hem en üste hem de en alta ayarlayabilirsiniz. inline-start ve inline-end ile sol ve sağ taraf konumlandırması henüz tam olarak desteklenmemektedir. En üstte, varsayılan tarayıcı sunumudur.
Tercihen, veri tablolarının net başlıkları ve bir başlığı olmalı, ayrıca anlaşılabilir hale gelecek kadar basit olmalıdır. Tüm kullanıcıların bilişsel yeteneklerinin aynı olmadığını unutmayın. Tablo "önemli bir nokta" olduğunda veya başka şekilde yoruma ihtiyaç duyulduğunda tablonun ana noktası ya da işleviyle ilgili kısa bir özet sağlayın. Özetin nereye yerleştirileceği, uzunluğuna ve karmaşıklığına bağlıdır.
Kısaysa altyazının iç metni olarak kullanın. Daha uzunsa başlıkta özetleyin ve tablodan önceki paragrafta özeti sağlayarak ikisini aria-describedby özelliğiyle ilişkilendirin. Tabloyu <figure> ve özeti <figcaption> içine yerleştirmek başka bir seçenektir.
Veri bölümlendirme
Tablolar en fazla üç bölümden oluşur: sıfır veya daha fazla tablo başlığı (<thead>), tablo gövdeleri (<tbody>) ve tablo altbilgileri (<tfoot>). Bunların tümü isteğe bağlıdır ve her birinin sıfır veya daha fazlası desteklenir.
Bu öğeler tablonun erişilebilir olmasına yardımcı olmaz veya onu engellemez ancak kullanılabilirlik açısından yararlıdır. Bunlar, stil için
kancalar sağlar. Örneğin, başlık içerikleri sabit hale getirilebilirken <tbody> içerikleri kaydırılabilir hale getirilebilir. Bu üç içeren öğeden birine iç içe yerleştirilmeyen satırlar, <tbody> öğesi içine örtülü olarak sarmalanır. Her üçü de aynı dolaylı rowgroup rolünü paylaşır.
Bu üç öğeden hiçbirinin öğeye özel öznitelikleri yoktur.
Şu ana kadarki bilgilerimiz:
<table>
<caption>MLW Students</caption>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
<tfoot> öğesi, erişilebilirlik nedeniyle başlangıçta <thead> öğesinden hemen sonra ve <tbody> öğesinden önce gelecek şekilde belirtilmiştir. Bu nedenle, eski kod tabanlarında bu sezgisel olmayan kaynak sıralamasıyla karşılaşabilirsiniz.
Tablo içeriği
Tablolar; tablo başlıkları, gövdeler ve alt bilgiler olarak ayrılabilir. Ancak tablolarda tablo satırları, hücre ve içerik yoksa bunların hiçbiri gerçekte hiçbir şey yapmaz. Her tablo satırında (<tr>) bir veya daha fazla hücre bulunur. Hücre başlık hücresiyse <th> işlevini kullanın.
Aksi takdirde <td> kullanın.
Kullanıcı aracısı stil sayfaları, genellikle <th> tablo başlığı hücresindeki içeriği ortalanmış ve kalın olarak gösterir. Bu varsayılan stiller ve tüm stil en iyi şekilde, önceden ayrı hücrelerde, satırlarda ve hatta <table>'de kullanılabilen kullanımdan kaldırılan özellikler yerine CSS ile kontrol edilir.
Hücreler arasına ve hücrelerin içine, kenarlıklar ve metin hizalaması için dolgu eklemeyi sağlayan özellikler bulunuyordu. Hücrenin içeriği ile kenarlığı arasındaki ve bitişik hücrelerin kenarlıkları arasındaki boşluğu tanımlayan hücre dolgu ve hücre hızı, sırasıyla CSS border-collapse ve border-spacing özellikleriyle ayarlanmalıdır. border-collapse: collapse ayarlanırsa Border-spacing hiçbir etkisi olmaz. border-collapse: separate; ayarlanırsa boş hücreleri empty-cells: hide; ile tamamen gizleyebilirsiniz. Tabloların stil özelliklerini ayarlama hakkında daha fazla bilgi edinmek için tabloyla ilgili CSS stillerini içeren etkileşimli bir slayt gösterisini burada bulabilirsiniz.
Örneklerde, bazı özellikleri daha belirgin hale getirmek için tabloya ve her bir hücreye CSS içeren bir kenarlık ekledik:
Bu örnekte başlığımız, bir tablo başlığımız ve bir tablo gövdesi var. Başlıkta, üç başlık <th> hücresi içeren bir satır bulunur ve böylece üç sütun oluşturulur. Gövde üç satır veri içerir: İlk hücre, satırın başlık hücresidir, bu nedenle <td> yerine <th> hücresini kullanırız.
<th> hücresi, sütun başlığı veya satır başlığı gibi örtülü ARIA rolleriyle anlamsal anlam taşır. Numaralı scope özelliğinin değerine bağlı olarak, hücreyi tablo hücrelerinin sütunu veya satırı olarak tanımlar. scope açıkça ayarlanmazsa tarayıcı varsayılan olarak col veya row olur.
Anlamsal işaretleme kullandığımız için 1956 hücresinin iki başlığı vardır: Yıl ve Lou Minious. Bu ilişkilendirme bize "Lou Minious" için "1956"nın
mezuniyet "yılı" olduğunu söylüyor. Bu örnekte, tablonun tamamını görebileceğimiz gibi, ilişkilendirme görsel olarak belirgindir.
<th> kullanımı, başlık sütunu veya satırı görünümün dışına kaydırılmış olsa bile ilişkilendirme sağlar. <th scope="col">Year</th> ve <th scope="row">Lou Minious</th> değerlerini açıkça ayarlayabilirdik ancak bunun gibi basit bir tabloyla numaralanmış varsayılan değerler çalışır.
scope için diğer değerler, karmaşık tablolarda kullanışlı olan rowgroup ve colgroup değerleridir.
Hücreler birleştiriliyor
MS Excel, Google E-Tablolar ve Numbers'a benzer şekilde, birden çok hücre tek bir hücrede birleştirilebilir. Bu, HTML ile yapılır!
colspan özelliği, tek bir satırda bulunan iki veya daha fazla bitişik hücreyi birleştirmek için kullanılır. rowspan özelliği, tüm satırlar arasındaki hücreleri birleştirmek için kullanılır. Bu özellik, üst satırdaki hücreye yerleştirilir.
Bu örnekte, tablo başlığı iki satır içermektedir. İlk başlık satırı dört sütuna yayılan üç hücre içerir: Ortadaki hücre colspan="2" içerir. Bu işlem, komşu iki hücreyi birleştirir. İlk ve son hücreler rowspan="2" içeriyor. Bu işlem, hücreyi hemen altındaki satırdaki
hücreyle birleştirir.
Tablo başlığındaki ikinci satırda iki hücre bulunur. Bunlar, ikinci satırdaki ikinci ve üçüncü sütunlara ait hücrelerdir. İlk satırdaki ilk ve son sütunda yer alan hücre iki satıra yayıldığından, ilk veya son sütunda hiçbir hücre tanımlanmaz.
Bir hücrenin, tek başına scope özellikleri tarafından ayarlanamayan ilişkilendirmelere sahip birden fazla başlık hücresi ile tanımlandığı durumlarda, ilişkili başlıkların boşlukla ayrılmış bir listesiyle birlikte headers özelliğini ekleyin. Bu örnek daha karmaşık bir tablo olduğu için başlıkların kapsamını scope özelliğiyle açık bir şekilde tanımlıyoruz. Daha da net anlaşılması için her hücreye headers özelliğini ekledik.
Bu kadar basit bir kullanım alanında headers özellikleri muhtemelen gerekli değildi, ancak tablolarınız karmaşıklıkla büyüdükçe araç kemerinizde bulunması önemlidir. Başlıkların veya hücrelerin birleştirildiği ya da ikiden fazla düzeyde sütun veya satır başlığı içeren tablolar gibi karmaşık yapılara sahip tablolar, ilişkili başlık hücrelerinin açık bir şekilde tanımlanmasını gerektirir. Bu tür karmaşık tablolarda, her veri hücresini, karşılık gelen her başlık hücresiyle headers özelliğinin değeri olarak, ilişkili tüm başlıkların boşlukla ayrılmış id değerleri listesiyle açık bir şekilde ilişkilendirin.
headers özelliği, <td> öğelerinde daha sık bulunur ancak <th> öğelerinde de geçerlidir.
Bununla birlikte, karmaşık tablo yapılarının yalnızca ekran okuyucu kullanıcıları değil, tüm kullanıcılar için anlaşılması zor olabilir. Bilişsel olarak ve ekran okuyucu desteği söz konusu olduğunda, kapsam ve başlıklar eklenmese bile çok az sayıda yayılmış hücre içeren veya hiç yer almayan basit tablolar daha kolay anlaşılır. Bunları yönetmek de daha kolaydır!
Tabloların stil özelliklerini ayarlama
Az önce bahsedilen nispeten belirsiz iki öğe vardır: <colgroup> sütun grubu öğesi ve bunun tek alt öğesi olan boş <col> sütun öğesi. <colgroup> öğesi, bir tablo içinde sütun gruplarını veya <col> öğelerini tanımlamak için kullanılır.
Sütun gruplaması kullanılırsa <table> öğesinin içine, <caption> öğesinin hemen sonrasına ve herhangi bir tablo verisinin önüne yerleştirilmelidir.
Birden fazla sütunu kapsıyorsa span özelliğini kullanın.
Bir tablonun içerik anahattı sırası genellikle aşağıdaki gibidir; <table> ve <caption>, eklenmesi gereken iki öğedir:
<table>
<caption>Table Caption</caption>
<colgroup>
<col/>
</colgroup>
<thead>...
Tabloyu daha erişilebilir hale getirmeye yardımcı olması açısından <colgroup> veya <col> öğelerinin anlamsal bir anlamı yoktur, ancak CSS ile sütun için bir genişlik belirlemek de dahil olmak üzere sınırlı sütun stillerine izin verirler.
<col> stilleri, söz konusu stili geçersiz kılan <td> veya <th> stilleri olmadığı sürece sütunun stilini belirler. Örneğin, bir tablonun bazı satırlarındaki hücreleri birleştirmek için yalnızca <colspan> kullanıldığında, her satırın 8. alt öğesini seçen tr > *:nth-child(8) gibi bir seçicinin hangi satır veya sütun hücrelerine bağlı olarak birkaç satırda 8. sütunu tamamen veya 8. sütunu vurgulayacağından emin olabilirsiniz.
Maalesef yalnızca birkaç özellik desteklenir, stiller hücrelere devralınmaz ve hedefleme hücrelerindeki <col> öğesini kullanmanın tek yolu, :has() ilişkisel seçiciyi içeren karmaşık bir seçici kullanmaktır.
Hem <table> hem de <colgroup> bir arka plan rengine sahipse <colgroup> öğesinin background-color öğesi üstte olur.
Çizimin sırası şu şekildedir: tablo katmanları şemasında gösterildiği gibi, tablo, sütun grupları, sütunlar, satır grupları, satırlar, sonda ve üstte hücreler. <td> ve <th> öğeleri, <colgroup> veya <col> öğelerinin alt öğesi değildir ve stillerini devralmaz.
CSS yapısal seçiciler, bir tabloyu çizmek için kullanışlıdır. Örneğin tbody tr:nth-of-type(odd) {background-color: rgba(0 0 0 / 0.1);}, tablonun gövdesindeki her tek satıra yarı saydam bir siyah ekleyerek <colgroup> üzerinde ayarlanan arka plan efektlerinin gösterilmesini sağlar.
Tablolar varsayılan olarak duyarlı değildir. Bunun yerine, varsayılan olarak içeriklerine göre boyutlandırılırlar. Tablo düzeni stilinin çeşitli cihazlarda etkili bir şekilde çalışması için ekstra önlemler alınmalıdır. Tablo öğelerinin CSS görüntüleme özelliğini değiştiriyorsanız ARIA role özelliklerini ekleyin. Bu işlem gereksiz gibi görünse de CSS display özelliği bazı tarayıcılarda erişilebilirlik ağacını etkileyebilir.
Verileri sunma
Tablo öğelerinin anlamsal anlamları vardır. Bu anlamlar, yardımcı teknolojiler tarafından "kaybolmadan" satırlar ve sütunlar arasında gezinmeyi sağlamak için kullanılır. <table> öğesi sunum için kullanılmamalıdır. Liste üzerinde başlığa ihtiyacınız varsa bir başlık ve liste kullanın. İçeriği çok sayıda sütuna yerleştirmek istiyorsanız çok sütunlu düzeni kullanın.
İçeriği bir ızgaraya yerleştirmek istiyorsanız CSS ızgarasını kullanın. Bir tabloyu yalnızca veriler için kullanın. Şöyle düşünün: Bir toplantıda verilerinizin sunulması için e-tablo gerekiyorsa <table> değerini kullanın.
Keynote veya PowerPoint gibi sunu yazılımlarında bulunan özellikleri kullanmak isterseniz muhtemelen bir açıklama listesine ihtiyacınız vardır.
Tablo sütunlarını sıralamak JavaScript'in amacıyken, kullanıcılara sütunun sıralanabilir olduğunu bildirmek için başlıklarınızı işaretlemek HTML'nin amacıdır.
Kullanıcılarınıza tablo sütunlarının artan, azalan veya sıralanmamış olarak gösterilen simgelerle sıralanabilir olduğunu bildirin. Sıralanan sütun, sıralama yönünün numaralandırılmış değerine sahip aria-sort özelliğini içermelidir.
<caption>, aria-live ve dinamik olarak güncellenen, ekran okuyucu kullanıcılarının görebildiği bir aralık aracılığıyla sıralama ölçütüyle ilgili güncellemeleri nazik bir şekilde duyurabilir. Sütun, başlık içeriği tıklanarak sıralanabileceğinden, başlık içeriği <button> olmalıdır.
Tablo biçiminde veri sunmuyorsanız <table> kullanmayın. Sunum için bir tablo kullanıyorsanız role="none" değerini ayarlayın.
Birçok geliştirici formları düzenlemek için tablolar kullanır, ancak buna gerek yoktur. Ancak HTML formları hakkında bilgi sahibi olmanız gerekir, bu nedenle bir sonraki bölümde bunu ele alacağız.
Öğrendiklerinizi sınayın
Tablolarla ilgili bilginizi test edin.
Başlık olan hücreleri işaretlemek için hangi öğe kullanılır?
<header><caption><th>Tablo içeren düzene en uygun bilgi hangisidir?
<dl> için daha uygun.<ul> için daha uygun.