Главная › Настройки › Как задать цвет рамки таблицы в css. Цвет фона ячеек. Применение свойства border

Как задать цвет рамки таблицы в css. Цвет фона ячеек. Применение свойства border

Без стилей наша таблица выглядит совсем просто и невзрачно:

Рисунок 1. Вид таблицы без стилей.

Давайте добавим стили, чтобы она была покрасивее:

Выпадающее меню

Река	Длина (км)	Водосборный бассейн
Амазонка	6992	6915000
Нил	6852	3349000
Янцзы	5800	1800000

Теперь наша таблица выглядит так:

Рисунок 2. Вид таблицы со стилями.

В этом стиле нужно обратить внимание на правило:

/* Устанавливаем подсветку строки при наведении курсора */ tr+tr:hover{ background-color: #e6e3da; }

Тут используется селектор соседнего элемента (знак плюс) и псевдокласс :hover ,который определяет стиль элемента при наведении на него курсора мыши.

Нам же не нужно менять при наведении фоновый цвет (background-color ) шапки таблицы, так? Нам нужно менять фоновый цвет для всех строк, кроме первой.

Соседний селектор tr+tr будет применён ко всем строкам, кроме первой. Подробно про соседние селекторы читайте тут. А псевдокласс :hover указывает что применять стиль из правила CSS нужно только при наведении курсора.

Сейчас мы имеем вполне реальный пример таблицы. Только следует учесть, что таблиц на странице может быть несколько и не на все нужно наложить этот стиль. Для того, чтобы стиль работал только на одну таблицу, присвоим ей класс, читайте классы CSS .

В примере ниже комментарий только к добавленому коду.

Выпадающее меню

Река	Длина (км)	Водосборный бассейн
Амазонка	6992	6915000
Нил	6852	3349000
Янцзы	5800	1800000

В работе этого примера ничего не изменилось, но и не должно было. Просто если сейчас вы сохраните этот пример себе на компьютер, а в примере добавите вторую таблицу, например скопируете имеющийся код таблицы, но удалите class ="river ", но стиль будет применён только к таблице с установленным классом. Это простые основы CSS.

Второй пример

Теперь поставим такую задачу: нужно выделить первый столбец светло-серым цветом.

Для решения этой задачи будем использовать псевдокласс :first-child . При помощи этого псевдокласса можно обратиться к первым ячейкам каждой строки.

Пример таблицы

Имя:	Джек
Фамилия:	Лондон

Это очень простой пример. А давайте используя дочерние селекторы обратимся к этим элементам.

В нашем коде у тега предок , а у него предок

, то есть дочерний селектор должен быть таким:

Пример таблицы

Имя:	Джек
Фамилия:	Лондон

И теперь мы видим, что наш стиль не работает. Почему? Ведь селектор на первый взгляд указан правильно. Всё дело в том, что после тега

всегда есть тег . Он есть, даже если он не прописан в коде. Поэтому работать будет код:

Пример таблицы

Имя:	Джек
Фамилия:	Лондон

Этот момент в работе с таблицами нужно обязательно знать.

Теперь ещё один момент, хотя он не имеет прямого отношения к таблицам, но при работе с ними могут часто возникать подобные вопросы. Рассмотрим его на примере этого кода. Например, мы хотим установить красный фоновый цвет для ячеек последней строки. Будем использовать для этого класс (class ="my-td ").

Пример таблицы

Имя:	Джек
Фамилия:	Лондон

В результате класс сработал во второй ячейке ("Лондон"), но не сработал в первой ячейке, для которой сработал селектор table > tbody> tr > td:first-child .

Почему так случилось?

Потому что селектор table > tbody> tr > td:first-child имеет больший "вес" (значимость) для CSS, т.к. он более конкретизирован.

Как это исправить?

Можно использовать более конкретизированный селектор для определения класса: table > tbody> tr > td.my-td .

Можно использовать правило !important . Это правило повышае приоритет стиля, это использование этого правила считается крайним случаем.

Пример таблицы

Имя:	Джек
Фамилия:	Лондон

Вместо классов в данном случае можно использовать идентификаторы id , их приоритет выше и стиль будет выполняться.

У каждого браузера свои приоритеты, про строгий стандарт я не читал нигде. Но общие правила есть:

чем конкретнее селектор, тем больше его вес;
id главнее class .

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

Но, что касается CSS, то следует помнить, что CSS плохо работает по выбору ячеек таблицы (тег ). Класс лучше присваивать строке (тег ), а потом с помощью селектора с псевдоклассом td:nth-child(n) указывать нужную ячейку.

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

width и height

Задают соответственно ширину и высоту таблицы. Без этих свойств параметры определяются автоматически и зависят от содержимого контейнера

. Значения устанавливаются в любых единицах длины CSS, но зачастую используются пиксели (px ) и проценты (% ). Последние настраивают ширину относительно родительского элемента, первые же задают абсолютную величину.

Table {width: 450px; height: 80%;}

caption-side

Указывает, где будет размещён заголовок таблицы, описанный тегом

. Свойству можно задавать значения:

top - расположить над таблицей.
bottom - разместить под таблицей.

Эксклюзивно для обозревателя Firefox доступны значения left (заголовок слева) и right (справа от таблицы), но другие браузеры их не понимают.

Table {caption-side: top;}

border-collapse

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

Так рамки ячеек отображаются по умолчанию. Правило border-collapse: separate; даёт такой же эффект. Чтобы решить проблему, нужно объявить border-collapse: collapse; (результат показан на рисунке ниже).

border-spacing

Определяет расстояние между границами ячеек. Правило задаётся сразу для всей таблицы. Если значение одно, то оно установит расстояние и по горизонтали, и по вертикали. Если значения два, то первое задаст расстояние по горизонтали, второе - по вертикали. Свойство несовместимо с правилом table {border-collapse: collapse;} .

Table { border: 4px double #FCA360; border-collapse: separate; border-spacing: 10px 20px; } td { padding: 3px; border: 1px solid #FCA360; }

Задаёт таблице следующее оформление:

empty-cells

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

show - показывать границы и фон (по умолчанию).
hide - скрыть их. Если все ячейки строки пусты, то будет скрыта, соответственно, вся строка. Если таблице задано правило border-collapse: collapse; , то свойство игнорируется.

table-layout

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

auto . Ширина определяется автоматически. При этом либо суммируется ширина всех столбцов, либо берётся значение свойства width , если таблице оно задано. Браузер сначала загружает таблицу, потом анализирует её, определяя ширину, и только после этого отображает.
fixed . Фиксированная ширина, которая определяется по первой строке.

Пример оформления таблицы

Не забывайте, что таблице можно задавать и другие универсальные правила, например, как мы это делали с высотой (height ) и шириной (width ).

Помня это, оформим несложную таблицу, частично прокомментировав код.

border-collapse

Пример таблицы
Цены	2014	2015	2016
Хлеб	16	18	21
Сахар	35	44	50
Соль	8	8,50	9

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

width: 50%;

Задаём ширину таблицы в половину от родительской. 50% берётся от ширины контейнера , потому что других родителей у неё нет. То есть таблица будет занимать ровно половину окна браузера.

caption-side: bottom;

Размещаем заголовок снизу, под таблицей.

border: 4px solid #006400;

Задаём таблице цветную рамку толщиной 4 пикселя.

border-collapse: collapse;

Объединяем границы ячеек.

table-layout: fixed;

Настраиваем способ определения браузером ширины таблицы.

font-size: 13px;

Задаём размер шрифта заглавных ячеек.

font-weight: bold;

Делаем текст внутри них жирным.

background: #ADFF2F;

Устанавливаем цвет фона ячеек.

border-top: 4px solid #006400; border-bottom: 3px solid #FF8C00;

Настраиваем верхние и нижние рамки.

color: #039;

Определяем цвет текста.

padding: 8px;

Задаём расстояние от содержимого ячеек до их границ равным восьми пикселям.

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

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

Основа таблицы

Таблица является сложной конструкцией, и формируется из нескольких HTML тегов. На первом этапе она строится из блочного элемента

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

Заключительный этап построения таблицы является создание ячеек . Для этой цели есть две категории тегов:

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

Заголовок 1	Заголовок 2	Заголовок 3	Заголовок 4	Заголовок 5
Ячейка 1,1	Ячейка 1,2	Ячейка 1,3	Ячейка 1,4	Ячейка 1,5
Ячейка 2,1	Ячейка 2,2	Ячейка 2,3	Ячейка 2,4	Ячейка 2,5
Итог 1	Итог 2	Итог 3	Итог 4	Итог 5

Рис 1. Таблица

Как видно из кода расположенного выше, таблица содержит четыре строки () и пять столбцов. Ячейки первой строки - заголовки столбцов (). Со второй строки по четвертую ячейки содержат основные данные таблицы(). Теги , универсальны, и могут содержать в себе не только обычный текст, но и всевозможные теги, вплоть до других таблиц!

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

Парный тег основа таблицы, все остальные теги вложены в него;

Парный тег

второй уровень таблицы или ее строка, должен быть вложен в тег

;

Парные теги

и содержат табличные данные;

Если поместить любой другой тег или текст вне парного тега

- Секция заголовков столбцов;

- Секция основы таблицы;

- Секция итоговых данных, резюмирующая всю таблицу;

, , , помещаются внутрь таблицы

третий уровень таблицы или ее ячейки, должны быть вложены в тег

, то эти данные будут проигнорированы и никак не отобразится на веб-странице;

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

В таблице предусмотрена возможность добавления заголовка, с помощью парного тега

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

Заголовок Таблицы
Заголовок 1	Заголовок 2	Заголовок 3	Заголовок 4	Заголовок 5
Ячейка 1,1	Ячейка 1,2	Ячейка 1,3	Ячейка 1,4	Ячейка 1,5
Ячейка 2,1	Ячейка 2,2	Ячейка 2,3	Ячейка 2,4	Ячейка 2,5
Итог 1	Итог 2	Итог 3	Итог 4	Итог 5

Рис. 2. Таблица с заголовком.

Секции таблицы

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

, и должны содержать теги :

Заголовок Таблицы
Заголовок 1	Заголовок 2	Заголовок 3	Заголовок 4	Заголовок 5
Ячейка 1,1	Ячейка 1,2	Ячейка 1,3	Ячейка 1,4	Ячейка 1,5
Ячейка 2,1	Ячейка 2,2	Ячейка 2,3	Ячейка 2,4	Ячейка 2,5
Итог 1	Итог 2	Итог 3	Итог 4	Итог 5

Объединение ячеек

Выше была рассмотрена таблица с простой структурой, а что если необходимо ее усложнить, к примеру, объединить несколько ячеек в одну. Для этого случая существуют специальные атрибуты COLSPAN и ROWSPAN тегов и . Первый служит для объединения по горизонтали, второй по вертикали. Значением для атрибута случит число объединяемых ячеек:

1. Для объединения по горизонтали первых четырех ячеек последней строки таблицы, необходимо атрибуту COLSPAN тега (в котором содержится текст “Итог 1”) присвоить значение 4:

Итог (1+2+3+4)

2. Для объединения ячеек по вертикали основной части документа (часть ), воспользуйтесь атрибутом ROWSPAN со значением 2:

Ячейка (1,1+2,1) Ячейка (1,2+2,2) Ячейка (1,3+2,3) Ячейка (1,4+2,4)

Обратите внимание, если объединять ячейки атрибутами COLSPAN или ROWSPAN, необходимо убрать из кода объединенные ячейки, кроме той с которой начинается объединение, их количество будет зависеть от значения атрибута COLSPAN, ROWSPAN.

То есть, в примере 1, объединяются четыре ячейки, начиная с первой, которой назначается атрибут COLSPAN=4 (т.к. с нее начинается объединения), остальные три необходимо удалить (т.к. они считаются объединенными). В коде останется только пятая ячейка (т.к. она не входит в объединение).

По такому же принципу будет объединение по вертикали. Во втором примере, первым четырем ячейкам строки присваивается атрибут ROWSPAN=2, в результате первые четыре нижние ячейки убираются из кода, т.к. они считаются объединенными. Кроме последней, которая не входит в объединение.

Заголовок Таблицы
Заголовок 1	Заголовок 2	Заголовок 3	Заголовок 4	Заголовок 5
Ячейка (1,1+2,1)	Ячейка (1,2+2,2)	Ячейка (1,3+2,3)	Ячейка (1,4+2,4)	Ячейка 1,5
Ячейка (1,1+2,1)	Ячейка (1,2+2,2)	Ячейка (1,3+2,3)	Ячейка (1,4+2,4)	Ячейка 2,5
Итог 1+ Итог 2+ Итог 3+ Итог 4	Итог 5

Рис. 4. Объединение ячеек таблицы с помощью атрибутов COLSPAN, ROWSPAN.

Оформление таблиц CSS свойствами

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

.

Рамки для ячеек

Рамку вокруг ячеек можно рисовать с помощью CSS свойства **border** , со следующим синтаксисом:
Border: “толщина линии” “тип начертания” “цвет”;
**толщина линии** - может задаваться в пикселях (px), а также с помощью специальных зарезервированных слов: thin (2 px), medium (4 px) и thick (6 px);

**тип начертания** - значения атрибута специальные слова: dotted (точечный пунктир), dashed(пунктирная линия), solid (линия), double (двойная линия) и т.д.

Рис 5. Применение к ячейкам таблицы свойства border, для обрамления каждой ячейки рамкой.

Если необходимо, чтобы рамка была только между ячейками, а не обрамляла каждую в отдельности, необходимо воспользоваться стилевым свойством **border-collapse** , принимающее значение:

**collapse** - рамка между ячейками только одна;

**separate** - каждая ячейка обрамляется собственной рамкой;

Рис 6. Применение к таблице свойства border-collapse. Соседние ячейки отделяются одной рамкой.

Размеры ячеек

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

Рис 7. Применение свойства width и height, для задания ширины и высоты ячеек.

Отступы в ячейках

Существует два вида отступов внешние и внутренние, первый вид отступа задается между границами соседних ячеек, второй от границ ячеек до их содержимого. CSS свойства создающие отступы указаны ниже:

**padding** - внутренний отступ, значение устанавливается в пикселях (px);

**border-spacing** - внешний отступ, значение устанавливается также в пикселях (px). Данный параметр не следует употреблять, если {border-collapse:collapse}, т.к. отступ устанавливается между границами соседних ячеек, а при наличие указанного свойства соседние ячейки отделены лишь одной рамкой;

Рис. 8. Применение к таблице свойства padding, для задания отступов.

Расположение заголовка

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

**top** - заголовок располагается над таблицей;

**bottom** - заголовок располагается под таблицей;

Цвет ячеек

Для закрашивания ячейки определенным цветом необходимо воспользоваться свойством **background-color** :

Рис. 10. Выравнивание содержимого ячеек свойствами text-align и vertical-align.

Оформление содержимого ячейки

Под оформление содержимого понимается форматирование текста находящегося в ячейках. Основное CSS свойство, применяемое для этой цели является **font** :

Рис. 11. Оформление содержимого ячейки свойством font.

Все CSS стили применяемые к таблице

Многие веб мастера уверены, что использовать 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 опираясь на приведенный список. Вот пример таблицы.

#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

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

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

таблица - самый нижний слой

группа столбцов

столбцы

группа строк

строки

ячейки - самый верхний слой

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

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

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

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

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

**auto** (автоматическая)— ширина таблицы устанавливается исходя из ширины столбцов и рамок.

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

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

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

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

baseline

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, то выявляются следующие недостатки таблиц:

**Дополнительное кодирование** — таблицы HTML требуют дополнительного кодирования структуры в сравнении с элементами div . Но и таблицы CSS требуют использования дополнительных классов и идентификаторов.

**Жесткая структура** — таблицы HTML очень жестко привязаны к содержанию . Порядок ячеек должен быть таким, каким он будет выводиться. Но такое же ограничение накладывается и на таблицы CSS/

**Вывод в браузерах** — браузеры выполняют несколько проходов по структуре HTML таблиц. Но и для CSS таблиц ситуация будет аналогичной.

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

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

Заключение

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

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

Оформление таблиц с помощью CSS - занятие интересное и ответственное. Подходить к этому делу нужно грамотно, со знанием всех возможностей стилей. Помимо этого, нужно владеть чувством прекрасного, чтобы не отпугивать своим творчеством посетителей сайта.
В таблицах можно преобразить практически всё. Красивое оформление таблиц CSS подразумевает использование оформления границ, фона таблицы, фона ячеек, промежутка между ними и многого другого. Рассмотрим самое основное.
Граница таблицы
Стиль оформления таблицы CSS всегда подразумевает игру с границей (рамкой). Все таблицы по умолчанию не обводятся рамкой. То есть она равна 0 пикселям. Но это можно исправить при помощи свойства border.
Можно указать внешнюю рамку для всей таблицы:
table { border: 3px solid black; }
Благодаря этой строчке у всех таблиц на сайте, где используется этот стиль, будет черная рамка. Обратите внимание, что граница только по краям, но не внутри таблицы. Для ячеек и строк рамка задается иначе.
th, td {border: 3px solid black;}
Толщину и цвет можно указать любые. Имейте в виду, что границы не удваиваются при стыковании ячеек.
Слово solid обозначает сплошное оформление. Указывать можно и другие значения.
Чаще всего используется именно сплошная рамка, поскольку она смотрится более привлекательно и не отвлекает внимания от основного контента сайта.
Свойство border можно указывать еще и по направлениям. Границу можно задавать только для верхней, нижней, левой или правой части. Поскольку в некоторых случаях не подходит вариант с рамкой для всей таблицы сразу.
table {border-top: 1px solid red; }
Так можно задать рамку только для верхней части таблицы. Аналогично и для любых других сторон, просто вместо top пишем: right, left или bottom.
Заголовок таблицы
Заголовок таблицы можно указать при помощи тега
,	,

Как задать цвет рамки таблицы в css. Цвет фона ячеек. Применение свойства border

Второй пример

width и height

caption-side

border-collapse

border-spacing

empty-cells

table-layout

Пример оформления таблицы

Основа таблицы

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

Секции таблицы

Объединение ячеек

Оформление таблиц CSS свойствами

Рамки для ячеек

Размеры ячеек

Отступы в ячейках

Расположение заголовка

Цвет ячеек

Оформление содержимого ячейки

Все CSS стили применяемые к таблице

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

Столбцы и их группировка

Стек таблицы CSS

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

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

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

Заключение

Граница таблицы

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

Фон таблицы

Фон ячеек

Промежуток между ячейками

Разница в браузерах

CSS: оформление таблиц, примеры

Заключение