Bu kılavuzdaki ikinci makalede, HTML tablolarının bazı daha gelişmiş özelliklerine ve ayrıca görme engelli kullanıcılar için tabloların erişilebilirliğine bakıyoruz.
<caption> ile tabloya resim yazısı ekleme
Tablonuza bir <caption> öğesi yerleştirerek tabloya bir başlık verebilirsiniz. Bu öğeyi <table> etiketinin hemen altına koymalısınız .
<table>
<caption>Dinosaurs in the Jurassic period</caption>
...
</table>Yukarıdaki kısa örnekten de anlayabileceğiniz gibi, başlık, tablo içeriğinin bir açıklaması için kullanılır. Bu, sayfayı tararken tablonun kendileri için yararlı olup olmadığını öğrenmek isteyen ziyaretçiler için, özellikle de görme engelli kullanıcılar için faydalı olacaktır. Bir ekran okuyucunun birçok hücre içeriğini okumasını sağlamak yerine, kullanıcıya bir başlık vermek daha doğru olacaktır. Kullanıcı ardından tabloyu daha ayrıntılı olarak okuyup okumamaya karar verebilir.
Not : summary özniteliği de benzer şekilde <table> öğesine bir açıklama sağlamak için kullanılabilir – bu öğe de ekran okuyucular tarafından okunur. Bununla birlikte, summary HTML5 spesifikasyonu tarafından kullanımdan kaldırıldığı için bunun yerine <caption> öğesini kullanmanızı öneririz .
Aktif öğrenme: Başlık ekleme
Şimdi bunu deneyelim. Önceki makalede tanıştığımız bir örneği tekrar gözden geçirelim.
- HTML Tablosu Temelleri‘nin sonundaki dil öğretmeninizin okul takvimini açın veya timetable-fixed.html dosyasını indirin.
- Tablo için uygun bir başlık ekleyin.
- Kodunuzu kaydedin ve neye benzediğini görmek için bir tarayıcıda açın.
thead, tfoot ve tbody ile yapı ekleme
Tablolarınız yapı olarak biraz daha karmaşık hale geldikçe, onlara yapısal bir tanım vermek istersiniz. Bunu yapmanın bir yolu <thead>, <tfoot> ve <tbody> etiketlerini kullanmaktır. Bunlar tabloya başlık, altbilgi ve gövde işaretlemede olanak verir.
Bu öğeler, tabloyu ekran okuyucu kullanıcıları için daha erişilebilir hale getirmez ve kendi başlarına herhangi bir görsel iyileştirme de sağlamaz. Bununla birlikte, stil ve düzen için çok kullanışlıdırlar – tablonuza CSS eklemek için kullanışlı kanca görevi görürler. Size bazı ilginç örnekler vermek gerekirse, uzun bir tablo durumunda, tablo üstbilgisini ve altbilgisini yazdırılan her sayfada tekrar ettirebilir ve tablo gövdesini tek bir sayfada görüntüleyebilir ve içeriği yukarı ve aşağı kaydırarak kullanılabilir hale getirebilirsiniz.
Kullanım:
<thead>sütun başlıkları ihtiva eden satırı sarar. Bu satır genellikle tablodaki ilk satırdır – ama her zaman böyle olmak zorunda değil,<col>/<colgroup>elementlerini kullanıyorsanız, tablo başlığı bunların hemen altına gelmelidir.<tfoot>altbilgi olacak kısmı sarar – örneğin önceki satırlardaki sayıları toplayan nihai satır olabilir. Tablo alt bilgisini, beklediğiniz gibi tablonun hemen altına veya tablo başlığının hemen altına ekleyebilirsiniz (tarayıcı onu tablonun altında oluşturmaya devam edecektir).<tbody>tablo üst bilgisi veya tablo alt bilgisi olmayan tablo içeriğinin diğer kısımlarını sarar. Nasıl yapılandırmaya karar verdiğinize bağlı olarak, tablo üstbilgisinin veya bazen altbilginin altında görünecektir.
Not: <tbody> Kodunuzda belirtmezseniz bile örtük olarak her tabloya her zaman dahil edilir. Bunu kontrol etmek için, tarayıcı geliştirici araçlarınızla HTML kodunu inceleyin. Peki neden bu öğeyi dahil etmeniz gerekiyor – çünkü bu bize tablo yapımız ve stilimiz üzerinde daha fazla kontrol sağlıyor.
Aktif öğrenme: Tablo yapısı ekleme
Bu yeni unsurları kullanalım:
- Her şeyden önce, harcama kaydı.html ve minimal-table.css dosyalarının yerel bir kopyasını alın.
- Bir tarayıcıda açmayı deneyin – görünümün normal olduğunu göreceksiniz, ancak geliştirilebilir de. Harcanan tutarların toplamını içeren “SUM” satırı yanlış yerde görünüyor ve kodda bazı ayrıntılar eksik.
- Başlık satırını bir
<thead>öğesinin içine , “SUM” satırını ise bir<tfoot>öğesinin içine ve içeriğin geri kalanını da bir<tbody>öğesinin içine koyun. - Kaydedin ve tarayıcıda açın;
<tfoot>öğesi eklemenin “SUM” satırının tablonun altına inmesine neden olduğunu göreceksiniz . - Ardından,
colspanile “TOPLA” hücresinin ilk dört sütuna yayılmasını sağlayın. Böylece gerçek sayı “Maliyet” sütununun altında görünür. - Bu öğelerin CSS uygulamak için ne kadar yararlı olduğu hakkında bir fikir vermek için tabloya bazı basit ekstra stiller ekleyelim. HTML belgenizin başlığının içinde boş bir
<style>öğesi göreceksiniz . Bu öğenin içine aşağıdaki CSS kodu satırlarını ekleyin:
tbody {
font-size: 95%;
font-style: italic;
}
tfoot {
font-weight: bold;
}- Kaydedin ve yenileyin ve sonuca bir göz atın. Eğer
<tbody>ve<tfoot>elementleri olmasaydı aynı stili uygulamak için çok daha karmaşık seçiciler/kurallar yazmak gerekirdi.
Not: Şu anda CSS’yi tam olarak anlamanızı beklemiyoruz.
Bitmiş tablonuz aşağıdaki gibi görünmelidir:
İç içe tablolar
Bir tabloyu diğerinin içine yerleştirmek mümkündür. Bunun için <table> öğesi dahil tüm yapıyı diğer tablonun içine dahil etmeniz gerekir. İşaretlemeyi ekran okuyucu kullanıcıları için daha kafa karıştırıcı ve daha az erişilebilir hale getirdiği için bu genellikle tavsiye edilmez ve çoğu durumda mevcut tabloya fazladan hücreler/satırlar/sütunlar da ekleyebilirsiniz. Bununla birlikte, mesela diğer kaynaklardan kolayca içerik almak istiyorsanız, bazen de gereklidir.
Aşağıdaki kod basit bir iç içe tabloyu gösterir:
<table id="table1">
<tr>
<th>title1</th>
<th>title2</th>
<th>title3</th>
</tr>
<tr>
<td id="nested">
<table id="table2">
<tr>
<td>cell1</td>
<td>cell2</td>
<td>cell3</td>
</tr>
</table>
</td>
<td>cell2</td>
<td>cell3</td>
</tr>
<tr>
<td>cell4</td>
<td>cell5</td>
<td>cell6</td>
</tr>
</table>Çıktı şuna benzer:
Görme engelli kullanıcılar için tablolar
Veri tablolarını nasıl kullandığımızı kısaca özetleyelim. Bir tablo, verilere hızlı erişim sağlamamız ve farklı değerler aramamız için kullanışlı bir araç olabilir. Örneğin, geçen Ağustos ayında Gent’te kaç yüzük satıldığını öğrenmek için aşağıdaki tabloya kısa bir göz atmak yeterli. Anlamak için bu tablodaki veriler ile sütun ve/veya satır başlıkları arasında görsel ilişkiler kurarız.
Peki ya bu görsel çağrışımları yapamıyorsanız? O halde yukarıdaki gibi bir tabloyu nasıl okuyabilirsiniz? Görme engelli kişiler genellikle web sayfalarındaki bilgileri kendilerine okuyan bir ekran okuyucu kullanır. Düz metin okurken bu sorun değil ama bir tabloyu yorumlamak görme engelli biri için oldukça zor olabilir. Yine de, uygun işaretleme ile görsel çağrışımları programlı olanlarla değiştirebiliriz.
Not:2017 yılı DSÖ verilerine göre Görme Bozukluğu ile yaşayan yaklaşık 253 Milyon kişi bulunuyor.
Makalenin bu bölümünde tabloları olabildiğince erişilebilir hale getirmek için daha fazla tekniğe bakacağız.
Sütun ve satır başlıklarını kullanma
Ekran okuyucuları, tüm başlıkları tanımlar ve bunları hücreler ile ilişkiler kurmak için kullanırlar. Sütun ve satır başlıklarının birleşimi, her hücredeki verileri tanımlayacak ve yorumlayacaktır, böylece ekran okuyucusu kullanıcıları, tabloyu gören bir kullanıcının yaptığına benzer şekilde yorumlayabilir.
Başlıkları önceki makalemizde zaten ele almıştık.
Kapsam özelliği
Bu makale için yeni bir konu scope. <th> öğesine eklenerek ekran okuyuculara başlığın tam olarak hangi hücreler için başlık olduğunu söyleyen bir özniteliktir – örneğin, içinde bulunduğu satırın mı yoksa sütunun başlığı mı? Daha önceki örneğimize geri dönersek, sütun başlıklarını açık bir şekilde aşağıdaki gibi sütun başlıkları olarak tanımlayabilirsiniz:
<thead>
<tr>
<th scope="col">Purchase</th>
<th scope="col">Location</th>
<th scope="col">Date</th>
<th scope="col">Evaluation</th>
<th scope="col">Cost (€)</th>
</tr>
</thead>Ve her satırın şu şekilde tanımlanmış bir başlığı olabilir (eğer sütun başlıklarının yanı sıra satır başlıklarını da eklediysek):
<tr>
<th scope="row">Haircut</th>
<td>Hairdresser</td>
<td>12/09</td>
<td>Great idea</td>
<td>30</td>
</tr>Ekran okuyucular, bu şekilde yapılandırılmış işaretlemeyi tanır ve örneğin, kullanıcılarının tüm sütunu veya satırı bir kerede okumasına olanak tanır.
scope için iki olası değer daha vardır – colgroup ve rowgroup. Bunlar, birden çok sütunun veya satırın üstünde duran başlıklar için kullanılır. Makalenin başındaki “Ağustos 2016’da Satılan Ürünler” tablosuna tekrar bakarsanız, “Giysiler” hücresinin “Pantolon”, “Etekler” ve “Elbiseler” hücrelerinin üzerinde olduğunu görürsünüz. Bu hücrelerin tümü başlık ( <th>) olarak işaretlenmelidir , ancak “Giysiler” en üstte yer alan ve diğer üç alt başlığı tanımlayan bir başlıktır. Bu nedenle “Giysiler” bir scope="colgroup" özniteliği almalı, diğerleri ise scope="col" özniteliği alacaktır.
Kimlik ve başlık özellikleri
scope özniteliği kullanmanın bir alternatifi, başlıklar ve hücreler arasında ilişkiler oluşturmak için id ve headers öznitelikleri kullanmaktır. Bunların kullanılma şekli aşağıdaki gibidir:
- Her
<th>öğesine benzersiz birideklersiniz. - Her
<td>öğesine birheadersözniteliği eklersiniz. Herheadersözniteliği, o hücre için başlık görevi gören tüm<th>öğelerin boşluklarla ayrılmışidlistesini içermelidir .
Bu, HTML tablonuza, tablodaki her hücrenin konumunun açık bir tanımını verir. İyi çalışması için tablonun gerçekten hem sütun hem de satır başlıklarına ihtiyacı vardır.
Harcama maliyetleri örneğimize dönersek, önceki iki parça şu şekilde yeniden yazılabilir:
<thead>
<tr>
<th id="purchase">Purchase</th>
<th id="location">Location</th>
<th id="date">Date</th>
<th id="evaluation">Evaluation</th>
<th id="cost">Cost (€)</th>
</tr>
</thead>
<tbody>
<tr>
<th id="haircut">Haircut</th>
<td headers="location haircut">Hairdresser</td>
<td headers="date haircut">12/09</td>
<td headers="evaluation haircut">Great idea</td>
<td headers="cost haircut">30</td>
</tr>
...
</tbody>Not: Bu yöntem, başlıklar ve veri hücreleri arasında çok kesin ilişkiler oluşturur, ancak çok daha fazla biçimlendirme kullanır ve hatalara yer bırakmaz. scope yaklaşımı çoğu tablolar için genellikle yeterlidir.
Aktif öğrenme: kapsam ve başlıklarla oynama
- Bu son alıştırma için önce item-sold.html ve minimal-table.css dosyalarınızın yerel kopyalarını alın.
- Şimdi
scopeile bu tabloyu daha uygun hale getirecek uygun nitelikler eklemeyi deneyin . - Son olarak, başlangıç dosyalarının başka bir kopyasını oluşturun ve bu sefer tabloyu
idveheadersöznitelikleri kullanarak daha erişilebilir hale getirin.
Not: Çalışmanızı bitmiş örneklerle karşılaştırabilirsiniz – bkz.item-sold-scope.html ve item-sold-headers.html.
Özet
HTML tabloları hakkında öğrenebileceğiniz birkaç şey daha var, ancak şu anda gerçekten bilmeniz gereken her şeyi verdik. Bu noktada, HTML tablolarının stilini öğrenmek isteyebilirsiniz.