Tablolar

HTML tabloları, satır ve sütunlarla tablo halindeki verileri görüntülemek için kullanılır. <table> kullanma kararı, aşağıdakilere göre verilmelidir: ve kullanıcılarınızın ayarları göz önünde bulundurmalısınız. Veriler sunuluyorsa, karşılaştırılıyorsa, sıralanıyorsa, karşılaştırma yapılmışsa <table> muhtemelen doğru seçimdir. Tablo olmayan içerikleri düzenli bir şekilde düzenlemek istiyorsanız uygun değildir. Bunun yerine, resimlerden oluşan bir liste oluşturun ve ızgarayı CSS ile biçimlendirin.

Bu bölümde tabloyu oluşturan tüm öğelerin yanı sıra bazı erişilebilirlik ve kullanılabilirlik özelliklerini ele alacağız. bazı önemli noktaları göz önünde bulundurmanız gerekir. HTML Öğrenme temelde CSS ile ilgili olmasa da temelde CSS'ye özel bir kurs vardır CSS'yi öğrenmek için tabloya özgü bazı CSS özelliklerini ele alacağız.

Tablo öğeleri, sırasıyla

<table> etiketi, tüm tablo öğeleri dahil olmak üzere tablo içeriğini sarmalar. <table> öğesinin örtülü ARIA rolü table; yardımcı teknolojiler, bu öğenin tablodaki verileri içeren satır ve sütunlarda görebilirsiniz. Tabloda bir seçim durumu korunuyorsa, iki boyutlu gezinme özelliği varsa veya kullanıcının hücre sırasını değiştirmesine izin veriliyorsa role="grid" değerini ayarlayın. grid öğesinin 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, tablo başlığı (<th>) ve tablo verisi (<td>) hücreleri içerir. Bu hücreler de tüm verileri içerir. DOM'de bunlardan önce iki ek özellik bulabilirsiniz: tablo başlığı (<caption>) ve sütun grupları (<colgroup>). Şuna bağlı olarak: <colgroup> öğesinin bir span özelliğine sahip olup olmadığına bağlı olarak, iç içe geçmiş tablo sütunu (<col>) öğeleri içerebilir.

Tablonun alt öğeleri sırasıyla şu şekildedir:

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

<table> öğelerini ele alacağız. bunların tümü isteğe bağlı ancak önerilen alt kategorilerdir. Ardından, satırlara, tablo başlığı hücrelerine ve tablo veri hücrelerini tıklayın. Son olarak <colgroup> incelenecek.

Tablo başlığı

Yerel, anlamsal bir öğe olan <caption> tercih edilir yöntemidir. <caption>, açıklayıcı, programatik olarak ilişkilendirilmiş bir tablo başlığı sağlar. Evet tüm kullanıcılara görünür ve varsayılan olarak kullanılabilir.

<caption> öğesi, <table> öğesinde iç içe yerleştirilmiş ilk öğe olmalıdır. Bunu eklemek, tüm kullanıcıların etrafındaki metni okumak zorunda kalmadan tablonun amacını hemen değiştirebilir. Alternatif olarak aria-label veya aria-labelledby kullanabilirsiniz Altyazı olarak erişilebilir bir ad sağlamak için <table> üzerinde. <caption> öğesinin öğeye özgü özellikleri yok.

Başlık, tablonun dışında görünür. Altyazının konumu, CSS caption-side özelliğiyle ayarlanabilir. kullanımdan kaldırılan align özelliğinin kullanılmasından daha iyi bir uygulamadır. Bu sayede altyazıyı en üste ve en alta yerleştirebilirsiniz. Sol ve sağ inline-start ve inline-end ile yan konumlandırma henüz tam olarak desteklenmemektedir. Üst, varsayılan tarayıcı sunusudur.

Tercihen, veri tablolarında net başlıklar ve bir başlık olmalı, hemen hemen anlaşılabilecek kadar basit olmalıdır. Lütfen unutmayın: Tüm kullanıcılar aynı bilişsel yeteneklere sahip olmayabilir. Tablo "bir noktaya parmak basıyorsa" veya başka bir şekilde yorumlanması gerekiyorsa bir tablonun ana noktasının veya işlevinin kısa özeti. Ö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 özeti Bu paragraf, tablonun önündeki aria-describedby ile ilişkilendirilmiştir. özelliğini gönderin. Tabloyu <figure> içine koymak ve özeti <figcaption> içine yerleştirmek de başka bir seçenektir.

Verileri bölümlere ayırma

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 altbilgileri (<tfoot>). Bunların tümü isteğe bağlıdır ve her birinden sıfır veya daha fazlası desteklenir.

Bu öğeler, tablonun erişilebilirliğine yardımcı olmaz veya onu engellemez, ancak kullanılabilirlik açısından yararlıdır. Bu özellikler stil kancaları. Örneğin, başlık içerikleri yapışkan yapılabilir, <tbody> içerikleri kaydırmak için yapılabilir. Bu üç içeren öğeden birinde iç içe yerleştirilmeyen satırlar <tbody> içine yerleştirilir. Bunların üçü de aynı örtülü rolü (rowgroup) paylaşır. Bu üç öğenin hiçbiri öğeye özgü özellik içermiyor.

Şu ana kadar yaptıklarımız:

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

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

Tablo içeriği

Tablolar, tablo başlıklarına, gövdelere ve altbilgilere ayrılabilir. Ancak tablolar, gövdeler ve alt bilgiler için Tablo satırlarını, hücreleri ve içeriği barındırır. Her tablo satırında (<tr>) bir veya daha fazla hücre vardır. Hücre bir başlık hücresiyse <th> kullanın. Aksi durumda <td> politikasını kullanın.

Kullanıcı aracısı stil sayfaları, genellikle bir <th> tablo başlığı hücresindeki içeriği ortalanmış ve kalın olarak görüntüler. Bu varsayılan stiller, ve tüm stillerin tek tek hücrelerde kullanılabilir olan kullanımdan kaldırılan özellikler yerine CSS ile kontrol edilmesi en iyisidir. satır ve hatta <table>.

Hücreler arasına ve hücrelerin içine dolgu eklemek, kenarlıklar ve metin hizalaması için özellikler mevcuttu. Hücre dolgusu ve hücre ilerleme hızı, hücrenin içeriği ile kenarlığı ve bitişik hücrelerin kenarlıkları arasındaki boşluğu tanımlayan kurallar ayarlanmalıdır. CSS sınır-daraltma ve border-spacing değerleriyle özellikleri arasında geçiş yapın. border-collapse: collapse ayarlanırsa Border-spacing işleminin etkisi olmaz. Eğer border-collapse: separate; ise ayarlandığında, empty-cells: hide; ile boş hücreleri tamamen gizleyebilirsiniz. Stil tabloları hakkında daha fazla bilgi için tabloyla ilgili CSS stillerinin etkileşimli slayt sunumu.

Bazı özellikleri daha belirgin hale getirmek için örneklerde tabloya ve her bir hücreye CSS içeren bir kenarlık ekledik:

Bu örnekte, bir başlık, bir tablo başlığı ve bir tablo gövdesi var. Başlıkta üç başlık <th> hücresi içeren bir satır vardır. Böylece üç sütun oluşturulur. Gövde üç satır veri içeriyor: İlk hücre, satır için bir başlık hücresi olduğundan <td> yerine <th> hücresini kullanıyoruz.

<th> hücresi, columnheader şeklinde örtülü ARIA rolleriyle anlamsal anlama sahiptir veya satır başlığı ekleyin. Hücreyi, tablo hücreleri sütunu veya satırı için başlık olarak tanımlar. , numaralandırılmış scope özelliğinin değerine bağlıdır. scope açıkça ayarlanmazsa tarayıcı varsayılan olarak col veya row değerini alır. 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 "1956"nın , "yıl" "Lou Minious" mezuniyeti. Bu örnekte, tablonun tamamını görebildiğimiz için ilişkilendirme görsel olarak belirgindir. <th> kullanılması, başlık sütunu veya satır görünümün dışına kaydırılsa bile ilişkilendirmeyi sağlar. Ülkelerde açık bir şekilde <th scope="col">Year</th> ve <th scope="row">Lou Minious</th> gibi basit bir tabloyla numaralandırılmış varsayılan değerler işe yarar. scope için diğer değerler ise karmaşık tablolarda kullanışlı olan rowgroup ve colgroup değerini içerir.

Hücreler birleştiriliyor

MS Excel, Google E-Tablolar ve Sayılar'a benzer şekilde, birden fazla hücreyi tek bir hücrede birleştirmek mümkündür. 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, satırlar arasındaki hücreleri birleştirmek için kullanılır. en üst satırdaki hücreye yerleştiriliyor.

Bu örnekte, tablo başlığı iki satır içermektedir. İlk başlık satırı, dört sütunu kapsayan üç hücre içeriyor: ortadaki hücre colspan="2" var. Bu işlem, bitişik iki hücreyi birleştirir. İlk ve son hücreler rowspan="2" içeriyor. Bu işlem, hücreyi hücreyle birleştirir sonraki satıra ekleyin.

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ütunlar iki satıra yayıldığından, ilk veya son sütun için hiçbir hücre bildirilmedi.

Bir hücrenin tek başına scope özellikleri tarafından ayarlanamayan ilişkilendirmelere sahip birden fazla başlık hücresiyle tanımlandığı durumlarda headers özelliğini, ilişkili üstbilgilerin boşlukla ayrılmış bir listesiyle birlikte ekleyin. Bu örnek daha karmaşık bir tablo olduğundan, scope özelliğine sahip üstbilgilerin kapsamına girer. Daha da kolay anlaşılması için her hücreye headers özelliğini ekledik.

headers özelliklerinin bu kadar basit bir kullanım örneğinde muhtemelen gerekli olmasa da özellikler araç kemerinizde büyür. Başlıkların veya hücrelerin birleştiği ya da daha fazlasıyla ilişkili tablolar gibi karmaşık yapılara sahip tablolar iki düzeyden daha fazla sütun veya satır başlığı içeriyorsa ilişkili başlık hücrelerinin açık bir şekilde tanımlanmasını gerektirir. Böyle karmaşık tablolarda her veri hücresini karşılık gelen her başlık hücresiyle, ilişkili tüm üstbilgilerin boşlukla ayrılmış id değerlerinin bir listesiyle ilişkilendirme (headers özelliğinin değeri olarak)

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

Bununla birlikte, karmaşık tablo yapılarını sadece ekran okuyucu kullanıcılarının değil, tüm kullanıcıların anlaması zor olabilir. Bilişsel olarak Ekran okuyucu desteği açısından bakıldığında, kapsam ve başlıklar eklenmese bile geniş bir alana yayılmış hücre sayısının çok az olduğu veya hiç olmadığı daha basit tablolar, durumlarda işe yarar. Yönetmesi de daha kolaydır!

Tabloların stilini belirleme

Daha önce kısaca değinilen ve görece daha az anlaşılan iki öğe vardır: sütun grubu, <colgroup>, öğe ve tek alt öğesi olan boş <col> sütun öğesidir. İlgili içeriği oluşturmak için kullanılan <colgroup> öğesi, tablodaki sütun gruplarını veya <col> öğelerini tanımlamak için kullanılır.

Kullanılıyorsa sütun gruplaması, <table> içinde, <caption> etiketinden hemen sonra ve tüm tablo verilerinden hemen önce iç içe yerleştirilmelidir. Bunlar birden fazla sütunu kapsıyorsa span özelliğini kullanın.

Bir tablonun içerik anahat sırası genellikle aşağıdaki gibidir; <table> ve <caption>, şunları içermelidir:

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

Ne <colgroup> ne de <col>, tabloyu daha erişilebilir hale getirmeye yardımcı olma açısından anlamsal bir anlama sahip değil, ancak sınırlı sütun stiline (CSS ile sütun için genişlik ayarlama dahil) yöneliktir.

<col> stilleri, ilgili stili geçersiz kılan <td> veya <th> stili olmadığı sürece bir sütunun stilini ayarlar. Örneğin, <colspan>, bir tablonun bazı satırlarındaki hücreleri birleştirmek için kullanılır ancak tüm satırlarda kullanılmaz. tr > *:nth-child(8) gibi bir seçicinin Örneğin, her satırın 8. alt sütununu seçer, 8. sütunu tamamen veya birkaç satır için 8. sütunu vurgular. ancak hangi satır veya sütun hücrelerinin birleştirildiğine bağlı olarak, 9. ve 10. sütun hücrelerinin dağılması görülebilir.

Maalesef yalnızca birkaç özellik desteklenmektedir. Stiller hücrelere devralınmaz ve <col> özelliğini kullanmanın tek yolu vardır. öğesi, :has() ilişkisel seçici dahil karmaşık bir seçiciye sahiptir.

Hem <table> hem de <colgroup> öğesinin arka plan rengi varsa <colgroup> öğesinin background-color öğesi en üstte olur. Çizimin sırası şu şekildedir: tablo şemasında gösterildiği gibi, tablo, sütun grupları, sütunlar, satır grupları, satırlar, hücreler en sonda ve en üstte yer alır. katmanları arasından seçim yapabilirsiniz. <td> ve <th> öğeleri, <colgroup> veya <col> öğelerinin alt öğesi değil ve stillerini devralmaz.

Bir tabloyu çıkarmak için CSS yapısal seçicileri 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 bir renk ekler ve <colgroup> üzerinde ayarlanan arka plan efektlerinin görünmesini sağlar.

Tablolar varsayılan olarak duyarlı değildir. Bunun yerine, varsayılan olarak içeriklerine göre boyutlandırılır. Tablo almak için ek önlemler gerekiyor düzen stilinin çeşitli cihazlarda verimli şekilde çalışmasını sağlar. Tablo öğeleri için CSS görüntüleme özelliğini değiştiriyorsanız ARIA role özelliklerini içerir. Bu gereksiz gibi görünse de, CSS display özelliği bazı tarayıcılardaki erişilebilirlik ağacını etkileyebilir.

Verileri sunma

Tablo öğeleri, yardımcı teknolojiler tarafından satırlar ve sütunlar arasında gezinmeyi sağlamak için kullanılan anlamsal anlamlara sahiptir “kayıp” demeden. <table> öğesi, sunum için kullanılmamalıdır. Listenin üzerinde bir başlığa ihtiyacınız varsa başlık kullanın ve bir liste oluşturun. İç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. Yalnızca veriler için tablo kullanın. Şöyle düşünün: Verilerinizin toplantıda sunulması için bir e-tablo gerekiyorsa <table> kullanın. Keynote veya Powerpoint gibi sunu yazılımında bulunan özellikleri kullanmak istiyorsanız muhtemelen bir açıklama listesine ihtiyacınız olacaktır.

Tablo sütunlarını sıralamak JavaScript'in amacı olsa da kullanıcılara sütunun sıralanabilir olduğunu bildirmek için başlıklarınızı işaretlemek HTML'nin çalışma alanıdır. Kullanıcılarınıza tablo sütunlarının ikonların artan, azalan veya sıralanmamış şekilde sıralanabileceğini bildirin. Şu anda sıralanmış olan sütun aria-sort özelliğini, sıralama yönünün numaralandırılmış değeriyle birlikte ekleyin. <caption>, sıralama ölçütü güncellemelerini aria-live ve bir Dinamik olarak güncellenen ve ekran okuyucu kullanıcılarının göreceği bir aralık. Sütun, başlık içeriği tıklanarak sıralanabileceğinden başlık içeriği bir <button> olmalıdır.

Tablo verileri sunmuyorsanız <table> kullanmayın. Sunu 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 böyle bir şeye gerek yoktur. Ancak HTML formları hakkında bilgi sahibi olmanız gerekir. Bu konuyu sonraki bölümde ele alacağız.

Öğrendiklerinizi sınayın

Tablolar hakkındaki bilginizi test edin.