Название

Техники работы с фоном таблиц с помощью CSS.

Еще одна задача при работе с таблицами, с которой приходится часто встречаться - это задание фонового цвета для ячеек таблицы.

Это задачу прекрасно позволяет решить свойство background, о котором я писал здесь.

Его можно точно также применять для таблиц.

Давайте рассмотрим несколько примеров, как это работает на практике.

Для примера, возьмем эту таблицу.

HTML:

<table>
<tr>
<td>Столбец 1</td>
<td>Столбец 2</td>
</tr>
<tr>
<td>Столбец 1</td>
<td>Столбец 2</td>
</tr>
</table>

CSS:

table td {border:1px solid #000;}
table {border-collapse:collapse;}

Давайте сделаем фон всех ячеек этой таблицы серым цветом.

Сделать это очень просто, добавляем свойство background к стилям CSS.

table td {border:1px solid #000; background:#ccc;}

А, что если выделить цветом нужно лишь первую строку таблицы либо какую-либо ячейку?

В этом случае можно воспользоваться классами:

<table>
<tr>
<td>Столбец 1</td>
<td>Столбец 2</td>
</tr>
<tr>
<td>Столбец 1</td>
<td>Столбец 2</td>
</tr>
</table>

CSS:

table td {border:1px solid #000; }
table {border-collapse:collapse;}
.str1 {background:#ccc;}

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

В целом это самые распространенные техники для работы с фоном таблиц с помощью CSS. Лично мне чаще всего приходится использовать на практике именно их.

Назад Далее