Таблиці CSS кращі за таблиці HTML - Cайт - У Крайнього
Таблиці CSS кращі за таблиці HTML?
Багато веб-майстрів впевнені, що використовувати HTML таблиці в шаблонах - погана практика. Але в цьому уроці ми розглянемо лише таблиці CSS. Яка різниця між таблицями HTML та CSS? Чи потрібно використовувати таблиці CSS? Якщо так, то як? Як створити таблицю CSS
Модель CSS таблиць полягає в моделі таблиць HTML4 і добре підтримується браузерами. В обох моделях структура таблиці існує паралельно до візуального представлення.
Основними елементами структури є рядки. Рядок визначається явно, а стовпці залежать від того, як задані рядки та комірки.
Напевно, ви працювали з таблицями HTML раніше. Якщо так, то у вас не буде проблем зі створенням таблиць CSS.
Кожен елемент таблиці HTML має еквівалент CSS. Єдина відмінність полягає у відсутності відмінностей між td та th у варіанті CSS.
Підписи можуть бути розміщені зверху або знизу таблиці за допомогою властивості caption-side: 1 #caption 2 3 #caption
Нескладно здогадатися, як створити таблицю CSS, спираючись на наведений список. Ось приклад таблиці. 01
Якщо подивитися на код HTML прикладу, можна легко розрізнити структуру таблиці (використовуються елементи div і span з класами і ID замість table, td і tr).
Зовсім невеликий код CSS представляє елементи div і span як таблиці.
На додаток до вище наведених властивостей модель таблиці CSS включає значення inline-table, яка визначає нову таблицю як і display: table, але в контексті вбудованого в HTML код формату .
Стовпці та їхнє угруповання
Оскільки комірки таблиці є нащадками рядків таблиці, то формування стовпців має сенс використовувати деякі властивості. Модель таблиці CSS дозволяє застосовувати такі властивостідля стовпців та їх угруповання:
border — звичайна властивість, доки властивість border-collapse не використовується для елемента таблиці; background — звичайна властивість, поки рядок та осередок мають прозоре тло; width - встановлення ширини стовпця; visibility - якщо має значення collapse (єдине доступне значення), то осередок стовпця не буде виводитися (вона поєднується з іншими стовпцями і ширина таблиці вирівнюється).
Стек таблиці CSS
Різні елементи таблиці мають різний рівень у стеку для забезпечення можливості використання різних фонів на різних шарах.
Ці шари можна подивитися на представленому малюнку.
таблиця – найнижчий шар група стовпців стовпці група рядків рядки комірки - найвищий шар
Фон шару буде видно тільки якщо вище лежить шар має прозоре тло.
Це відмінний спосіб для виведення порожніх осередків дійсно порожніми за допомогою використання прозорого фону для них, через який буде видно рядок, стовпець або таблицю.
Стек моделі таблиці CSS
Алгоритм шаблону таблиці
Ширина таблиці CSS може бути обчислена за допомогою одного з двох алгоритмів. Алгоритм вибирається за допомогою властивості table-layout та двох значень:
Фіксована модель шаблону обчислюється раз і дуже швидка. А автоматичний режим (використовується за замовчуванням) вимагає кількох проходів по HTML таблиці.
Якщо ви явно визначаєте ширину таблиці, слід використовувати фіксовану модель розрахунку ширини.
За умовчанням висота комірки встановлюється мінімально необхідною для виведення змісту. Але ви можете явно визначити висоту комірки. Усі комірки у рядку матимуть висоту комірки з максимальним значенням.
Властивість vertical-align визначаєвирівнювання змісту у рядку
baseline top bottom middle sub, super, text-top, text-bottom, ,
Остання група значень застосовується не для осередків, а тексту в них. Осередки в даному випадку будуть вирівнюватися відповідно до значення baseline.
Рамки таблиці CSS
Є три цікаві властивості для рамок таблиць:
Рамка таблиці CSS Чи потрібно використовувати таблиці CSS?
Чи краще таблиці CSS, ніж таблиці HTML? Якщо так, то в чому їх переваги? Якщо ні, чому їх не треба використовувати? Хороші питання, на які немає однозначної відповіді.
Якщо розглянути використання таблиць HTML у порівнянні з комбінацією елементів div і коду CSS, виявляються такі недоліки таблиць:
Додаткове кодування - таблиці HTML вимагають додаткового кодування структури порівняно з елементами div. Але таблиці CSS вимагають використання додаткових класів та ідентифікаторів. Жорстка структура - таблиці HTML дуже жорстко прив'язані до змісту. Порядок осередків повинен бути таким, яким він виводитиметься. Але таке ж обмеження накладається і на таблиці CSS / Висновок у браузерах - браузери виконують кілька проходів по структурі HTML таблиць. Але і для CSS таблиць ситуація буде аналогічною.
Відповідно до вище сказаного таблиці CSS не мають істотних переваг перед таблицями HTML при використанні їх у шаблонах.
CSS таблиці є більш семантичним рішенням, оскільки є чіткий поділ структури даних та подання зовнішнього вигляду.
Таблиці CSS досить просто освоїти та використовувати. Але вони не мають явних переваг перед таблицями HTML, крім більш семантичного коду.
Можливо практика використання покаже переваги чи недоліки таблицьCSS. Чи маєте ви досвід використання таблиць CSS у реальних проектах?