От автора: Многие дизайнеры прошлого любили создавать веб-дизайн, используя таблицу и, когда дело доходило до исправления ошибок, это становилось их ахиллесовой пятой. Теперь, однако, когда дело доходит до построения списка данных на веб-странице, например, списка данных профиля, многие вместо этого пользуются таблицей HTML.
Фактически, используя тэги HTML dl, dt, dd, вы экономите на написании кода и добавляете своему контенту больше семантического значения. Тогда как таблицу лучше всего использовать для табличных данных, и не следует использовать для списка данных, в веб-форме или веб-разметке.
Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.
Также скачайте исходники себе на компьютер!
Если вы до сих пор создаете списки данных, используя таблицу, посмотрите внизу и сравните, насколько можно облегчить себе жизнь с помощью тэгов HTML dl, dt, dd.
Оба столбца выглядят одинаково, но посмотрите внимательно на их код.
Табличный список данных
Обычный список данных с использованием следующий таблицы. Сначала мы делаем строку таблицы tr, в которой будет содержаться заголовок и ячейку таблицы с данными td. Затем, когда потребуется назначить стили элементу title, нам придется присвоить ячейке таблицы td класс.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/*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 (описывает пункт списка), содержащие заголовок и данные.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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, так заголовок списочных данных выровняется по левому краю. Остальные стили – на ваше усмотрение.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/*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
Комментарии (19)