Стиль таблицы css: Стилизация таблиц — Изучение веб-разработки

Стиль таблицы — Учебник CSS — schoolsw3.com

❮ Назад Далее ❯

Заполнение таблицы

Чтобы управлять пространством между границей и содержимым таблицы, используйте свойство padding для элементов <td> и <th>:

Пример

th, td {
  padding: 15px;
  text-align: left;
}

Горизонтальные разделители

Добавьте свойство border-bottom к <th> и <td> для горизонтальных разделителей:

Пример

th, td {
  border-bottom: 1px solid #ddd;
}

Таблица при наведении

Используйте :hover в <tr>, чтобы выделить строки таблицы при наведении курсора мыши:

Пример

tr:hover {background-color: coral;}

Полосатая таблица

Для таблиц в полоску «зебра» используйте селектор nth-child() и добавьте background-color ко всем четным (или нечетным) строкам таблицы:

Пример

tr:nth-child(even) {background-color: #f2f2f2;}

Цветная таблица

Приведенный ниже пример определяет цвет фона и цвет текста элементов <th> элементов:

Пример

th {
  background-color: #04AA6D;
  color: white;
}

❮ Назад Далее ❯

Таблицы в CSS.

Главная > Учебник CSS >

Отображение границ ячеек

CSS позволяет установть не только стиль границы таблицы, но и стиль границ отдельных ячеек. Так как у каждой ячейки свои границы, то между соседними ячейками граница получается сдвоенная. Но существует возможность объединить границы соседних ячеек в одну. Для этого есть свойство border-collapse. Оно принимает значения:

border-collapse: separate — у каждой ячейки своя граница (по умолчанию)

border-collapse: collapse — общая граница

border-collapse: inherit — значение принимается от родительского элемента

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

Стиль:

+

td
  {
  border: 1px solid Red;
  }

HTML код:

<table>
  <tr>
    <td>строка 1 ячейка 1</td>
    <td>строка 1 ячейка 2</td>
  </tr>
  <tr>
    <td>строка 2 ячейка 1</td>
    <td>строка 2 ячейка 2</td>
  </tr>
</table>

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

Теперь установим таблице свойство border-collapse.

#t1
  {
  border-collapse: collapse;
  }

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

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

CSS даёт возможность установить конкретное расстояние между ячейками таблицы. Для этого используется свойтсво border-spacing. Расстояние указывается в единицах измерения CSS. Это свойство не работает, если установлено свойство border-collapse со значением collapse.

Создадим ещё одну таблицу и установим расстояние между ячейками:

Стиль:

#dis 
  {
  border-spacing: 10px;
  }

<table>
  <tr>
    <td>строка 1 ячейка 1</td>
    <td>строка 1 ячейка 2</td>
  </tr>
  <tr>
    <td>строка 2 ячейка 1</td>
    <td>строка 2 ячейка 2</td>
  </tr>
</table>

Свойству border-spacing можно указать два значения через пробел. При этом, первое значение — это расстояние по горизонтали, а второе — по вертикали.

Укажем созданной таблице разные расстояния.

border-spacing: 5px 15px;

Положение заголовка таблицы

Для таблицы можно создать заголовок. Он создаётся с помощью тэга <caption>. Свойство caption-side позволяет установить положение заголовка. Оно принимает значения:

caption-side: top — над таблицей (по умолчанию)

caption-side: bottom — под таблицей

Существуют другие значения, но они поддерживаются не всеми браузерами.

Добавим второй таблице заголовок и расположим его под таблицей:

<caption>Заголовок таблицы</caption>

Отображение пустых ячеек

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

empty-cells: show — ячейки видны (по умолчанию)

empty-cells: hide — ячейки не видны

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

Стиль:

#hid td
  {
  background-color: #909090;
  }

<table>
  <tr>
    <td>строка 1 ячейка 1</td>
    <td>строка 1 ячейка 2</td>
  </tr>
  <tr>
    <td></td>
    <td>строка 2 ячейка 2</td>
  </tr>
</table>

Пустая ячейка видна, у неё отображаются рамка и фон.

Теперь добавим таблице свойство empty-cells.

#hid 
  {
  empty-cells: hide;
  }

Обратите внимание, пустая ячейка не отображается в таблице

Как стилизовать таблицу с помощью CSS

До появления CSS люди использовали HTML-таблицы для компоновки веб-страниц.

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

CSS	Теги	Описание
border-spacing	table	Задает расстояние между соседними границами и содержимым, окружающим таблицу.
граница-коллапс	таблица	Принимает значения отдельно и коллапс . Используется, чтобы указать, должны ли соседние границы быть объединены (свернуть) или нет (разделить).
padding	table	При применении к ячейкам таблицы (например, th и td ) создает буфер между их содержимым и границами ячеек.
граница	таблица	Позволяет управлять границами каждой стороны таблицы и каждой стороны каждой ячейки независимо, используя свойства границы.
background-image	table, th, td	Указывает фоновое изображение.
цвет фона	все	Задает цвет фона.
ширина	таблица, тыс., тд	Задает ширину таблицы , -й или тд .
height	table, tr, th, td	Указывает высоту таблицы , th или td .
выравнивание по тексту	тр, т, тд	Выравнивает текст.
vertical-align	tr, th, td	Выравнивает по вертикали.

Следующий код показывает использование CSS:

 

<голова>
<мета-кодировка="UTF-8">
<тип стиля="текст/CSS">
тело {
цвет фона: #f6f6ff;
семейство шрифтов: Calibri, Myriad;
}
#основной {
ширина: 780 пикселей;
отступ: 20 пикселей;
маржа: авто;
}
таблица. timecard {
маржа: авто;
ширина: 600 пикселей;
граница коллапса: коллапс;
граница: 1px сплошная #fff; /*для старого IE*/
стиль границы: скрытый;
}
table.timecard заголовок {
цвет фона: #f79646;
цвет: #fff;
размер шрифта: x-большой;
вес шрифта: полужирный;
межбуквенный интервал: .3em;
}
table.timecard thead th {
отступ: 8px;
цвет фона: #fde9d9;
размер шрифта: крупный;
}
table.timecard thead th#thDay {
ширина: 40%;
}
table.timecard thead th#thRegular, table.timecard thead th#thOvertime, table.timecard thead th#thTotal {
ширина: 20%;
}
table.timecard th, table.timecard td {
отступ: 3px;
ширина границы: 1px;
стиль границы: сплошной;
цвет границы: #f79646 #ccc;
}
table.timecard тд {
выравнивание текста: вправо;
}
table.timecard tbody th {
выравнивание текста: по левому краю;
вес шрифта: нормальный;
}
table.timecard tfoot {
вес шрифта: полужирный;
размер шрифта: большой;
цвет фона: #687886;
цвет: #fff;
}
table.timecard tr.even {
цвет фона: #fde9д9;
}



<тело>
<дел>
<таблица>
Табель учета рабочего времени


День
Обычный
Сверхурочные
Всего




Понедельник
8
<тд>0
8


Вторник
8
2. 5
10,5


Среда
8
<тд>0
8


четверг
8
<тд>0
8


пятница
8
<тд>0
8


Суббота
<тд>0
<тд>5
<тд>5


воскресенье
<тд>0
<тд>1
<тд>1




Общее количество часов в неделю:
<тд>40
<тд>8.5
48,5