Парад ячеек и столбцов
УРОК «Как сделать отступ между границей таблицы и её содержимым»
Дорогие друзья!
Вы все видели, я уверена, что в красиво оформленных таблицах всегда имеется пустое пространство (отступ)
между границами ячеек таблицы и её содержимым (текстом). Кроме того, с помощью определённого атрибута можно
убрать пространство между ячейками таблицы или наоборот - увеличить его. Это нужно в основном в тех случаях,
когда таблицы используются в качестве модульной сетки.
Чтобы это сделать, нужно прописать для тега <table> атрибуты <cellpadding="значение"
(задаёт отступ между содержимым и границами ячейки) и <cellspacing="значение"
(задаёт расстояние между ячейками таблицы). Посмотрим сначала на исходную таблицу, для наглядности я
каждой из ячеек присвоила свой цвет:
| Строка 1 Ячейка 1 |
Строка 1 Ячейка 2 |
| Строка 2 Ячейка 1 |
Строка 2 Ячейка 2 |
А теперь применим вышеописанные атрибуты:
Результат:
| Строка 1 Ячейка 1 |
Строка 1 Ячейка 2 |
| Строка 2 Ячейка 1 |
Строка 2 Ячейка 2 |
Таким образом, мы видим, что внутри каждой из 4-х ячеек таблицы отступ вокруг текста равен теперь 10 пикселей,
но, поскольку ширина каждой ячейки превышает длину содержимого и текст выровнен по умолчанию по левому краю, справа
отступ будет больше. Убедиться в том, что и справа отступ тоже равен 10 пикселей можно, если немного поиграть
с шириной таблицы, это вы сможете сделать и сами.
Также видно, что увеличилось и расстояние между внешней границей таблицы и ячейками: мы задали в значении атрибута cellspacing
5 пикселей, и ячейки немного отодвинулись от границ таблицы.
Таким образом, регулируя эти параметры с помощью HTML и CSS, можно управлять размещением содержимого таблицы и его оформлением.
До встречи в следующем уроке!
| 
