Как сделать таблицу стилей в html

Таблицы и стили

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

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

Цвет фона ячеек

Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background , которое применяется к селектору TABLE . При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Если одновременно с TABLE задать цвет у селектора TD или TH , то он и будет установлен в качестве фона (пример 1).

Пример 1. Цвет фона

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

Заголовок 1	Заголовок 2
Ячейка 3	Ячейка 4

То же самое происходит и с цветом текста. Для всех элементов таблицы в примере он установлен белым.

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

Изменение цвета фона

Рис. 1. Изменение цвета фона

Поля внутри ячеек

Пример 2. Поля в таблицах

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

Заголовок 1	Заголовок 2
Ячейка 3	Ячейка 4

В данном примере с помощью группирования селектором поля установлены одновременно для селектора TD и TH .

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

Поля в ячейках

Рис. 2. Поля в ячейках

Границы и рамки

Линии между ячейками можно установить несколькими методами, при этом рассмотрим два из них, которые непосредственно связаны со стилями.

Использование атрибута cellspacing

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

Применение свойства border

Стилевое свойство border одновременно задает цвет границы, ее стиль и толщину вокруг элемента. Когда требуется создать отдельные линии на разных сторонах, лучше использовать его производные — border-left , border-right , border-top и border-bottom , они соответственно определяют границу слева, справа, сверху и снизу.

Применяя свойство border к селектору TABLE , мы добавляем рамку вокруг таблицы в целом, а к селектору TD или TH — рамку вокруг ячеек (пример 3).

Пример 3. Добавление двойной рамки

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

Заголовок 1	Заголовок 2
Ячейка 3	Ячейка 4

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

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

Граница вокруг таблицы и ячеек

Рис. 3. Граница вокруг таблицы и ячеек

Пример 4. Создание одинарной рамки

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

Заголовок 1	Заголовок 2
Ячейка 3	Ячейка 4

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

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

Граница вокруг таблицы

Рис. 4. Граница вокруг таблицы

Выравнивание содержимого ячеек

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

Пример 5. Выравнивание содержимого ячеек по горизонтали

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

Заголовок 1	Ячейка 1	Ячейка 2
Заголовок 2	Ячейка 3	Ячейка 4

Выравнивание текста в ячейках

Рис. 5. Выравнивание текста в ячейках

Выравнивание по вертикали в ячейке всегда происходит по ее центру, если это не оговорено особо. Это не всегда удобно, особенно для таблиц, у которых содержимое ячеек различается по высоте. В таком случае выравнивание устанавливают по верхнему краю ячейки с помощью свойства vertical-align , как показано в примере 6.

Пример 6. Выравнивание содержимого ячеек по вертикали

    Таблицы    Заголовок 1 Заголовок 2
 Ячейка 1 Ячейка 2

Заголовок 1	Заголовок 2
Ячейка 1	Ячейка 2

В данном примере устанавливается высота заголовка как 40 пикселов и выравнивание текста происходит по нижнему краю. Результат примера показан на рис. 6.

Выравнивание текста в ячейках

Рис. 6. Выравнивание текста в ячейках

Словарь терминов

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

Различают три вида стилей, в зависимости от их использования в документе. 1. Внутренний — практически не отличается от стандартного HTML 2. Глобальный — используется тег style> и его атрибут TYPE 3. Связанный — страницы одного сервера выглядят одинаково, используется связующий тег LINK> и его атрибут REL

CSS — каскадные таблицы стилей (от англ. Cascading Style Sheets) — один из первых общепринятых стандартов стилей, официально признанный консорциумом W3C. Слово каскадные обозначает возможность объединения различных видов стилей, внутренние теги могут наследовать стили внешних тегов.

Стандарт CSS используется для создания внешнего вида веб-страниц, написанных в HTML, XHTML, также может использоваться для написания XML-документов, таких как XUL и SVG.

С помощью CSS создатели веб-сайтов задают цвета, шрифты, расположение информационных блоков.

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

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

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

Внедрить таблицу в веб-документ можно несколькими способами:

отдельный файл с таблицей связать с документом при помощи тегаLINK>, вложенного между тегамиhead> и /head>;
подключить отдельный файл к веб-странице через директиву @import;
расположить вложенную в веб-документ таблицу в теле любого тега;
таблица в документе прописать между тегамиstyle> и /style>.

Таблицы и стили

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

Цвет фона ячеек

Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background , которое применяется к селектору TABLE . При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Хотя свойство background не наследуется, для ячеек значением фона по умолчанию выступает transparent , т.е. прозрачность, поэтому эффект заливки фона получается и у ячеек. Если одновременно с TABLE задать цвет у селектора TD или TH , то этот цвет будет установлен в качестве фона ячейки (пример 2.3).

Пример 2.3. Цвет фона

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

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

Заголовок 1	Заголовок 2
Ячейка 3	Ячейка 4

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

Изменение цвета фона

Рис. 2.4. Изменение цвета фона

Поля внутри ячеек

Пример 2.4. Поля в таблицах

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

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

Заголовок 1	Заголовок 2
Ячейка 3	Ячейка 4

В данном примере с помощью группирования селекторов поля установлены одновременно для селектора TD и TH . Результат примера показан на рис. 2.5.

Поля в ячейках

Рис. 2.5. Поля в ячейках

Расстояние между ячейками

Свойство border-spacing действует только в том случае, если для селектора TABLE не задано свойство border-collapse со значением collapse (пример 2.5).

Пример 2.5. Расстояние между границами ячеек

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

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

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

Рис. 1

Рис. 2.6. Вид таблицы при использовании border-spacing

Браузер Internet Explorer до седьмой версии включительно не поддерживает свойство border-spacing , поэтому в этом браузере для таблиц будет применяться значение cellspacing заданное по умолчанию (обычно оно равно 2px).

При добавлении к селектору TABLE свойства border-collapse со значением collapse , атрибут cellspacing игнорируется, а значение border-spacing обнуляется.

Границы и рамки

Использование атрибута cellspacing

Применение свойства border

Стилевое свойство border одновременно устанавливает цвет границы, её стиль и толщину вокруг элемента. Когда требуется создать отдельные линии на разных сторонах, лучше использовать производные — border-left , border-right , border-top и border-bottom , эти свойства соответственно определяют границу слева, справа, сверху и снизу.

Применяя свойство border к селектору TABLE , мы добавляем рамку вокруг таблицы в целом, а к селектору TD или TH — рамку вокруг ячеек (пример 2.6).

Пример 2.6. Добавление двойной рамки

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

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

Заголовок 1	Заголовок 2
Ячейка 3	Ячейка 4

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

Граница вокруг таблицы и ячеек

Рис. 2.7. Граница вокруг таблицы и ячеек

Пример 2.7. Создание одинарной рамки

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

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

Заголовок 1	Заголовок 2
Ячейка 3	Ячейка 4

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

Граница вокруг таблицы

Рис. 2.8. Граница вокруг таблицы

Выравнивание содержимого ячеек

Пример 2.8. Выравнивание содержимого ячеек по горизонтали

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

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

Заголовок 1	Ячейка 1	Ячейка 2
Заголовок 2	Ячейка 3	Ячейка 4

Выравнивание текста в ячейках

Рис. 2.9. Выравнивание текста в ячейках

Выравнивание по вертикали в ячейке всегда происходит по её центру, если это не оговорено особо. Это не всегда удобно, особенно для таблиц, у которых содержимое ячеек различается по высоте. В таком случае выравнивание устанавливают по верхнему краю ячейки с помощью свойства vertical-align , как показано в примере 2.9.

Пример 2.9. Выравнивание содержимого ячеек по вертикали

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

    Таблицы    Заголовок 1 Заголовок 2
 Ячейка 1 Ячейка 2

Заголовок 1	Заголовок 2
Ячейка 1	Ячейка 2

В данном примере устанавливается высота заголовка как 40 пикселов и выравнивание текста происходит по нижнему краю. Результат примера показан на рис. 2.10.

Выравнивание текста в ячейках

Рис. 2.10. Выравнивание текста в ячейках

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

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

Старые браузеры не отображали цвет фона пустых ячеек вида , поэтому в том случае, когда требовалось оставить ячейку без содержимого, но отобразить цвет фона, внутрь ячейки добавляли неразделяемый пробел ( ). Пробел не всегда подходит, особенно когда нужно установить высоту ячейки 1–2 пиксела, из-за чего широкое распространение получил однопиксельный прозрачный рисунок. Действительно, такой рисунок можно масштабировать на свое усмотрение, но он на веб-странице никак не отображается.

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

Для управления видом пустых ячеек используется свойство empty-cells , при значении hide граница и фон в пустых ячейках не отображается. Если все ячейки в строке пустые, то строка прячется целиком. Ячейка считается пустой в следующих случаях:

нет вообще никаких символов;
в ячейке содержится только перевод строки, символ табуляции или пробел;
значение visibility установлено как hidden .

Добавление неразрывного пробела воспринимается как видимое содержание, т.е. ячейка уже будет не пустой (пример 2.10).

Пример 2.10. Пустые ячейки

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

    Использование empty-cells     Леонардо 5 8  
 Рафаэль  11  
 Микеланджело 24  
 Донателло   13

Вид таблицы в браузере Safari показан на рис. 2.11а. Та же таблица в браузере IE7 продемонстрирована на рис. 2.11б.

Вид таблицы в браузере Safari

а. В браузере Safari, Firefox, Opera, IE8, IE9

Вид таблицы в браузере Internet Explorer 7

б. В браузере IE7

Рис. 2.11. Вид таблицы с пустыми ячейками

2.8. CSS-таблицы

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

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

Форматирование таблиц

Содержание:
1. Границы таблицы border
2. Как задать ширину и высоту таблицы
3. Как задать фон таблицы
4. Столбцы таблицы
5. Как добавить таблице заголовок
6. Как убрать промежуток между рамками ячеек
7. Как увеличить промежуток между рамками ячеек
8. Как скрыть пустые ячейки таблицы
9. Компоновка макета таблицы с помощью свойства table-layout
10. Лучшие макеты таблиц (Топ-10 таблиц)

1. Границы таблицы border

Таблица и ячейки внутри неё по-умолчанию отображаются в браузере без видимых границ. Границы таблицы задаются свойством border :

table < border-collapse: collapse; /*убираем пустые промежутки между ячейками*/ border: 1px solid grey; /*устанавливаем для таблицы внешнюю границу серого цвета толщиной 1px*/ >

Границы ячеек заголовка каждого столбца задаются для элемента th :

Границы ячеек тела таблицы задаются для элемента td :

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

th, td

Внешнюю границу таблицы можно выделить, задав ей увеличенную ширину:

table

Границы можно задавать частично:

/* устанавливаем для таблицы внешнюю границу серого цвета толщиной 3px */ table < border-top: 3px solid grey; >/* задаём для ячейки тела таблицы границу серого цвета толщиной 1px */ td

Подробнее о свойстве border вы можете прочитать здесь.

2. Как задать ширину и высоту таблицы

По умолчанию ширина и высота таблицы определяется содержимым её ячеек. Если ширина не задана, то она будет равна ширине самого широкого ряда (строки).

Ширина таблицы и столбцов задаётся с помощью свойства width . Если для таблицы задано table , то ширина таблицы будет равна ширине блока-контейнера, в котором она находится.

Ширину таблицы и столбцов обычно задают в px или % , например:

table < width: 600px; >th < width: 20%; >td:first-child

Фиксировать высоту с помощью свойства height не рекомендуется.

th, td

3. Как задать фон таблицы

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

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

4. Столбцы таблицы

с помощью элемента можно задать фон для любого количества столбцов;
с помощью селектора table td:first-child , table td:last-child можно задать стили для первого или последнего столбца таблицы (за исключением первой ячейки заголовка таблицы);
с помощью селектора table td:nth-child(правило отбора столбцов) можно задать стили для любых столбцов таблицы.

Подробнее про элемент вы можете прочитать здесь.

Подробнее про CSS-селекторы вы сможете прочитать здесь.

5. Как добавить таблице заголовок

Добавить заголовок в таблицу можно с помощью элемента , а с помощью свойства caption-side его можно поместить перед таблицей или под ней. Для горизонтального выравнивания текста заголовка применяется свойство text-align .

caption-side
Значения:
top	Заголовок таблицы располагается над таблицей. Значение по умолчанию.
bottom	Располагает заголовок под таблицей.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

  .Таблица № 1 Company  Q1  Q2  Q3  Q4

caption

caption_side

6. Как убрать промежуток между рамками ячеек

Рамки ячеек таблицы по умолчанию разделены небольшим промежутком. Если задать для таблицы border-collapse: collapse , то промежуток уберётся.

border-collapse
Значения:
separate	Рамки ячеек располагаются раздельно.
collapse	Рамки ячеек сливаются в одну, а промежутки между рамками убираются.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

table

table_border_collapse

7. Как увеличить промежуток между рамками ячеек

С помощью свойства border-spacing можно менять расстояние между рамками ячеек. Данное свойство применяется к таблице в целом.

border-spacing
Значения:
	Добавляет промежутки между рамками как по вертикали, так и по горизонтали. Если заданы две длины, то первая всегда определяет горизонтальный промежуток, а вторая — вертикальный.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

table < border-collapse: separate; border-spacing: 10px 20px; >table

table_border_spacing

8. Как скрыть пустые ячейки таблицы

Свойство empty-cells скрывает или показывает пустые ячейки. Действует только на ячейки, которые не содержат какой-либо контент. Если для ячейки задан фон, а для таблицы задано table , то ячейка не будет скрыта.

empty-cells
Значения:
show	Рамка и фон пустой ячейки будут отрисовываться так же, как для ячейки таблицы, имеющей содержимое.
hide	Если все ячейки строки пусты, то вся строка отображается так, если бы было задано значение display: none .
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

  Company  Q1  Q2  Q3  
 Microsoft  20.3  30.5  
 Google  50.2  40.63  45.23

Company	Q1	Q2	Q3
Microsoft	20.3	30.5
Google	50.2	40.63	45.23

table < border: 1px solid #69c; border-collapse: separate; empty-cells: hide; >th, td

table_empty

9. Компоновка макета таблицы с помощью свойства table-layout

Компоновка макета таблицы определяется одним из двух подходов: фиксированный макет или автоматический макет. Под компоновкой в данном случае подразумевается как распределяется ширина таблицы между шириной ячеек.

Свойство не наследуется.

table-layout
Значения:
auto	Значение по умолчанию. Ширина макета таблицы определяется шириной её содержимого с учетом значений свойств padding-left , padding-right , border-left width плюс одна ширина border-right последней ячейки в ряду, или заданной шириной ячеек и толщиной рамки. Если ширина ячеек не задана явно, они могут быть разной ширины.
fixed	Свойство сработает только в том случае, если для таблицы задана ширина. Ширина ячеек будет одинаковой, а содержимое ячеек, которое не помещается в ячейку, будет наползать под содержимое соседней ячейки.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

table

10. Лучшие макеты таблиц

По материалам статьи Top 10 CSS Table Designs из журнала Smashing Magazine

top-table

1. Горизонтальный минимализм

Горизонтальные таблицы — это таблицы, текст в которых читается по горизонтали. Каждая сущность представляет собой отдельную строку. Вы можете оформить подобные таблицы в минималистском стиле, поместив двухпиксельную границу под заголовком th .

top-table1

 Employee Salary Bonus Supervisor
 Stephen C. Cox $300 $50 Bob
 Josephin Tan $150 - Annie
 Joyce Ming $200 $35 Andy
 James A. Pentel $175 $25 Annie

Employee	Salary	Bonus	Supervisor
Stephen C. Cox	$300	$50	Bob
Josephin Tan	$150	-	Annie
Joyce Ming	$200	$35	Andy
James A. Pentel	$175	$25	Annie

table < font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; background: white; max-width: 70%; width: 70%; border-collapse: collapse; text-align: left; >th < font-weight: normal; color: #039; border-bottom: 2px solid #6678b1; padding: 10px 8px; >td < color: #669; padding: 9px 8px; transition: .3s linear; >tr:hover td

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

top-table2

td < border-bottom: 1px solid #ccc; color: #669; padding: 9px 8px; transition: .3s linear; >/*остальной код - как в примере выше*/

Добавление эффекта :hover для элемента tr облегчит чтение таблиц, оформленных в минималистском стиле. При наведении курсора мыши на ячейку, остальные ячейки той же строки выделяются одновременно, что упрощает процесс отслеживания информации, если таблицы имеют несколько столбцов.

top-table3

th < font-weight: normal; color: #039; padding: 10px 15px; >td < color: #669; border-top: 1px solid #e8edff; padding: 10px 15px; >tr:hover td

2. Вертикальный минимализм

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

top-table4

th < font-weight: normal; border-bottom: 2px solid #6678b1; border-right: 30px solid white; border-left: 30px solid white; color: #039; padding: 8px 2px; >td

3. «Коробочный» стиль

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

top-table5

th < font-size: 13px; font-weight: normal; background: #b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid white; color: #039; padding: 8px; >td < background: #e8edff; border-bottom: 1px solid white; color: #669; border-top: 1px solid transparent; padding: 8px; >tr:hover td

Самое сложное — найти ту цветовую гамму, которая будет гармонично сочетаться с вашим сайтом. Если сайт нагружен по графике и дизайну, то вам будет довольно трудно использовать этот стиль.

top-table6

table < font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; max-width: 70%; width: 70%; text-align: center; border-collapse: collapse; border-top: 7px solid #9baff1; border-bottom: 7px solid #9baff1; >th < font-size: 13px; font-weight: normal; background: #e8edff; border-right: 1px solid #9baff1; border-left: 1px solid #9baff1; color: #039; padding: 8px; >td

4. Горизонтальная зебра

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

top-table7

th < font-weight: normal; color: #039; padding: 10px 15px; >td < color: #669; border-top: 1px solid #e8edff; padding: 10px 15px; >tr:nth-child(2n)

5. Газетный стиль

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

top-table8

table < border: 1px solid #69c; >th < font-weight: normal; color: #039; border-bottom: 1px dashed #69c; padding: 12px 17px; >td < color: #669; padding: 7px 17px; >tr:hover td

top-table9

table < border: 1px solid #69c; >th < font-weight: normal; color: #039; padding: 10px; >td < color: #669; border-top: 1px dashed white; padding: 10px; background:#ccddff; >tr:hover td

top-table10

table < border: 1px solid #6cf; >th < font-weight: normal; font-size: 13px; color: #039; text-transform: uppercase; border-right: 1px solid #0865c2; border-top: 1px solid #0865c2; border-left: 1px solid #0865c2; border-bottom: 1px solid white; padding: 20px; >td

6. Фон таблицы

Если вы ищете быстрый и уникальный способ оформления таблицы, выберите привлекательное изображение или фото, относящиеся к теме таблицы и установите ее фоном таблицы.

table < background: url("https://html5book.ru/wp-content/uploads/2019/04/suggestions.png") 98% 86% no-repeat; >th < font-weight: normal; font-size: 14px; color: #339; padding: 10px 12px; background: white; >td < color: #669; border-top: 1px solid white; padding: 10px 12px; background: rgba(51, 51, 153, .2); transition: .3s; >tr:hover td

Как сделать таблицу стилей в html

Таблицы и стили

Цвет фона ячеек

Поля внутри ячеек

Границы и рамки

Использование атрибута cellspacing

Применение свойства border

Выравнивание содержимого ячеек

Словарь терминов

Таблицы и стили

Цвет фона ячеек

Поля внутри ячеек

Расстояние между ячейками

Границы и рамки

Использование атрибута cellspacing

Применение свойства border

Выравнивание содержимого ячеек

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

2.8. CSS-таблицы

Форматирование таблиц

1. Границы таблицы border

2. Как задать ширину и высоту таблицы

3. Как задать фон таблицы

4. Столбцы таблицы

5. Как добавить таблице заголовок

6. Как убрать промежуток между рамками ячеек

7. Как увеличить промежуток между рамками ячеек

8. Как скрыть пустые ячейки таблицы

9. Компоновка макета таблицы с помощью свойства table-layout

10. Лучшие макеты таблиц

1. Горизонтальный минимализм

2. Вертикальный минимализм

3. «Коробочный» стиль

4. Горизонтальная зебра

5. Газетный стиль

6. Фон таблицы

Добавить комментарий Отменить ответ