Предложение по семантической разметке
-
18-09-2019 - |
Вопрос
Я создаю веб-графический интерфейс для приложения, над которым я работаю.Этот конкретный раздел будет располагаться на странице большего размера, которая имеет хорошую семантическую структуру.Однако я не уверен, какой наилучший вариант семантически разметить приведенный ниже экран.
Моя первоначальная мысль состояла в том, чтобы отделить верхнюю половину от нижней с помощью divs.Таким образом, разметка для верха довольно проста.Покидая дно, где я чувствую себя поставленным в тупик.Самый простой ответ - таблица, но это содержимое нелегко вписывается в правило "использовать только таблицы для табличных данных".Особенно учитывая, что заголовки выглядели бы бросающимися в глаза в этом макете.Предложения?
Решение
Я бы использовал таблицу для нижней части, потому что, на мой взгляд, это является табличные данные.Я вижу 4 столбца (значок, название проекта, описание проекта и кнопки действий).Я не вижу никаких причин не использовать таблицу для этого макета (не говоря уже о том, что любой другой подход, который позволил бы правильно масштабировать этот макет, потребовал бы JavaScript и множества головных болей для правильной работы).
Другие советы
Я не думаю, что это было бы самым вопиющим нарушением семантической разметки, если бы вы поместили все это в таблицы.За исключением кнопок, на мой взгляд, все выглядит довольно таблично.Я думаю, что боги CSS простили бы тебя :)
Я согласен с Эндрю.Это табличные данные, поэтому вам следует использовать <table>
но имейте в виду, что вы должны правильно определять верхние и нижние колонтитулы таблиц.
Другой ваш вариант - использовать таблицу без заголовков, где вы бы использовали <div>
для верхнего и нижнего колонтитулов и <table>
как тело.Однако я не рекомендую этого делать.Одна из причин заключается в том, что вам понадобятся заголовки для таких вещей, как сортировка на стороне клиента, если вы используете JavaScript.
Вы ничего не нарушаете, помещая это в табличную форму.Конечно, некоторые люди будут жаловаться на это, но это достаточно близко к табличным данным, так что вы тоже можете.