Простейшая таблица §

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

1. Тег table обозначает таблицу;
2. Тег tr расшифровывается как «table row», обозначает строку таблицы;
3. Тег td расшифровывается как «table data», обозначает ячейку внутри строки таблицы. Пример простейшей таблицы:

<table>
  <tr>
    <td>Ячейка 1.1</td>
    <td>Ячейка 1.2</td>
  </tr>
  <tr>
    <td>Ячейка 2.1</td>
    <td>Ячейка 2.2</td>
  </tr>
</table>

Рамки таблиц §

Рамки по умолчанию отображаются, если у тега table задан атрибут border с ненулевым значением. При помощи атрибута border можно изменять только толщину рамок. Более гибко можно управлять рамками при помощи CSS.

По умолчанию браузер рисует рамки таблицы и рамки отдельных ячеек раздельно. Чтобы избавиться от таких двойных рамок, используется CSS-свойство таблицы border-collapse. Вот так:

table {
  border-collapse: collapse;
}

Значение#collapse убирает двойные рамки: схлопываются рамки соседних ячеек, а также рамки ячеек и внешняя рамка таблицы.

Для управления отдельными рамками необходимо использовать следующие свойства:

1. border-top — верхняя рамка;
2. border-right — правая рамка;
3. border-bottom — нижняя рамка;
4. border-left — левая рамка.

Отступы внутри ячеек §

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

CSS-свойство padding задаёт «внутренние отступы элемента» со всех сторон. Можно задавать отступы для каждой из сторон отдельно, используя свойства:

1. padding-top — отступ вверх;
2. padding-right — отступ вправо;
3. padding-bottom — отступ вниз;
4. padding-left — отступ влево.

Отступы между ячейками §

Отступы между ячейками не работают с border-collapse: collapse.

Свойство border-collapse: separate является значением по умолчанию и «расклеивает» ячейки. Отступы между ячейками можно задать с помощью атрибута cellspacing тега table или c помощью CSS-свойства border-spacing, которое задаётся для всей таблицы.

Ячейки-заголовки §

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

По умолчанию текст внутри th выделяется жирным и выравнивается по центру ячейки.

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

Заголовок таблицы выделяется при помощи тега caption. Он должен размещаться внутри тега table, причём непосредственно внутри него и первым, до остальных вложенных тегов. Вот так:

table>
  caption>Текст</caption
  ...
</table

С помощью CSS можно переместить заголовок таблицы в любое место. По вертикали заголовок таблицы перемещается CSS-свойством caption-side со значениями top и bottom, которые обозначают до и после таблицы соответственно. По горизонтали заголовок таблицы выравнивается CSS-свойством text-align со значениями left, right и center.

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

Чтобы объединить ячейки по горизонтали, необходимо использовать атрибут colspan у тегов th или td.

Если задать ячейке атрибут colspan со значением 2, то она как бы «растягивается» на ячейку справа, но та ячейка не исчезает, а отодвигается и в таблице появляется новый столбец. Чтобы удалить его, нужно удалить ячейку, которая находится справа от «растянутой».

Для объединения более двух ячеек точно так же используется атрибут colspan.

Объединение ячеек по вертикали осуществляется с помощью атрибута rowspan у тега td или th.

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

Можно растягивать ячейку одновременно и по вертикали, и по горизонтали. Для этого нужно задать ячейке два атрибута: rowspan и colspan. Вытеснение соседних ячеек будет происходить так же, как и при обычном объединении ячеек.

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

За выравнивание по горизонтали отвечает CSS-свойство text-align. Чаще всего используются значения left, center и right.

За выравнивание по вертикали отвечает CSS-свойство vertical-align. Чаще всего используются значения top, middle и bottom.

Чтобы задать выравнивание содержимого ячеек, надо в стилях указать:

{
  vertical-align: значение;
  text-align: значение;
}

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

Раскраска таблицы §

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

Чтобы задать цвета для ячейки в CSS, нужен такой код:

td {
  color: цвет;
  background-color: цвет;
  border: 1px solid цвет;
}

Раскрашивать можно и td, и th, и даже table. Можно использовать классы и применять стили для этих классов.

Размеры таблицы §

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

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

Ширина таблицы задаётся с помощью CSS-свойства width, а высота с помощью свойства height, например:

table {
  width: 100px;
  height: 100px;
}

Размеры таблицы можно задавать как в абсолютных единицах, например, в пикселях — 20px, так и в относительных, в процентах — 20%.

При использовании процентов размеры таблицы будут вычисляться с учётом размеров родительского элемента: контейнера, окна мини-браузера, страницы.

Особое значение auto включает расчёт размеров по умолчанию. Например, width: auto; или height: auto;.

Проценты при задании высоты обычно не работают.

Размеры отдельных ячеек и столбцов Размеры ячеек задаются с помощью CSS-свойств width и height.

Есть два варианта добавления стилей ячейкам:

1. Назначать ячейкам уникальные имена классов и применять стили для этих классов
2. Использовать атрибут style, внутри которого можно писать CSS-код.

Пример второго варианта:

td style="width: 100px;">
  ...
</td

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