Как сделать рамки в таблице html

Как добавить рамку вокруг ячеек?

Рамка вокруг ячеек таблицы устанавливается с помощью свойства border, оно добавляется к селекторам td и th . Через border мы сразу же задаём толщину рамки, её цвет и стиль (пример 1).

Пример 1. Свойство border

Рамка

Леонардо	5	8
Рафаэль	4	11
Микеланджело	24	9
Донателло	2	13

Результат данного примера показан на рис. 1.

Рамка вокруг ячеек

Рис. 1. Рамка вокруг ячеек

Изначально между ячеек содержится небольшой промежуток, в итоге каждая ячейка выглядит независимой. Чтобы в таблице получить сетку, к table надо добавить свойство border-collapse со значением collapse (пример 2).

Пример 2. Свойство border-collapse

Рамка

Леонардо	5	8
Рафаэль	4	11
Микеланджело	24	9
Донателло	2	13

Результат данного примера показан на рис. 2.

Рамка вокруг ячеек

Рис. 2. Рамка вокруг ячеек

См. также

border
border-collapse
Блочные элементы
Добавление треугольника
Колесо для сокращённых свойств
Открываем блочную модель
Оформление ссылок
Оформление таблиц
Повёрнутые рамки
Рамка вокруг изображений
Свойство border
Строчные элементы

Рамка у отдельных ячеек таблицы

Метод добавления рамки к отдельным ячейкам, столбцам и строкам таблиц. К ячейке таблицы добавляются position: relative и блок :after с абсолютным позиционированием, который растягивается на всю ширину и высоту. Далее к нему применяются нужные CSS стили.

Рамка у ячейки

.table th, .table td < position: relative; >.active:after

Наложение на текущую рамку таблицы

Для наложения на рамку таблицы нужно указать отрицательные значения top , right , bottom , left .

.table th, .table td < position: relative; >.active:after

Рамка у столбца

Chrome 9,562

.table th, .table td < position: relative; >.table .active:after < content: ''; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; height: 105%; border-left: 3px solid orange; border-right: 3px solid orange; >/* Рамка сверху у первой ячейки */ .table thead .active:after < border-top: 3px solid orange; >/* Рамка снизу у последней ячейки */ .table tbody tr:last-child .active:after

Рамка у строки

.table th, .table td < border: 1px solid #888; position: relative; >.table .active td:after < content: ''; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 105%; border-top: 3px solid orange; border-bottom: 3px solid orange; >/* Рамка слева у первой ячейки */ .table .active td:first-child:after < border-left: 3px solid orange; >/* Рамка справа у последний ячейки */ .table .active td:last-child:after

Таблица с рамкой

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

Для создания рамки применяется стилевое свойство border , которое добавляется к селектору TABLE . Также эффектно смотрится таблица, когда цвет рамки совпадает с цветом фона заголовка (тег ), как показано на рис. 1.

Рис. 1. Таблица с рамкой

В примере 1 показано, как создать такую простую таблицу.

Пример 1. Создание рамки вокруг таблицы

    Таблица       2004 2005 2006  
 Рубины 43 51 79  
 Изумруды 28 34 48  
 Сапфиры 29 57 36

	2004	2005	2006
Рубины	43	51	79
Изумруды	28	34	48
Сапфиры	29	57	36

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

Рис. 2. Таблица с рамкой

Изменение выравнивания происходит с помощью стилевого свойства text-align , при этом для отдельных ячеек требуется вводить новый класс, чтобы гибко управлять некоторыми характеристиками (пример 2).

Пример 2. Таблица с выравниванием содержимого ячеек

    Таблица       2004 2005 2006

В данном примере добавляется стилевой класс с именем lc , он добавляется к ячейкам левой колонки для изменения выравнивания содержимого и создания жирного начертания текста.

Эффектно смотрится таблица, у которой фон заголовка выполнен в виде градиента (рис. 3). При этом создание подобной таблицы не представляет особой сложности.

Рис. 3. Таблица с градиентным заголовком

При этом в качестве фона применяется заранее заготовленный рисунок, например, как показано на рис. 4.

Рис. 4. Заготовка для создания фона

Для добавления фона только к одной строке таблицы имеется несколько способов. Можно воспользоваться тегом , который предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы. Для этого тега добавляем стилевое свойство background , оно одновременно определяет цвет фона и фоновый рисунок, а также его повторяемость (пример 3).

Пример 3. Использование фонового рисунка

    Таблица        2004 2005 2006

В данном примере тег охватывает только верхнюю строку таблицы с ее заголовком. Для этого тега в стилях одновременно устанавливается цвет фона и картинка, которая приведена на рис. 4. Хотя цвет под рисунком не виден, лучше его всегда добавлять, например, для случая отключения пользователем отображения изображений в браузере.

HTML: Добавление рамки и заголовка к таблице

По стандарту HTML5 значением атрибута border может быть либо 1, либо пустая строка (обозначается как пара двойных кавычек ""). Не важно, какое значение атрибута вы зададите, если он присутствует, то рамка будет отображаться:

    Заголовок страницы  Таблица с рамкой:
 Первая строка
 Вторая строка
 
 Таблица без рамки:
 Первая строка
 Вторая строка

Если вам не нравится вид рамки у таблицы, заданный по умолчанию, т.е. двойные рамки, вы можете воспользоваться атрибутом style, прописав в нем CSS свойство border-collapse со значением collapse, это придаст рамке стандартный вид:

    Заголовок страницы   ячейка 1 ячейка 2
 ячейка 3 ячейка 4

Заголовок таблицы

Тег заголовка может содержать в себе любые элементы, которые можно использовать в теле HTML-документа. По умолчанию содержимое тега отображается над таблицей и выравнивается по ее центру. Расположение заголовка можно изменить применив к нему CSS свойство caption-side:

    Заголовок страницы   Моя первая таблица строка 1, ячейка 1 строка 1, ячейка 2
 строка 2, ячейка 1 строка 2, ячейка 2

Моя первая таблица
строка 1, ячейка 1	строка 1, ячейка 2
строка 2, ячейка 1	строка 2, ячейка 2

С этой темой смотрят:

Как сделать таблицу в html
Объединение ячеек в html таблице
HTML тег
Оформление таблиц

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru | razumnikum.ru