Семантическая разметка для сложных или вложенных HTML-таблиц?
Лучший ответ, к сожалению, зависит от того, что Вы пытаетесь выполнить со своими мягкими удалениями и базой данных, в которой Вы реализуете это.
В SQL Server, лучшее решение состояло бы в том, чтобы использовать deleted_on/deleted_at столбец с типом SMALLDATETIME или ДАТЫ И ВРЕМЕНИ (в зависимости от необходимой гранулярности) и сделать тот столбец nullable. В SQL Server данные заголовка строки содержат ПУСТУЮ битовую маску для каждого из столбцов в таблице, таким образом, это незначительно быстрее для выполнения, ЯВЛЯЕТСЯ ПУСТЫМ или NOT NULL, чем это должно проверить значение, сохраненное в столбец.
, Если у Вас есть большой объем данных, Вы захотите изучить разделение Ваших данных, или через саму базу данных или через две отдельных таблицы (например, продукты и ProductHistory) или посредством индексного представления.
я обычно избегаю полей признака как is_deleted, is_archive, и т.д. потому что они только несут одну часть значения. nullable deleted_at, archived_at поле обеспечивает дополнительный уровень значения себе и тому, кто бы ни наследовал Ваше приложение. И я избегаю полей битовой маски как чумы, так как они требуют понимания того, как битовая маска была создана для схватывания любого значения.
4 ответа
Одна вещь, которую вы должны спросить у себя, пытаясь сделать разметку более семантичным является то, с какой целью вы это делаете. Семантическая разметка имеет ценность, потому что ее проще стилизовать и применять к ним разные таблицы стилей без необходимости настраивать их для разметки, которую вы используете. Он имеет ценность, потому что способствует доступности, облегчая программам чтения с экрана или альтернативным механизмам рендеринга его надлежащий анализ. А иногда это имеет значение, потому что поисковая система или другие автоматизированные инструменты могут извлекать из нее информацию.
Иногда, однако, вы сталкиваетесь с ситуацией, с которой HTML просто не может справиться. Кажется, это один из них. HTML не имеет возможности размещать иерархические данные в таблицах со столбцами, которые не t соответствуют другим столбцам таблицы. Итак, вам нужно делать все возможное с тем, что у вас есть. На этом этапе забота о том, чтобы сделать его более семантическим, не так уж много для вас; вы делаете что-то особенное, и другие таблицы стилей, программы чтения с экрана и инструменты, вероятно, не будут знать, что с ними делать, поэтому практически любое решение, которое вы придумаете, не полностью противоречит назначению элементов вопрос в порядке.
Я думаю, что решение, о котором вы говорите, - лучшее, что вы можете сделать. Отметьте эти строки, содержащие вложенные таблицы, классом, который указывает, что они не похожи на другие строки, и назовите это хорошим. Если хотите, вы можете сгруппировать их вместе со строками, к которым они прикреплены, используя несколько элементов Если вы поместите таблицу в первый столбец строки сведений, сделайте ее охватывающей все четыре столбца и добавьте описательную заголовки таблицы к таблице, тогда это должно обеспечить некоторую базовую семантику для связи таблицы подробностей с столбцом, который она описывает. Я думаю, что это тот случай, когда традиционная семантика HTML не может передать то, что вы ищете, и вам следует подумать об использовании XHTML и его расширении с помощью атрибутов ARIA , изложенных W3C WAI для расширения существующей семантики XHTML для описания сложных структур, подобных той, которую вы пытаетесь создать. Возможно, если вы добавите атрибут aria-describeby к ячейке, описанной в подробной таблице, это обеспечит дополнительную семантику, которую вы ищете: Существует множество ролей и атрибутов aria, которые могут оказаться полезными, например, роль treegrid для таблиц с иерархической компоновкой и расширяющимися строками. Просмотрите рабочий проект ARIA, и я уверен, что вы найдете что-то, что может описать то, что вы пытаетесь передать. Если у вас нет явной семантики для вашей информации, нет единого способа сделать это. Кажется, что у вас есть древовидная структура внутри строк, и некоторые вложенные DIV могут быть полезны. Таким образом, у ячейки строки может быть дочерний элемент DIV, хотя работать с ним будет сложно. В качестве альтернативы вы можете попытаться создать вложенные таблицы (ТАБЛИЦА в качестве содержимого или ячейки). Если вы хотите сохранить сложную семантику, то HTML - не лучший способ сделать это, и, возможно, вам следует использовать представление XML или RDF. Оба они могут быть преобразованы в HTML для отображения с сохранением семантики. Есть ли лучший, более семантический способ? Да, не помещайте туда вложенную таблицу. Руки / ноги должны быть либо несколькими столбцами в исходной таблице, либо отдельной таблицей вообще. Затем используйте CSS для подходящего стиля 1 . 1 Нет, я не знаю, как можно получить такой же визуальный эффект с семантическим HTML и CSS. Но дело не в этом. Вы ищете семантическую разметку, а не то, как привести ее в соответствие с тем, что вы считаете подходящим для UX (подсказка: если вы используете таблицы для макета (как и вы), то это только UX, подходящий для визуальных пользователей). :
<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>
<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>
Похожие вопросы: