Название

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

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

Это заметка, в которой я бы хотел рассказать о том, как вы можете создавать и настраивать границы для таблиц на веб-страницах.

Итак, имеем следующую таблицу:

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

Пока наша таблица еще не имеет границ.

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

Для таблиц, также как и для многих других элементов на веб-странице, для создания границ нужно использовать свойство border.

Почитать об этом свойстве CSS можно здесь.

Итак, давайте применим это свойство к элементу таблицы table:

table {border:1px solid #000;}

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

Как же можно создать границу для каждой ячейки в таблице?

Для этого давайте воспользуемся следующими стилями:

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

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

Как это сделать, читаем здесь.

Назад Далее