Реализация блока ul or dl or table?

Question

[Oleg Front]

Ребят, такое обсуждение, хотелось бы увидеть Ваше мнение по поводу такого блока и как бы вы его реализовали?

Answer 1

[Денис Атясов]

Table или dl, dt, dd. Я бы выбрал table. dl не совсем подойдет из-за нижнего бордера пунктиром.

Comments

[Евгений Петров]

А нижнюю рамку, кроме как в таблице, встретить больше нигде невозможно?)

[Денис Атясов]

Что бы сделать подчеркивание не кривое придется верстать как-то так:

<dl>
        <dt>Monday</dt>
        <dd>9:30 am - 6:00 pm</dd>
    </dl>
    <dl>
        <dt>Tuesday</dt>
        <dd>9:30 am - 6:00 pm</dd>
    </dl>
    <dl>
        <dt>Wednesday</dt>
        <dd>9:30 am - 6:00 pm</dd>
    </dl>

и для семантики и красивости все обернуть придется еще в потому что куча dl получилась.

[Евгений Петров]

придется верстать как-то так

Не так. Можно и так jsfiddle.net/ks5e5o6k

для семантики и красивости все обернуть придется еще

Зачем?

куча dl получилась

Покажите табличный код и мы сравним количество тэгов. А если учесть tbody, то табличный проиграет всегда по количеству тэгов.

dl не совсем подойдет из-за нижнего бордера пунктиром

Я напомню, что у таблицы рамки не отображаются по умолчанию, и правило border нужно писать по-любому.

[Денис Атясов]

take.ms/0xd0o

[Евгений Петров]

Денис Атясов: Есть конкретный пример с днями недели. Но вам так неймётся доказать, что это — таблица, что вы начинаете на голом месте придумывать что-то своё.

[Евгений Петров]

Денис Атясов: И нажимайте «ответить», чтобы не получался монолог.

Answer 2

[Назар Мокринский]

Выбирать нужно исходя из семантики содержимого.
У вас не таблица, у вас скорее список дней недели с подробностями в виде рабочего времени.
Семантически я бы сделал dl, названия дней недели в dt, а время в dd, стилизировать всё это проблемы не составит.

Comments

[Денис Атясов]

Почему же это классическая таблица с th слева и td справа.

[Евгений Петров]

Денис Атясов: С таким же успехом это можно назвать классическим списком.

[Денис Атясов]

Если список классический у нас проблема с пунктиром, ответ выше.

[Евгений Петров]

Денис Атясов: У таблицы нет никакой рамки. Тем более пунктиром.

[Назар Мокринский]

Денис Атясов: Таблица с одной строкой? Ну удачи) Пунктир не проблема совсем, хоть радугу можно поставить в любом варианте (либо вы плохо знаете CSS).

[Денис Атясов]

Назар Мокринский: CSS или HTML? И давайте считать строки я насчитал 7 :)

Answer 3

[Oleg Front]

Я сделал так, если есть какие-то поправки, буду ра...

Comments

[Денис Атясов]

take.ms/xH6x6

[Денис Атясов]

Очень сомнительное решение, потому что при изменении ширины блоки или длинны текста все будет разваливаться.

[Денис Атясов]

Не стоит боятся таблиц там где они просто напросто показаны!

[Евгений Петров]

Денис Атясов: Не стоит, когда не нужно. Но не нужно в упорядоченных структурах всегда видеть только таблицу.

[Денис Атясов]

Евгений Петров и пусть все ползет и разваливается :)

[Евгений Петров]

Денис Атясов: Про этот вариант я ни слова не говорю. Я комментирую вашу позицию.

[Денис Атясов]

Таблица это не упорядоченная структура?

[Евгений Петров]

Денис Атясов: Таблица всегда упорядоченная структура. Но упорядоченная структура — не всегда таблица.

[Евгений Петров]

Денис Атясов: И вариант вполне нормальный.
Мне интересно, вот был вопрос — список или таблица? Одни говорят список, другие — таблица, третьи — можно и так, и так. Но вам обязательно нужно всем написать, что это — именно таблица. Только аргументы весьма странные.

[Денис Атясов]

Евгений Петров: ох не буду с вами спорить, я исходил из опыта как легче поддерживать верстку + семантики. И да хочу отучить людей бояться таблиц, ими раньше верстали сетку сайта, а потом все перешли на div (и это правильно), но теперь таблицы почему-то боятся все равно использовать даже в самых подходящих местах. Взгляните на свой css - костыли сплошные float и фиксированные размеры. Чуть поменять что и все поломалось.

[Евгений Петров]

Денис Атясов: Абсолютно согласен, что с таблицами палку перегнули, и будь там 3 колонки, я был бы только за таблицу.
Но этот конкретный случай вполне уместен в виде списка. Что можно поставить «другое», если пример про дни недели?
Ну и float — совсем не костыль. Можно хоть flex поставить.