Теория урока

53. Отступы между ячейками в HTML-таблицах

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ

В предыдущем уроке научились создавать заголовки для 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 ячейки в таблице склеиваются, образую одну линию.

Для примера создайте таблицу:

Пример (html)

<!DOCTYPE html>
<html>
	<head>
		<title>codebra</title>
	</head>
	<body>
		<table cellspacing = "4">
			<tr>
				<td>Ячейка 1</td>
				<td>Ячейка 2</td>
			</tr>
		</table>
	</body>
</html>

Пример (css)

table {
	border: 3px solid #000;
}

td {
	padding: 7px;
	border: 1px solid #888;
}

Таблица будет выглядеть следующим образом:

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

Теперь добавьте свойство border-collapse со значением collapse и посмотрите результат.

Пример (css)

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

Если в свойстве border-spacing одно значение, то отступ будет со всех сторон, а если два значения, то первое значение определяет горизонтальное расстояние, а второе вертикальное. Далее пример:

Пример (css)

table {
    border-collapse: separate;
    border-spacing: 8px 3px;
}

Теперь пройдите практику и переходите к следующему уроку, в котором продолжим знакомство с CSS и поработаем с цветом таблиц.

53. Отступы между ячейками в HTML-таблицах

Похожие уроки Codebra