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

Question

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

Вот конкретный пример. Первая строка содержит список дополнительной информации, прилагаемой к ней о руках и ногах.

 
Shadrach M Banana  12 
    Arms Blue 2 
    Legs Yellow 3 
Meshgah M Apple  34 
Abednego M Persimmon 0 

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

 
+-------+--+--------+-----+ 
|  | |  |  | 
+-------+--+--------+-----+ 
| +-------+------+-+  | 
| |  |  | |  | 
| +-------+------+-+  | 
| |  |  | |  | 
| +-------+------+-+  | 
+-------+--+--------+-----+ 
|  | |  |  | 
+-------+--+--------+-----+ 
|  | |  |  | 
+-------+--+--------+-----+ 

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

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

Answer 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> 

Answer 2

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

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

Answer 3

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

Я думаю, что это тот случай, хотя, где традиционные HTML Семантика не в состоянии передать то, что вы ищете, и вы должны думать о том, чтобы использовать XHTML и расширяя его ARIA attributes выложенных в 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, и я уверен, что вы найдете что-то, что может описать то, что вы пытаетесь передать.

Answer 4

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

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

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

Answer 5

WAI's tables tutorial содержит очень простое введение в работу с сложными таблицами. Пример из исходного сообщения может иллюстрировать вид multi-level table.