Tablolar

HTML tabloları, tablo biçimindeki verileri satır ve sütunlarla 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 göre verilmelidir. Veriler sunuluyor, karşılaştırılıyor, sıralanıyor, hesaplanıyor veya çapraz referans veriliyor olabilir. Bu durumda <table> muhtemelen doğru seçimdir. Tablolar, büyük bir küçük resim grubu gibi tablo dışı içerikleri düzgün bir şekilde düzenlemek için uygun değildir. Bunun yerine, resimlerden bir liste oluşturun ve tabloyu CSS ile biçimlendirin.

Bu bölümde, tabloyu oluşturan tüm öğelerin yanı sıra tablo biçiminde veriler sunarken dikkate almanız gereken bazı erişilebilirlik ve kullanılabilirlik özelliklerinden bahsedeceğiz. HTML'yi Öğrenme temel olarak CSS ile ilgili değildir ve CSS'yi öğrenmeye özel bir kurs vardır. Ancak tabloya özgü bazı CSS özelliklerini ele alacağız.

Tablo öğeleri (sıralı olarak)

<table> etiketi, tüm tablo öğeleri dahil olmak üzere tablo içeriğini sarar. <table> öğesinin örtük ARIA rolü table'dur. Yardımcı teknolojiler, bu öğenin satır ve sütunlarda düzenlenmiş veriler içeren bir tablo yapısı olduğunu bilir. Tabloda seçim durumu korunuyorsa, iki boyutlu gezinme varsa veya kullanıcının hücre sırasını yeniden düzenlemesine izin veriliyor ise role="grid" değerini ayarlayın. grid satırları genişletilip daraltılabiliyorsa bunun yerine role="treegrid" öğesini kullanın.

<table> içinde tablo başlıkları (<thead>), tablo gövdeleri (<tbody>) ve isteğe bağlı olarak tablo altbilgilerini (<tfoot>) görürsünüz. Bunların her biri tablo satırlarından (<tr>) oluşur. Satırlar, tablo başlığı (<th>) ve tablo verileri (<td>) hücrelerini içerir. Bu hücreler de tüm verileri içerir. DOM'da, bunların hepsinden önce iki ek özellik görebilirsiniz: tablo başlığı (<caption>) ve sütun grupları (<colgroup>). <colgroup> öğesinin span özelliğinin olup olmamasına bağlı olarak iç içe yerleştirilmiş tablo sütunu (<col>) öğeleri içerebilir.

Tablonun alt öğeleri sırasıyla şunlardır:

  1. <caption> öğesi
  2. <colgroup> öğeleri
  3. <thead> öğeleri
  4. <tbody> öğeleri
  5. <tfoot> öğeleri

<table> öğelerinin alt öğelerini (tümü isteğe bağlı ancak önerilir) ele aldıktan sonra satırlara, tablo başlık hücrelerine ve tablo veri hücrelerine göz atacağız. <colgroup> en son ele alınacaktır.

Tablo yazısı

Yerel ve anlamsal bir öğe olan <caption>, tablolara ad vermede tercih edilen yöntemdir. <caption>, açıklayıcı ve 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> öğesine iç içe yerleştirilmiş ilk öğe olmalıdır. Bu metni eklemek, tüm kullanıcıların tablonun amacını çevreleyen metni okumak zorunda kalmadan hemen öğrenmesini 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 özelliği yoktur.

Altyazı, tablonun dışında görünür. Altbilginin konumu, CSS caption-side mülkü ile ayarlanabilir. Bu, kullanımdan kaldırılan align özelliğini kullanmaktan daha iyi bir uygulamadır. Bu işlem, altbilginin en üstte ve en altta görünmesini sağlayabilir. inline-start ve inline-end ile sol ve sağ tarafa konumlandırma henüz tam olarak desteklenmemektedir. Üst, varsayılan tarayıcı sunusudur.

Veri tablolarının net başlıkları ve bir başlığı olması ve neredeyse kendi kendini açıklayacak kadar basit olması tercih edilir. Tüm kullanıcıların aynı bilişsel özelliklere sahip olmadığını unutmayın. Tabloda "bir noktaya değiniliyor"sa veya tablonun yorumlanması gerekiyorsa tablonun ana fikrini ya da işlevini kısaca özetleyin. Özetin nereye yerleştirileceği, uzunluğuna ve karmaşıklığına bağlıdır. Kısaysa altyazı metninin iç kısmı olarak kullanın. Başlıktan uzunsa başlıkta özetleyin ve özeti tablodan önceki paragrafta sağlayın. Bu iki öğeyi aria-describedby özelliğiyle ilişkilendirin. Tabloyu bir <figure> içine, özeti ise <figcaption> içine yerleştirmek de bir seçenektir.

Verileri bölümlendirme

Tabloların içeriği 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>). Hepsi isteğe bağlıdır ve her biri sıfır veya daha fazla desteklenir.

Bu öğeler tablonun erişilebilirliğine yardımcı olmaz veya erişilebilirliği engellemez ancak kullanılabilirlik açısından faydalıdır. Stil askılarını sağlar. Örneğin, üstbilgi içerikleri sabitlenebilir, <tbody> içerikleri ise kaydırılabilir. Bu üç kapsayıcı öğeden birine yerleştirilmemiş satırlar, <tbody> içine örtülü olarak yerleştirilir. Üçü de aynı gizli rolü rowgroup paylaşır. Bu üç öğenin hiçbirinde öğeye özel özellik yoktur.

Şu ana kadar şunları yaptık:

<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 gelmesi için belirtilmişti. Bu nedenle, eski kod tabanlarında sezgisel olmayan bu kaynak sırasına rastlayabilirsiniz.

Tablo içeriği

Tablolar tablo üstbilgilerine, gövdelerine ve altbilgilerine bölünebilir ancak tablolarda tablo satırı, hücre ve içerik yoksa bunların hiçbiri işe yaramaz. Her tablo satırı (<tr>) bir veya daha fazla hücre içerir. Bir hücre başlık hücresiyse <th> kullanın. Aksi takdirde <td> kullanın.

Kullanıcı aracısı stil sayfaları, genellikle <th> tablo üstbilgi hücresindeki içeriği ortalanmış ve kalın olarak gösterir. Bu varsayılan stiller ve tüm stiller, tek tek hücrelerde, satırlarda ve hatta <table>'te kullanılabilen desteği sonlandırılmış özellikler yerine en iyi şekilde CSS ile kontrol edilir.

Hücreler arasında ve hücrelerin içine, kenarlıklar ve metin hizalaması için dolgu eklemek için özellikler vardı. Bir hücrenin içeriği ile kenarlığı ve bitişik hücrelerin kenarları arasındaki alanı tanımlayan cellpadding ve cellspacing, sırasıyla CSS border-collapse ve border-spacing özellikleriyle ayarlanmalıdır. border-collapse: collapse ayarlanmışsa Border-spacing'ün etkisi olmaz. border-collapse: separate; ayarlanmışsa boş hücreleri empty-cells: hide; ile tamamen gizlemek mümkündür. Tablolara stil uygulama hakkında daha fazla bilgi edinmek için tablolarla ilgili CSS stilleri içeren etkileşimli bir slayt gösterisini inceleyin.

Örneklerde, bazı özellikleri daha belirgin hale getirmek için tabloya ve her bir hücreye CSS ile kenarlık ekledik:

Bu örnekte bir başlık, bir tablo başlığı ve bir tablo gövdesi bulunmaktadır. Başlıkta, üç başlık <th> hücresi içeren bir satır bulunur. Bu sayede üç sütun oluşturulur. Gövde üç veri satırı içerir: İlk hücre, satırın başlık hücresidir. Bu nedenle <td> yerine <th> kullanırız.

<th> hücresi, columnheader veya rowheader örtük ARIA rollerine sahip olan anlamsal bir anlama sahiptir. Listelenen scope özelliğinin değerine bağlı olarak hücreyi, tablo hücrelerinin sütunu veya satırı için başlık olarak tanımlar. scope açıkça ayarlanmamışsa tarayıcı varsayılan olarak col veya row değerini kullanır. Anlamsal işaretleme kullandığımızdan 1956 hücresinin iki başlığı vardır: Yıl ve Lou Minious. Bu ilişkilendirme, "Lou Minious" için "mezuniyet yılı"nın "1956" olduğunu gösterir. Bu örnekte, tablonun tamamını görebildiğimiz için ilişki görsel olarak açıktır. <th> kullanıldığında, başlık sütunu veya satırı kaydırılarak görüntüden çıktığında bile ilişkilendirme sağlanır. <th scope="col">Year</th> ve <th scope="row">Lou Minious</th> değerlerini açıkça ayarlayabilirdik ancak bu gibi basit bir tabloda listelenen varsayılan değerler işe yarar. scope için diğer değerler arasında, karmaşık tablolarda faydalı olan rowgroup ve colgroup yer alır.

Hücreleri birleştirme

MS Excel, Google E-Tablolar ve Numbers'a benzer şekilde, birden fazla hücreyi tek bir hücrede birleştirebilirsiniz. Bu işlem HTML ile yapılır. colspan özelliği, tek bir satırdaki iki veya daha fazla bitişik hücreyi birleştirmek için kullanılır. rowspan özelliği, üst satırdaki hücreye yerleştirilerek satırlardaki hücreleri birleştirmek için kullanılır.

Bu örnekte tablo başlığı iki satır içerir. İlk başlık satırı dört sütuna yayılan üç hücre içerir: Ortadaki hücrede colspan="2" vardır. Bu işlem, iki bitişik hücreyi birleştirir. İlk ve son hücreler rowspan="2" içerir. Bu işlem, hücreyi hemen altındaki bitişik satırdaki hücreyle birleştirir.

Tablo başlığındaki ikinci satır iki hücre içerir. Bunlar, ikinci satırdaki ikinci ve üçüncü sütunların hücreleridir. İlk satırdaki ilk ve son sütunlardaki hücre iki satırı kapladığından ilk veya son sütun için hücre tanımlanmaz.

Bir hücrenin, yalnızca scope özellikleriyle ayarlanamayan ilişkilendirmelere sahip birden fazla başlık hücresiyle tanımlandığı durumlarda, ilişkili başlıkların boşlukla ayrılmış bir listesini içeren headers özelliğini ekleyin. Bu örnek daha karmaşık bir tablo olduğundan, başlıkların kapsamını scope özelliğiyle açıkça tanımlarız. Daha da netleştirmek için her hücreye headers özelliğini ekledik.

headers özellikleri bu kadar basit bir kullanım alanında gerekli olmayabilir ancak tablolarınız karmaşık hale geldikçe araç kutunuzda bulunması önemlidir. Başlıkların veya hücrelerin birleştirildiği veya ikiden fazla sütun ya da satır başlığı seviyesine sahip olan tablolar gibi karmaşık yapılara sahip tablolar, ilişkili başlık hücrelerinin açıkça tanımlanmasını gerektirir. Bu tür karmaşık tablolarda, her veri hücresini, headers özelliğinin değeri olarak ilişkili tüm başlıkların boşlukla ayrılmış id değerlerinin listesiyle her bir ilgili başlık hücresiyle açıkça ilişkilendirin.

headers özelliği daha çok <td> öğelerinde bulunur ancak <th> öğelerinde de geçerlidir.

Bununla birlikte, karmaşık tablo yapılarını yalnızca ekran okuyucu kullanıcıları değil, tüm kullanıcılar da anlaması zor olabilir. Hem zihinsel olarak hem de ekran okuyucu desteği açısından, kapsam ve üstbilgi eklenmemiş olsa bile, çok az sayıda veya hiç aralıklı hücre içermeyen daha basit tablolar daha kolay anlaşılır. Ayrıca, bu reklamların yönetimi de daha kolaydır.

Tabloların stilini ayarlama

Kısaca bahsedilen nispeten belirsiz iki öğe vardır: sütun grubu <colgroup> öğesi ve tek alt öğesi olan boş <col> sütun öğesi. <colgroup> öğesi, bir tablodaki sütun gruplarını veya <col> öğelerini tanımlamak için kullanılır.

Kullanılırsa sütun gruplandırması, <table> içinde, <caption>'ten hemen sonra ve herhangi bir tablo verisi öncesinde iç içe yerleştirilmelidir. Birden fazla sütuna yayılıyorlarsa span özelliğini kullanın.

Tabloların içerik özeti sırası genellikle aşağıdaki gibidir. <table> ve <caption>, dahil edilmesi gereken iki öğedir:

<table>
  <caption>Table Caption</caption>
  <colgroup>
    <col/>
  </colgroup>
  <thead>...

<colgroup> ve <col>, tablonun daha erişilebilir hale getirilmesine yardımcı olma açısından anlamsal bir değere sahip değildir ancak CSS ile sütun genişliği ayarlama dahil olmak üzere sınırlı sütun stili oluşturmaya olanak tanır.

<col> stilleri, bu stili geçersiz kılan <td> veya <th> stilleri olmadığı sürece bir sütuna stil uygular. Örneğin, bir tablonun tüm satırlarındaki değil de bazı satırlarındaki hücreleri birleştirmek için <colspan> kullanıldığında, her satırın 8. alt öğesini seçen tr > *:nth-child(8) gibi bir seçicinin 8. sütunu tamamen vurgulayacağından veya birkaç satır için 8. sütunu vurgulayacağından ancak hangi satır veya sütun hücrelerinin birleştirildiğine bağlı olarak 9. ve 10. sütun hücrelerinin bir kısmını da vurgulayacağından emin olamazsınız.

Ne yazık ki yalnızca birkaç özellik desteklenir, stiller hücrelere devralınmaz ve <col> öğesini hedefleme hücrelerinde kullanmanın tek yolu, :has() ilişkisel seçiciyi içeren karmaşık bir seçici kullanmaktır.

HTML tabloları tasarlamak için kullanılan öğelerin katmanlı oluşturma işlemi.

Hem <table> hem de <colgroup>'nin arka plan rengi varsa <colgroup>'nin background-color'si üstte olur. Çizim sırası: tablo, sütun grupları, sütunlar, satır grupları, satırlar. Tablo katmanlarının şemasında gösterildiği gibi hücreler en son ve en üsttedir. <td> ve <th> öğeleri, <colgroup> veya <col> öğelerinin alt öğeleri değildir ve bunların stilini devralmaz.

Tabloda şerit oluşturmak için CSS yapısal seçicileri kullanın. Örneğin, tbody tr:nth-of-type(odd) {background-color: rgba(0 0 0 / 0.1);}, tablonun gövdesindeki her tek sayıya yarı saydam siyah ekler ve <colgroup>'ta ayarlanan tüm arka plan efektlerinin gösterilmesine olanak tanır.

Tablolar varsayılan olarak duyarlı değildir. Bunun yerine, varsayılan olarak içeriklerine göre boyutlandırılır. Tablo düzeni stilinin çeşitli cihazlarda etkili bir şekilde çalışması için ek önlemler alınması gerekir. Tablo öğelerinin CSS görüntüleme özelliğini değiştiriyorsanız ARIA role özelliklerini ekleyin. Bu gereksiz gibi görünse de CSS display özelliği bazı tarayıcılarda erişilebilirlik ağacını etkileyebilir.

Verileri sunma

Tablo öğeleri, "kaybolmadan" satır ve sütunlar arasında gezinmeyi sağlamak için yardımcı teknolojiler tarafından kullanılan anlamsal anlamlara sahiptir. <table> öğesi sunu için kullanılmamalıdır. Bir listenin üzerinde başlık kullanmanız gerekiyorsa başlık ve liste kullanın. İçeriği birçok sütuna yerleştirmek istiyorsanız çok sütunlu düzeni kullanın. İçeriği ızgara şeklinde düzenlemek istiyorsanız CSS ızgara'yı kullanın. Tabloları yalnızca veriler için kullanın. Bunu şu şekilde düşünebilirsiniz: Verilerinizin bir toplantıda sunulabilmesi için elektronik tablo gerekiyorsa<table> seçeneğini kullanın. Keynote veya PowerPoint gibi sunu yazılımlarında bulunan özellikleri kullanmak istiyorsanız muhtemelen bir açıklama listesine ihtiyacınız vardır.

Tablo biçiminde veri sunmuyorsanız <table> kullanmayın. Sunu için 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 gerekiyor. Bu nedenle, bir sonraki adımda bu konuyu ele alacağız.

Öğrendiklerinizi test etme

Tablolarla ilgili bilginizi test edin.

Başlık olan hücreleri işaretlemek için hangi öğe kullanılır?

<th>
<header>
<caption>

Tablo içeren bir düzen için hangi bilgiler uygun olabilir?

Öğrencilerin ve 3 dönem boyunca aldıkları notların ayrıntılı olarak yer aldığı bir e-tablo.
Bazı bilimsel terimler ve açıklamaları.
Tarifin malzemeleri.