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

За выравнивание по горизонтали отвечает 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.

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

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

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

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

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