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

15

Від автора: Багато дизайнери минулого любили створювати веб-дизайн, використовуючи таблицю і, коли справа доходила до виправлення помилок, це ставало їх ахіллесовою п’ятою. Тепер, однак, коли справа доходить до побудови списку даних на веб-сторінці, наприклад, списку даних профілю, багато замість цього користуються таблицею HTML.

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

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

Також завантажте вихідні коди собі на комп’ютер!

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

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

Обидва стовпці виглядають однаково, але подивіться уважно на їх код.

Список даних

Звичайний список даних з використанням наступний таблиці. Спочатку ми робимо рядок таблиці, tr, в якій буде міститися заголовок і клітинку таблиці з даними td. Потім, коли буде потрібно призначити стилі елементу title, нам доведеться присвоїти клітинці таблиці td клас.

Name: John Don
Age: 23
Gender: Male
Day of Birth: 12th May 1986

Тут в 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 (описує пункт списку), що містять заголовок і дані.

Name:
John Don
Age:
23
Gender:
Male
Day of Birth:
12th May 1986

В 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 видно, що так коду виходить менше, він гладше і семантичнее.

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

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

E-mail: [email protected]