Как воспользоваться тэгами HTML DL, DT и DD для создания списка данных (альтернатива табличных данных)

теги dl dt dd

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

Фактически, используя тэги HTML dl, dt, dd, вы экономите на написании кода и добавляете своему контенту больше семантического значения. Тогда как таблицу лучше всего использовать для табличных данных, и не следует использовать для списка данных, в веб-форме или веб-разметке.

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

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

теги dl dt dd

Оба столбца выглядят одинаково, но посмотрите внимательно на их код.

Табличный список данных

Обычный список данных с использованием следующий таблицы. Сначала мы делаем строку таблицы tr, в которой будет содержаться заголовок и ячейку таблицы с данными td. Затем, когда потребуется назначить стили элементу title, нам придется присвоить ячейке таблицы td класс.

<table>
    <tr>
        <td class="title">Name: </td>
        <td class="text">John Don</td>
    </tr>
    <tr>
        <td class="title">Age: </td>
        <td class="text">23</td>
    </tr>
    <tr>
        <td class="title">Gender: </td>
        <td class="text">Male</td>
    </tr>
    <tr>
        <td class="title">Day of Birth:</td>
        <td class="text">12th May 1986</td>
    </tr>
</table>

Тут в CSS мы назначаем стили классу title, который объявили в HTML.

/*TABLE LIST DATA*/
table {
    margin-bottom:50px;
}
 
table tr .title {
    background:#5f9be3;
    color:#fff;
    font-weight:bold;
    padding:5px;
    width:100px;
}
 
table tr .text {
    padding-left:10px;
}

Отсюда видно, что, если понадобится изменить стиль или формат заголовка в CSS, вам придется присвоить каждому td заголовка класс. Если, помимо того, нужно присвоить стили данным, вам придется присвоить класс и им, так что на самом деле вы пишете слишком много кода. Большое количество кода означает большой размер файла для скачивания, большую возможность ошибок и сложность в поддержании.

Списочные данные DL, DT, DD

Теперь давайте взглянем на использование тэгов HTML dl, dt, dd для построения данных в список. Сначала у нас появляется тэг dl (список описаний), содержащий весь комплект данных, далее имеются тэги dt (определяет пункт в списке) и dd (описывает пункт списка), содержащие заголовок и данные.

<dl>
    <dt>Name: </dt>
    <dd>John Don</dd>
 
    <dt>Age: </dt>
    <dd>23</dd>
 
    <dt>Gender: </dt>
    <dd>Male</dd>
 
    <dt>Day of Birth:</dt>
    <dd>12th May 1986</dd>
</dl>

В CSS нам понадобится присвоить тэгу dt свойство float, так заголовок списочных данных выровняется по левому краю. Остальные стили – на ваше усмотрение.

/*DL, DT, DD TAGS LIST DATA*/
dl {
    margin-bottom:50px;
}
 
dl dt {
    background:#5f9be3;
    color:#fff;
    float:left;
    font-weight:bold;
    margin-right:10px;
    padding:5px;
    width:100px;
}
 
dl dd {
    margin:2px 0;
    padding:5px 0;
}

На примере тэгов dl, dt, dd видно, что так кода получается меньше, он глаже и семантичнее.

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

киберсант-вебмастер

Автор: Terrance

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

E-mail: contact@webformyself.com

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (19)

  1. Игорб

    вот все эти уроки которые вышли недавно ест на ваших дисках?

    • Andrey Bernacki

      Нет, на дисках нет уроков которые есть на сайте. Там отдельные уроки и более подробное описание происходящего, нежели в текстовых уроках.

      • Мистер КАК

        Как Вы считаете, как лучше организовать древовидную структуру? используя параметр depth/level, простым перебором с рекурсией или использовать DOM в клиенте? а может быть есть какие-нибудь альтернативные варианты?

  2. Eлена

    Классные все ваши материалы, без исключения!
    Спасибо!

  3. Валентина

    Дорогие Виктор и Андрей! Спасибо большое за эту информацию. Это настолько облегчает работу на веб-странице, Вы не представляете!!!

  4. Максим

    Полезная статья. Может пригодиться.

  5. Максим

    Без сомнения, использование тэгов списка определений более семантично по сравнению с таблицей.
    Но справедливости ради хочу напомнить, что среди табличных тэгов существует th, при использовании которого в приведенный вами код таблицы не пришлось бы добавлять классы.
    Но все равно спасибо за напоминание о списках определений!

  6. SkreaB

    Спасибо, очень полеыно

  7. Анатолий

    Здравствуйте, извините, но в сайтостроении я не чего не понимаю, я сейчас изучаю 4 диска для «чайников» и наверное мне лучше приобрести готовый сайт, чем его изучать и строить? Может быть через полгода дойду до этого уровня. С уважением, Анатолий.

  8. Владимир

    Спасибо. Никогда об этом не думал. Отличный урок

  9. Александр

    А если мне нужно оформить несколько списков с разным оформлением, то по коду это будет выглядеть практически так же объемно, как и с таблицами — присвоение новых имён и спискам, и заведение новых стилей…

  10. Анатолий

    Спасибо,Андрей и Виктор

  11. Алексей

    Спасибо!! давно хотел научится было лень копаться

  12. Stepan

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

  13. Kuzmich

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

  14. trsteep

    Покрасивее смотрится.
    А где можно поподробнее почитать про dl, dt, dd желательно на русском?

  15. Никоай

    Да так и делаю, но он в вашем демо примере это отстойно сделано ну во первых если таблицами , то не обязательно прописывать классы ячейкам можно просто задать :first-child для class=»title»
    Ну , а dd , а если инфы будет на две строчки , то все разъедится к черту или вовсе обрежется, в общем таблицы рулят.

  16. Вадим

    ну так-то неправда.. dd отлично справляется если инфы на несколько строк — dispay:table-cell поможет…
    :first-child — не сработает в старом осле…

    ну а так- потратил час..
    dl-dt-dd отлично работает КРОМЕ осла.. в 6-7 осле при неизвестной ширине СРЕДНЕЙ колонки получается бред… при известной ширине (хотя бы в процентах) мило дело.. а вот когда знаешь ширину левой, знаешь ширину правой колонки, а средняя — «все что осталось» в резиновой верстке — фигня выходит…

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

  17. nurjan

    Согласна с Вадимом!
    У меня вот недавно была такая проблема с длинным словом… ;)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree