Tablolar

HTML tabloları, satır ve sütunlarla tablo verilerini gösterir. Gösterdiğiniz içeriğe ve kullanıcılarınızın bu içerikle ilgili ihtiyaçlarına göre bir <table> kullanmayı tercih etmelisiniz. Veriler sunuluyor, karşılaştırılıyor, sıralanıyor, hesaplanıyor veya çapraz referans veriliyorsa <table> büyük ihtimalle doğru seçimdir. Küçük resimlerden oluşan büyük bir grup gibi tablo biçiminde olmayan içerikleri düzenlemek istiyorsanız tablolar uygun değildir. Bunun yerine, resimlerin listesini oluşturun ve CSS ile ızgaraya stil verin.

Bu bölümde, tabloyu oluşturan tüm öğelerin yanı sıra tablo verilerini sunarken dikkate alınması gereken bazı erişilebilirlik ve kullanılabilirlik özelliklerini ele alıyoruz. Learn HTML, CSS'ye odaklanmasa da tabloya özgü bazı CSS özelliklerini ele alacağız. CSS hakkında daha fazla bilgi edinmek için CSS'yi öğrenin başlıklı makaleyi inceleyin.

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 gezinmeye sahipse veya kullanıcının hücre sırasını yeniden düzenlemesine izin veriyorsa role="grid" olarak 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 altbilgileri (<tfoot>) bulunur. Bunların her biri tablo satırlarından (<tr>) oluşur. Satırlar, tüm verileri içeren tablo başlığı (<th>) ve tablo verisi (<td>) hücrelerini içerir. DOM'da, bunların öncesinde iki ek özellik bulabilirsiniz: tablo başlığı (<caption>) ve sütun grupları (<colgroup>). <colgroup> öğesinin span özelliği 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ıdır ancak önerilir) ele alacak, ardından satırlara, tablo başlığı hücrelerine ve tablo verisi hücrelerine göz atacağız. <colgroup> en son ele alınacaktır.

Tablo açıklaması

Tablo adlandırmada tercih edilen yöntem, anlamsal öğe olan <caption>'dir. <caption>, açıklayıcı ve programatik olarak ilişkilendirilmiş bir tablo başlığı sağlar. Bu özellik, varsayılan olarak tüm kullanıcılar tarafından görülebilir ve kullanılabilir.

<caption> öğesi, <table> öğesine yerleştirilmiş ilk öğe olmalıdır. Tablo başlığı eklemek, tüm kullanıcıların tablonun amacını çevreleyen metni okumak zorunda kalmadan hemen anlamasını 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 yoktur.

Açıklama, tablonun dışında görünür. Altyazının konumu, kullanımdan kaldırılan align özelliğini kullanmaktan daha iyi bir uygulama olan CSS caption-side özelliğiyle ayarlanabilir. Bu, altyazıyı üste ve alta yerleştirebilir. inline-start ve inline-end ile sol ve sağ tarafa konumlandırma henüz tam olarak desteklenmemektedir. Varsayılan tarayıcı sunumu Top'tır.

Tercihen, veri tablolarında net başlıklar ve bir altyazı olmalı, ayrıca neredeyse kendi kendini açıklayacak kadar net olmalıdır. Tüm kullanıcıların aynı bilişsel yeteneklere sahip olmadığını unutmayın. Tablo "bir noktaya değindiğinde" veya başka bir şekilde yorumlanması gerektiğinde tablonun ana noktasının ya da işlevinin kısa bir özetini verin. Özetin nereye yerleştirileceği, uzunluğuna ve karmaşıklığına bağlıdır. Kısa ise altyazının iç metni olarak kullanın. Daha uzunsa başlıkta özetleyin ve özeti tablodan önceki paragrafta sağlayın. İkisini aria-describedby özelliğiyle ilişkilendirin. Tabloyu <figure> içine, özeti ise <figcaption> içine yerleştirmek de bir seçenektir.

Veri bölümleme

Tabloların içeriği en fazla üç bölümden oluşur: sıfır veya daha fazla tablo başlığı (<thead>), tablo gövdesi (<tbody>) ve tablo altbilgisi (<tfoot>). Her biri isteğe bağlıdır ve her birinden sıfır veya daha fazla bölüm 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 kancaları sağlar. Örneğin, üstbilgi içerikleri sabitlenebilirken, <tbody> içerikleri kaydırılabilir. Bu üç kapsayıcı öğeden birine yerleştirilmeyen satırlar, örtülü olarak <tbody> içine sarılır. Üçünün de aynı örtülü rolü rowgroup vardır. Bu üç öğenin hiçbirinde öğeye özel özellikler yoktur.

Şu ana kadar elde ettiklerimiz:

<table>
  <caption>MLW Students</caption>
  <thead></thead>
  <tbody></tbody>
  <tfoot></tfoot>
</table>

<tfoot> öğesinin, erişilebilirlik nedeniyle başlangıçta <thead> öğesinden hemen sonra ve <tbody> öğesinden önce gelmesi belirtilmişti. Bu nedenle, eski kod tabanlarında bu sezgisel olmayan kaynak sırasıyla karşılaşabilirsiniz.

Tablo içeriği

Tablolar; tablo başlıkları, gövdeleri ve altbilgileri olarak ayrılabilir. Ancak tablolar tablo satırları, hücreleri ve içerikleri içermiyorsa 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 içeriği <th> tablo üstbilgi hücresinde ortalanmış ve kalın olarak gösterir. Bu varsayılan stiller ve tüm stil oluşturma işlemleri, tek tek hücrelerde, satırlarda ve hatta <table> içinde kullanılabilen, desteği sonlandırılmış özellikler yerine CSS ile daha iyi kontrol edilir.

Hücreler arasında ve hücrelerin içinde dolgu eklemek, kenarlıklar ve metin hizalama için özellikler vardı. Bir hücrenin içeriği ile kenarlığı arasında ve bitişik hücrelerin kenarlıkları arasında kalan alanı tanımlayan cellpadding ve cellspacing özellikleri sırasıyla CSS border-collapse ve border-spacing özellikleriyle ayarlanmalıdır. border-collapse: collapse ayarlanmışsa Border-spacing'nın etkisi olmaz. border-collapse: separate; ayarlanmışsa boş hücreleri empty-cells: hide; ile tamamen gizlemek mümkündür. Tabloları biçimlendirme hakkında daha fazla bilgi edinmek için tabloyla ilgili CSS stillerini içeren etkileşimli bir slayt destesini inceleyin.

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

Bu örnekte bir altyazı, bir tablo başlığı ve bir tablo gövdesi var. Başlık, üç başlık <th> hücresi içeren bir satıra sahiptir ve böylece üç sütun oluşturur. Gövde üç satırlık veri 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 olarak tanımlanan ARIA rolleriyle birlikte anlamsal bir anlam taşır. Numaralandırılmış scope özelliğinin değerine bağlı olarak, hücreyi tablo hücrelerinin sütunu veya satırının başlığı 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ız için 1956 hücresinde iki başlık var: Yıl ve Lou Minious. Bu ilişkilendirme, "1956"nın "Lou Minious"un mezuniyet "yılı" olduğunu gösterir. Bu örnekte, tablonun tamamını görebildiğimiz için ilişkilendirme görsel olarak belirgindir. <th> kullanıldığında, başlık sütunu veya satırı görünümden kaydırılmış olsa 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 bir tabloda numaralandırılmış varsayılan değerler işe yarar. scope için diğer değerler arasında rowgroup ve colgroup bulunur. Bu değerler, karmaşık tablolarda kullanışlıdır.

Hücreleri birleştir

MS Excel, Google E-Tablolar ve Numbers'a benzer şekilde, birden fazla hücreyi tek bir hücrede birleştirebilirsiniz. Bu işlem, HTML colspan ve rowspan özellikleri ile yapılabilir:

• colspan, tek bir satırdaki iki veya daha fazla bitişik hücreyi birleştirir.
• rowspan, birleştirilmiş satırlarınızın ilkindeki hücreye eklendiğinde satırlar arasındaki hücreleri birleştirir.

Bu örnekte, tablo başlığı iki satır içeriyor. İlk başlık satırında dört sütunu kapsayan üç hücre bulunur: 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çeriyor. Bu işlem, hücreyi hemen altındaki bitişik 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ütunların hücreleridir. İlk satırdaki ilk ve son sütunlardaki hücreler iki satırı kapsadığından ilk veya son sütun için hücre bildirilmez.

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

Bu durumda headers özellikleri gerekli olmayabilir ancak tablolarınızın karmaşıklığı arttıkça bu özellikleri hatırlamanız önemlidir. Başlıkların veya hücrelerin birleştirildiği ya da ikiden fazla sütun veya satır başlığı seviyesinin bulunduğu tablolar gibi karmaşık yapıya sahip tablolarda, ilişkili başlık hücrelerinin açıkça tanımlanması gerekir. Bu tür karmaşık tablolarda, her veri hücresini karşılık gelen her başlık hücresiyle açıkça ilişkilendirin. Bunu, headers özelliği değeri olarak, ilişkili tüm başlıkların boşlukla ayrılmış id değerlerinin listesini kullanarak yapın.

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ın anlaması zor olabilir. Bilişsel olarak ve ekran okuyucu desteği açısından, kapsam ve başlık eklenmese bile, birleştirilmiş hücrelerin olmadığı veya çok az olduğu daha basit tablolar daha iyi anlaşılır. Ayrıca 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ıyorsa sütun gruplandırması <table> içinde, <caption>'den hemen sonra ve herhangi bir tablo verisinden önce yerleştirilmelidir. Birden fazla sütuna yayılıyorsa span özelliğini kullanın.

Tablo için içerik ana hattı 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>, tablo erişilebilirliğini etkileyecek anlamsal anlam içermiyor. Ancak sütunları CSS ile şekillendirmenize (ör. genişlikleri ayarlama) yardımcı olurlar.

<td> ve <th> ile ilgili stiller, <col> stillerini geçersiz kılar. CodePen'de tablonun bazı satırlarını birleştirmek için colspan değerini ayarladık ancak tüm satırları birleştirmedik. <tr> öğesine nth-child CSS seçicisi uygulanırsa birleştirilen satır veya sütuna bağlı olarak bu durum stili etkileyebilir.

Maalesef yalnızca birkaç özellik desteklenmektedir. Stiller hücrelere aktarılmaz ve <col> içeren hücreleri hedeflemenin tek yolu :has() ilişkisel seçici gibi karmaşık bir seçici kullanmaktır.

Hem <table> hem de <colgroup> arka plan rengine sahipse <colgroup> öğesinin background-color üstte olur. Çizim sırası: tablo, sütun grupları, sütunlar, satır grupları, satırlar, hücreler en son ve en üstte olacak şekilde, tablo katmanlarının şemasında gösterildiği gibidir. <td> ve <th> öğeleri, <colgroup> veya <col> öğelerinin alt öğeleri değildir ve bu öğelerin stilini devralmaz.

Tabloya şerit eklemek için CSS yapısal seçiciler 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 siyah renk eklerken <colgroup> üzerinde ayarlanan arka plan efektlerinin görünmesine izin verir.

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 ek önlemler alınması gerekir. Tablo öğelerinin CSS görüntüleme özelliğini değiştiriyorsanız ARIA role özelliklerini ekleyin. Bu durum gereksiz gibi görünse de CSS display özelliği bazı tarayıcılarda erişilebilirlik ağacını etkileyebilir.

Verileri sunma

Tablo öğeleri, yardımcı teknolojiler tarafından kullanılan semantik anlamlara sahiptir. Bu anlamlar, kullanıcıların kaybolmadan satırlar ve sütunlar arasında gezinmesine yardımcı olur. <table> öğesi sunum için kullanılmamalıdır. Bir listenin üzerinde başlık kullanmanız gerekiyorsa başlık ve liste kullanın. İçeriği birden çok sütunda düzenlemek istiyorsanız çok sütunlu düzeni kullanın. İçeriği ızgara şeklinde düzenlemek istiyorsanız CSS ızgarasını kullanın.

Yalnızca veriler için tablo kullanın.

Şöyle düşünebilirsiniz: Verilerinizin bir toplantıda sunulması için e-tabloya ihtiyaç duyuluyorsa <table> simgesini kullanın. Google Slaytlar veya PowerPoint gibi sunum yazılımlarında bulunan özellikleri kullanmak istiyorsanız muhtemelen bir açıklama listesine ihtiyacınız vardır.

Kısacası: Tablo verileri sunmuyorsanız <table> kullanmayın. Sunum için tablo kullanıyorsanız role="none" ayarını yapın.

Birçok geliştirici, formları düzenlemek için tabloları kullanır ancak bu gereksizdir. HTML formları hakkında bilgi sahibi olmanız gerekir.

Anlayıp anlamadığınızı kontrol etme

Tablolarla ilgili bilginizi test edin.