Семантическая разметка для сложных или вложенных HTML-таблиц?

Ответ 1

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

Иногда, однако, вы сталкиваетесь с тем случаем, который HTML не может обрабатывать. Кажется, это один из них. HTML не имеет способа вложенности иерархических данных в таблицы с столбцами, которые не соответствуют другим столбцам таблицы. Итак, вам нужно сделать все, что у вас есть. На данный момент, беспокоиться о том, чтобы сделать его более семантическим, не покупает вас так много; вы делаете что-то довольно особенное, что другие таблицы стилей, программы для чтения с экрана и инструменты, вероятно, не будут знать, что делать, так что практически любое решение, которое вы придумали, не противоречит цели элементов вопрос в порядке.

Я думаю, что решение, о котором вы говорите, - это лучшее, что вы можете сделать. Отметьте те строки, содержащие вложенные таблицы, классом, который указывает, что они не похожи на другие строки, и назовите это хорошо. Если вы хотите, вы можете сгруппировать их вместе с строками, к которым они прикреплены, с использованием нескольких элементов <tbody>:

<table>
<tbody>
  <tr><td>Shadrach  <td>M  <td>Banana     <td>12
  <tr class=nested><td colspan=4>
    <table>...</table>
<tbody>
  <tr><td>Meshgah   <td>M  <td>Apple      <td>34
<tbody>
  <tr><td>Abednego  <td>M  <td>Persimmon   <td>0
</table>

Ответ 2

Если вы поместите таблицу в первый столбец строки подробностей, сделайте ее охватывающей все четыре столбца и добавьте дескриптивные заголовки таблиц в таблицу, тогда это должно предоставить некоторую базовую семантику, чтобы связать таблицу подробностей с столбцом, который он описывает.

Я думаю, что это случай, когда традиционная семантика HTML не может передать то, что вы ищете, и вам следует подумать об использовании XHTML и расширении ее с помощью Атрибуты ARIA, изложенные W3C WAI, чтобы расширить существующую семантику XHTML для описания сложных структур, подобных тем, которые вы пытаетесь создать, Возможно, если вы добавили в ячейку атрибут aria-describedby, который предоставит дополнительную семантику, которую вы ищете:

<table>
     <thead>
        <tr>
          <th>column 1</th>
          <th>column 2</th>
          <th>column 3</th>
          <th>column 4</th>
        </tr>
     </thead>
     <tbody>
        <tr>
          <td id="master" aria-describedby="detail">Shadrach</td>  
          <td>M</td>  
          <td>Banana</td>     
          <td>12</td>
        </tr>
        <tr>
          <td colspan="4">
             <table id="detail">
                <tbody>
                   <tr>
                      <td>arms</td>
                      <td>blue</td>
                      <td>2</td>
                   </tr> 
                   <tr>
                      <td>legs</td>
                      <td>yellow</td>
                      <td>3</td>
                   </tr>
                </tbody>
             </table>
          </td>
        </tr>
     </tbody
 </table>

Существует множество арий-ролей и атрибутов, которые могут оказаться полезными, например treegrid роль для таблиц с иерархическими макетами и расширение строк. Взгляните на рабочий проект ARIA, и я уверен, что вы найдете что-то, что может описать то, что вы пытаетесь передать.

Ответ 3

Есть ли лучший, более семантический путь?

Да - не помещайте туда вложенную таблицу. Руки/Ноги должны быть либо больше столбцов на исходной таблице, либо отдельной таблицы. Затем используйте CSS для стиля, подходящего ¹.

¹ Нет, я не знаю, как вы могли бы получить один и тот же визуальный эффект с семантическим HTML и CSS. Но это не главное. Вы ищете семантическую разметку, а не то, как она соответствует требованиям UX (подсказка: если вы используете таблицы для макета (как и вы), то для визуальных пользователей это только UX).

Ответ 4

Руководство по таблицам WAI дает очень простое введение в работу с сложными таблицами. Пример из исходного сообщения может иллюстрировать своего рода многоуровневую таблицу.

Ответ 5

Если у вас нет явной семантики для вашей информации, нет единого способа сделать это. Кажется, что внутри строк есть древовидная структура, и некоторые вложенные DIV могут быть полезны. Таким образом, может быть возможно иметь дочерний элемент DIV ячейки строки, хотя с ним будет сложно работать. В качестве альтернативы вы можете попытаться создать вложенные таблицы (ТАБЛИЦА как содержимое или ячейка).

Если вы хотите сохранить сложную семантику, тогда HTML не лучший способ сделать это, и, возможно, вам следует использовать представление XML или RDF. Они могут быть преобразованы в HTML для отображения при сохранении семантики.