Форматируем таблицы при помощи CSS

В этой статье вы увидите, как при помощи стилей CSS отформатировать таблицы.

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

Теги для компоновки таблиц

Таблицу можно сделать при помощи следующих тегов:

Таблицу можно сделать при помощи следующих тегов:
`<caption>`	Определяет заголовок (скорее подпись) таблицы.
`<col>`	Определяет один столбец в таблице.
`<colgroup>`	Определяет группу столбцов в таблице.
`<table>`	Создает таблицу.
`<tbody>`	Определяет одну или несколько строк в таблице.
`<td>`	Создает одну ячейку в таблице.
`<tfoot>`	Определяет строки, которые отображаются внизу таблицы.
`<th>`	Определяет заголовок для каждого столбца таблицы.
`<thead>`	Предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы.
`<tr>`	Создает строку в таблице.

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

Ниже будут рассмотрены свойства CSS, применяемые для форматирования таблиц.

Границы

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

CSS

th, td {border:2px solid black;}

Этот промежуток можно удалить с помощью свойства CSS border-spacing (для IE понадобится атрибут cellspacing тега table). Однако, если вы удаляете промежуток, границы удвоятся.

CSS

table {border-spacing:0;}

удаляем промежуток - границы удваиваются

Чтобы избавиться от удвоенных границ и промежутков используйте свойство border-collapse со значением collapse.

CSS

table {border-collapse:collapse;}

Отступы

Отступы (в HTML атрибут cellpadding) определяются при помощи свойства padding. Можно применять только к ячейкам (<td>) или к ячейкам под заголовки (<td>) .

CSS

th, td {padding:10px 12px 13px 14px;}

Выравнивание

Свойство text-align

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

CSS

th, td, table {text-align:center;}

Свойство vertical-align

Свойство vertical-align (значения: top, baseline, bottom, middle) выравнивает содержимое по вертикали. Область применения: th, td.

CSS

th, td {vertical-align:bottom;}

Форматируем столбцы

К тегам col и colgroup можно применять свойства width и свойства группы background. Это удобно, если у вас возникнет желание выделить столбец или задать ему определенную ширину.

Класс и идентификаторы

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