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:
<caption>
öğe<colgroup>
öğe<thead>
öğe<tbody>
öğe<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.
Başlık olan hücreleri işaretlemek için hangi öğe kullanılır?
<th>
<caption>
<header>
Hangi bilgiler tablo içeren düzen için uygun olabilir?