Таблицы CSS лучше таблиц HTML?

Многие веб мастера уверенны, что использовать HTML таблицы в шаблонах - плохая практика. Но в данном уроке мы рассмотрим только таблицы CSS. Какая разница между таблицами HTML и CSS? Надо ли использовать таблицы CSS? Если да, то как?

Как создать таблицу CSS

Модель CSS таблиц основана на модели таблиц HTML4 и хорошо поддерживается браузерами. В обеих моделях структура таблицы существует параллельно визуальному представлению.

Основными элементами структуры являются строки. Строка определяется явно, а столбцы зависят от того, как заданы строки и ячейки.

Наверняка вы работали с таблицами HTML раньше. Если да, то у вас не будет проблем с созданием таблиц CSS.

Каждый элемент таблицы HTML имеет эквивалент в CSS.  Единственное отличие заключается в отсутствии отличий между td и th в варианте CSS.

Ниже приводится список элементов таблиц HTML и соответствующие им значения CSS.

table     { display: table }

tr        { display: table-row }

thead     { display: table-header-group }

tbody     { display: table-row-group }

tfoot     { display: table-footer-group }

col       { display: table-column }

colgroup  { display: table-column-group }

td, th    { display: table-cell }

caption   { display: table-caption }


Подписи могут быть размещены сверху или снизу таблицы с помощью свойства caption-side:

#caption {caption-side: top}

#caption {caption-side: bottom}


Несложно догадаться, как создать таблицу CSS опираясь на приведенный список. Вот пример таблицы.

<div id="table">

  <div class="row">

    <span class="cell"></span>

    <span class="cell"></span>

     <span class="cell"></span>

  </div>

  <div class="row">

    <span class="cell"></span>

    <span class="cell"></span>

     <span class="cell"></span>

  </div>

  <div class="row">

    <span class="cell"></span>

    <span class="cell"></span>

     <span class="cell"></span>

  </div>

</div>


 

#table {display: table;}

.row {display: table-row;}

.cell {display: table-cell;}


Если посмотреть на код 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

Различные элементы таблицы имеют разный уровень в стеке для обеспечения возможности использования разных фонов на разных слоях.

Данные слои можно посмотреть на представленном рисунке.

  1. таблица – самый нижний слой
  2. группа столбцов
  3. столбцы
  4. группа строк
  5. строки
  6. ячейки - самый верхний слой

Фон слоя будет виден только если выше лежащий слой имеет прозрачный фон.

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

 

Алгоритм шаблона таблицы

Ширина таблицы CSS может быть вычислена с помощью одно из двух алгоритмов. Алгоритм выбирается с помощью свойства table-layout и двух значений:

  • fixed (фиксированная) — ширина шаблона определяется не содержанием, а установкой ширины таблицы, ячеек, рамок и расстоянием между ячейками;
  • auto (автоматическая)— ширина таблицы устанавливается исходя из ширины столбцов и рамок.

Фиксированная модель шаблона вычисляется один раз и очень быстрая. А автоматический режим (используется по умолчанию) требует нескольких проходов по таблице HTML.

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

По умолчанию высота ячейки устанавливается минимально необходимой для вывода содержания. Но вы можете явно определить высоту ячейки. Все ячейки в строке  будут иметь высоту ячейки с максимальным значением.

Свойство vertical-align определяет выравнивание содержания в строке

  • baseline
  • top
  • bottom
  • middle
  • sub, super, text-top, text-bottom, <длина>, <процент>

Последняя группа значений применяется не для ячеек, а для текста в них. Ячейки в данном случае будут выравниваться в соответствии со значением baseline.

 

Рамки таблицы CSS

Есть три интересных свойства для рамок таблиц:

  • border-collapse — может иметь значения collapse, separate, или inherit
  • border-spacing — может иметь значения <расстояние_по_горизонтали>, <расстояние_по_вертикали>, или inherit. Определяет дистанцию между рамками ячеек.
  • empty-cells — может иметь значения show, hide, или inherit. Если ячейка пустая или имеет свойство visibility: hidden, то содержание не будет выводиться по умолчанию. Установка свойства empty-cells: show приведет к выводу фона и рамки для пустой ячейки.

Нужно ли использовать таблицы CSS?

Лучше ли таблицы CSS чем таблицы HTML? Если да, то в чем их преимущества? Если нет, то почему их не надо использовать? Хорошие вопросы, на которые нет однозначного ответа.

Если рассмотреть использование таблиц HTML в сравнении с комбинацией элементов  div и кода CSS, то выявляются следующие недостатки таблиц:

В соответствии с выше сказанным у таблиц CSS нет существенных преимуществ перед таблицами HTML при использовании их в шаблонах.

CSS таблицы являются более семантическим решением, так как имеется четкое разделение структуры данных и представления внешнего вида.

 

Заключение

Таблицы CSS достаточно просто освоить и использовать. Но они не имеют явных преимуществ перед таблицами HTML, за исключением более семантического кода.

Может быть практика использования покажет преимущества или недостатки таблиц CSS. Есть ли у вас опыт использования таблиц CSS в реальных проектах?

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/XIA7bjfFxTI/lessons.php

Читать комменты и комментировать

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



Защитный код
Обновить

Таблицы CSS лучше таблиц HTML? | | 2012-06-19 12:01:57 | | Статьи Web-мастеру | | Многие веб мастера уверенны, что использовать HTML таблицы в шаблонах - плохая практика. Но в данном уроке мы рассмотрим только таблицы CSS. Какая разница между таблицами HTML и CSS? Надо ли | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: