Границы и рамки таблиц в HTML и CSS

Границы и рамки таблиц в HTML и CSS В таблице, изначально, границ никаких нет, а их добавление осуществляется через атрибут border в теге <table>. Но браузеры могут отображать такую границу по-разному, поэтому создавать границы для таблиц лучше через CSS двумя способами.

Применение атрибута cellspacing

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

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

Свойство border

Данное свойство может сразу устанавливать нужный цвет границ, их толщину и стиль. При необходимости в таблице можно сделать отдельные линии со своим свойством, для этого в CSS-коде следует указать border и через дефис нужную линию (right, left, bottom, top).

Указав, border для селектора table, рамка будет добавлена для всей таблице, а для селекторов th или td – рамка будет задана для ячеек.

Границы и рамки таблиц в HTML и CSS Выравнивание содержимого ячеек

Содержимое ячеек без указания позиционирования всегда будет выравниваться по левому краю. Но есть исключение, которое касается тега <th>, так как здесь указан заголовок и выравнивание будет по центру. Для изменения выравнивания используется свойство text-align, в значении которого прописывается нужное позиционирование (right, left, center).

Пустые ячейки

Современные браузеры нормально отображают таблицы, а работу пустых ячеек теперь можно корректировать с помощью свойства empty-cells и значения hide. При этом граница и фон в таких ячейках не выводится на монитор, поэтому строчка, где все пустые ячейки, не отображается. Пустая ячейка бывает в таких случаях:
  • отсутствие каких-либо символов;
  • в ячейке имеется только перевод строки (пробел или табуляция);
  • значение visibility задано как hidden.

Добавить комментарий:
Имя:
E-mail:
2018 © Обсуждение Joomla и других CMS-систем управления сайтами  Правила | О проекте | Обратная связь