Внимание! На этой странице вы найдете материал урока из архивного курса по HTML. Курс был написан в 2015, обновлен в 2024 году и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по HTML и на странице первого урока.
- Удалите атрибут
cellspacingиз таблицы - Добавьте свойство
border-spacingс любым значением в CSS форму, где написан комментарий
В предыдущем уроке научились создавать заголовки для HTML-таблиц с помощью тега <caption>. В этом уроке продолжим поверхностное знакомство с CSS и поработаем над внешним видом HTML-таблиц.
Отступ можно задать при помощи атрибута cellspacing. Атрибут принимает целые числа. Но в наше время атрибуты уже не эффективны, поэтому будем использовать стили CSS, чтобы сделать отступ между ячейками.
Будем использовать два свойства: border-collapse и border-spacing.
- Cвойство
border-collapseпишем в стилях для таблицы со значениемseparate(о свойстве можете почитать подробно в интернете). - Свойство
border-spacingзадает расстояние между ячейками и является аналогом атрибутаcellspacing. Оно измеряется в пикселях, процентах и т.д.
Свойство border-collapse со значением collapse: (border-collapse: collapse), не будет совместно работать со свойством border-spacing. Со значением collapse ячейки в таблице склеиваются, образую одну линию.
Для примера создайте таблицу:
<!DOCTYPE html>
<html>
<head>
<title>codebra</title>
</head>
<body>
<table cellspacing = "4">
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</table>
</body>
</html>table {
border: 3px solid #000;
}
td {
padding: 7px;
border: 1px solid #888;
}Таблица будет выглядеть следующим образом:
Теперь добавьте свойство border-collapse со значением collapse и посмотрите результат.
table {
border: 3px solid #000;
border-collapse: collapse;
}Если в свойстве border-spacing одно значение, то отступ будет со всех сторон, а если два значения, то первое значение определяет горизонтальное расстояние, а второе вертикальное. Далее пример:
table {
border-collapse: separate;
border-spacing: 8px 3px;
}Теперь пройдите практику и переходите к следующему уроку, в котором продолжим знакомство с CSS и поработаем с цветом таблиц.
Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу HTML.
