Лучший способ для создания таблицы HTML

Это кажется тривиальным, но есть определенные аспекты компьютера, и, следовательно, также HTML, которые иногда должны быть пересмотрены. Следует отметить, что W3C настоятельно рекомендую использовать таблицы для разработки макета сайта. Таблицы используются для ввода данных, il layout si fa con i div.

Таблицы не должны использоваться для определения содержания графики, поскольку это может вызвать проблемы для чтения с экрана (но и для ботов). В более, когда вы использовали для определения графика, таблицы могут заставить пользователь прокручивать по горизонтали для просмотра страницы таблицы, предназначенную для большего экрана. Чтобы минимизировать эти проблемы, авторы должны использовать CSS для управления макетом вместо таблиц.

Интересно, что W3C никогда не использовать императив (должен, не должен…), они знают, что хорошие манеры.

Сегодня мы видим некоторую таблицу статью (чтобы служить в качестве стола, а не как макет) и вариации на них. Они могут сделать свои собственные выводы.

Тег для заголовка: “`th`“

тег “th” Он служит для определения заголовка таблицы: в первой строке и / или первый столбец. Простейшая структура в настоящее время упала в неиспользование (без “th“) Это выглядит следующим образом:

<Таблица>  
  <тр>  
    <тд>Авто</тд>  
    <тд>модель</тд>  
    <тд>смещение</тд>  
  </тр>  
  <тр>  
    <тд>Opel</тд>  
    <тд>Corsa</тд>  
    <тд>1.2</тд>  
  </тр>  
  <тр>  
    <тд>Citroen</тд>  
    <тд>c2</тд>  
    <тд>1.1</тд>  
  </тр>  
</Таблица>

Что такого результата:

Авто	модель	смещение
Opel	Corsa	1.2
Citroen	c2	1.1

Для тех, кто не большого зрения это легко понять, о чем мы говорим, но кто должен полагаться на читатель экрана для интерпретации веб-страницы, она будет значительно невыгодном. Именно поэтому мы ввели теги “th“, означает “заголовок таблицы“. Этот тег определяет заголовок таблицы и отделяет его от данных таблицы (“td” – данные таблицы) и используется таким образом,:

<Таблица>  
  <тр>  
    <го>Авто</го>  
    <го>модель</го>  
    <го>смещение</го>  
  </тр>  
  <тр>  
    <тд>Opel</тд>  
    <тд>Corsa</тд>  
    <тд>1.2</тд>  
  </тр>  
  <тр>  
    <тд>Citroen</тд>  
    <тд>c2</тд>  
    <тд>1.1</тд>  
  </тр>  
</Таблица>

Это будет генерировать этот результат:

Авто	модель	смещение
Opel	Corsa	1.2
Citroen	c2	1.1

Теги для подписи: “`caption`“

Так же, как на фотографиях, Кроме того, для таблиц есть подпись. È possibile mostrare la didascalia sopra o sotto la tabella, СМЧ элемент, который позволяет позиционирование “caption-side” и принимает в качестве аргументов “top” o “bottom“. Однако тег “caption” это не является обязательным, в зависимости от обстоятельств, он может быть использован или менее.

При использовании должны быть размещены сразу после открывающего тега “table“.

<Таблица>
  <подпись>Сколько автомобилей паркуются в моем гараже?</подпись>
  <тр>  
    <го>Авто</го>  
    <го>модель</го>  
    <го>смещение</го>  
  </тр>  
  <тр>  
    <тд>Opel</тд>  
    <тд>Corsa</тд>  
    <тд>1.2</тд>  
  </тр>  
  <тр>  
    <тд>Citroen</тд>  
    <тд>c2</тд>  
    <тд>1.1</тд>  
  </тр>  
</Таблица>

Что такого результата:

Сколько автомобилей паркуются в моем гараже?
Авто	модель	смещение
Opel	Corsa	1.2
Citroen	c2	1.1

Атрибут суммировать содержимое таблицы: “`summary`“

В дополнение к тегу “caption” Вы можете использовать атрибут “summary” (связать с тегом “table“) кратко объяснить содержание таблицы. Эта опция не видна пользователю, который видит таблицу, служит для тех, кто видит не использует для чтения с экрана, чтобы понять сразу, если таблица может повлиять ли или нет.

Правая структура является следующим:

<Сводная таблица ="знак, модель и мощность двигателя автомобили, припаркованные в моем гараже">
  <подпись>Le auto del mio garage</подпись>
  <тр>
    <го>знак</го>
    <го>модель</го>
    <го>смещение</го>
  </тр>
  <тр>
    <тд>Opel</тд>
    <тд>Corsa</тд>
    <тд>1.2</тд>
  </тр>
  <тр>
    <тд>Citroen</тд>
    <тд>c2</тд>
    <тд>1.1</тд>
  </тр>
</Таблица>

Результатом этих строк кода со стилем глобально применительно к этому сайту, в том, что:

Сколько автомобилей паркуются в моем гараже?
знак	модель	смещение
Opel	Corsa	1.2
Citroen	c2	1.1

Важно отметить, что атрибут “summary” Не видно глаз тех, кто по поиску, Это, тем не менее, как записано дополнительной информации ботами и лучшими показателями за столом и читает чтения с экрана, чтобы помочь пользователям с ослабленным зрением.

Заголовки сокращенные с атрибутом “`abbr`“

атрибут “abbr” Это еще один необязательный атрибут, если не ставится не влияет на структуру или функционирование таблицы. Содержание читают чтения с экрана, чтобы дать краткое определение для тех, у кого есть проблемы со зрением, что таким образом будет избежать чувств заголовков с небольшими различиями. атрибут “abbr” Он используется таким образом,:

<Сводная таблица ="знак, модель и мощность двигателя автомобили, припаркованные в моем гараже">
  <подпись>Le macchine del mio garage</подпись>
  <тр>
    <го сокр ="знак">Марка автомобиля</го>
    <го сокр ="модель">Модель автомобиля</го>
    <го сокр ="смещение">Двигатель автомобиля</го>
  </тр>
  <тр>
    <тд>Opel</тд>
    <тд>Corsa</тд>
    <тд>1.2</тд>
  </тр>
  <тр>
    <тд>Citroen</тд>
    <тд>c2</тд>
    <тд>1.1</тд>
  </тр>
</Таблица>

Соотнесите заголовки и данные: “`scope`“, “`id`” е “`headers`“

Таблицы достаточно далеко банальные виды, Это как дать понять читателю экрана корреляция между заголовками и данными. Исключим заголовок “знак” Это в нашей диаграмме, и изменять записи для бренда, чтобы они стали заголовком.

<Сводная таблица ="знак, модель и мощность двигателя автомобили, припаркованные в моем гараже">
  <подпись>Le auto del mio garage?</подпись>
  <тр>
    <тд></тд>
    <го>модель</го>
    <го>смещение</го>
  </тр>
  <тр>
    <го>Opel</го>
    <тд>Corsa</тд>
    <тд>1.2</тд>
  </тр>
  <тр>
    <го>Citroen</го>
    <тд>c2</тд>
    <тд>1.1</тд>
  </тр>
</Таблица>

И результат будет таким:

Сколько автомобилей паркуются в моем гараже?
	модель	смещение
Opel	Corsa	1.2
Citroen	c2	1.1

Добавляем атрибут “scope” для облегчения работы с программой чтения с экрана:

<Сводная таблица ="знак, модель и мощность двигателя автомобили, припаркованные в моем гараже">
  <подпись>Le auto del mio garage</подпись>
  <тр>
    <тд></тд>
    <го сфера ="седло">модель</го>
    <го сфера ="седло">смещение</го>
  </тр>
  <тр>
    <го сфера ="строка">Opel</го>
    <тд>Corsa</тд>
    <тд>1.2</тд>
  </тр>
  <тр>
    <го сфера ="строка">Citroen</го>
    <тд>c2</тд>
    <тд>1.1</тд>
  </тр>
</Таблица>

атрибут scope definisce una cella di intestazione e fornisce informazioni di intestazione per una colonna o riga:

col: intestazione per la colonna
row: intestazione per la riga

Aggiungendo scope con il valore col alle intestazioni della prima riga andiamo a indicare che sono le intestazioni per le celle sotto elencate.

Viceversa usando row indicheremo che le intestazioni si riferiscono alle celle della riga corrispondente (a destra).

атрибут scope supporta anche altri due valori:

colgroup: intestazioni per il gruppo di colonne che la contiene
rowgroup: intestazioni per il gruppo di righe che la contiene

Per i gruppi di colonne si utilizza l’elemento colgroup, mentre per i gruppi di righe possiamo usare thead, tfoot е tbody (che vedremo più avanti).

Un’altra tecnica per collegare i dati di una cella con le appropriate intestazione è imputare ad ogni intestazione un id univoco, poi aggiungere l’attributo header a ogni dato. Questo attributo contiene una lista separata da spazi degli id di ogni cella di intestazione che si applica ai dati di quella cella. Questa tecnica è più complicata e dovrebbe essere utilizzata solo quando ci sono dati che debbano essere collegati a più di due celle di intestazione, quando l’attributo scope è insufficiente ad esempio in tabelle molto complesse o irregolari.

Per illustrare questo esempio ho modificato la tabella.

Сколько автомобилей паркуются в моем гараже?
	смещение	Alimentazione	модель
	Dati tecnici		модель
Opel	1.2	GPL	Corsa
Citroen	1.1	Benzina	c2

Chiaramente questo metodo diventa complicato piuttosto in fretta, meglio usare l’attributo scope quando possibile.

Gruppi di righe: `thead`, `tfoot` е `tbody`

Le righe della tabella possono essere raggruppate in intestazioni (thead), pié di pagina (tfoot) e uno o più corpi (tbody). Ovviamente ogni gruppo di righe deve contenere una o più righe della tabella.

Se una tabella contiene una instestazione (thead), deve apparire prima delle sezioni footer (tfoot) e body (tbody). Se decidiamo di non usare l’intestazione o il footer l’elemento tbody это не является обязательным (ma neanche vietato, quindi lo usiamo a piacimento). La struttura della tabella con gruppi di righe somiglierà a questa:

<Таблица>
   <thead>
      <тр></тр>
      … righe relative all'header
   </thead>
   <tfoot>
      <тр></тр>
      … righe relative al footer
   </tfoot>
   <tbody>
      <тр></тр>
      … righe relative al body
   </tbody>
   <tbody>
      <тр></тр>
      … righe relative al body della seconda tabella
   </tbody>
   … altre sezioni body se necessarie
</Таблица>

Raggruppare le righe può essere vantaggioso per diverse ragioni:

semplifica applicare gli stili (CSS) delle sezioni thead, tfoot е tbody in modo indipendente, senza aggiungere classi o altro,
quando lanciamo la stampa di tabelle particolarmente lunghe alcuni browser (ad esempio quelli basati su gecko) ripetono l’informazione contenuta in thead е tfoot su ogni pagina stampata, rendendone più semplice la lettura,
separare le sezioni “header” е “нижний колонтитул” dal body della tabella rende possibile per i browser di visualizzare lo scrolling del solo body.

Quali benefici

Può sembrare un lavoraccio creare delle tabelle accessibili in HTML, e in effetti per le tabelle complesse lo è. A volte è impossibile poterle creare a mano. Per le tabelle più semplici, comunque usare le celle di intestazione con l’attributo scope è più veloce e semplice.

Pare ovvio che chi utilizza tecnologie assistive come ad esempio gli screen reader ottengano un beneficio assoluto dalle tabelle ottimizzate per l’accessibilità. Provare a dare un senso a una tabella di dati grande e complessa semplicemente ascoltando una voce sintetizzata può essere molto difficile o addirittura impossibile. Semplificare e renderle accessibili è un dovere.

Meno ovvio è il beneficio ottenuto dal designer e dall’utente medio, ma una tabella accessibile è piena di markup a cui poter applicare stili CSS. Una tabella accattivante e ben visualizzata può rendere la tabella più semplice da leggere per tutti.

Questo articolo è apparso per la prima volta in inglese nel 2004 ed è abbastanza impressionante il fatto che sia ancora attuale nonostante i suoi 14 возраст.