Вопрос

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

Моя первоначальная мысль состояла в том, чтобы отделить верхнюю половину от нижней с помощью divs.Таким образом, разметка для верха довольно проста.Покидая дно, где я чувствую себя поставленным в тупик.Самый простой ответ - таблица, но это содержимое нелегко вписывается в правило "использовать только таблицы для табличных данных".Особенно учитывая, что заголовки выглядели бы бросающимися в глаза в этом макете.Предложения?

Нужна Семантическая разметка для этого изображения http://img183.imageshack.us/img183/2261/semanticmarkup.png

Это было полезно?

Решение

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

Другие советы

Я не думаю, что это было бы самым вопиющим нарушением семантической разметки, если бы вы поместили все это в таблицы.За исключением кнопок, на мой взгляд, все выглядит довольно таблично.Я думаю, что боги CSS простили бы тебя :)

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

Другой ваш вариант - использовать таблицу без заголовков, где вы бы использовали <div>для верхнего и нижнего колонтитулов и <table> как тело.Однако я не рекомендую этого делать.Одна из причин заключается в том, что вам понадобятся заголовки для таких вещей, как сортировка на стороне клиента, если вы используете JavaScript.

Вы ничего не нарушаете, помещая это в табличную форму.Конечно, некоторые люди будут жаловаться на это, но это достаточно близко к табличным данным, так что вы тоже можете.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top