html.okpython.net
HTML и CSS для начинающих

CSS :: Свойство border-collapse

css-свойство border-collapse (от англ. border collapseсхлопывание границ) устанавливает, как отображать границы ячеек таблицы: слитно или раздельно.

Характеристики

  • Значение по умолчанию: separate.
  • Применяется: к элементу <table>, а также к элементам, у которых значение display установлено в table или inline-table.
  • Наследуется: да.
  • Анимируется: нет.
  • JavaScript: object.style.borderCollapse="value".

Синтаксис

border-collapse: collapse | separate

Значения

  • collapse – границы смежных ячеек в местах соприкосновения сливаются в одну. Тоже самое касается границ ячеек и внешних границ таблицы, если они установлены.
  • separate – каждая ячейка имеет свою отдельную границу (рамку). В местах соприкосновения смежных ячеек, а также ячеек и внешних границ таблицы, если они установлены, пользователь будет видеть две линии (значение используется браузером по умолчанию).

Ссылки

Примеры

HTML Результат htmlCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		table{
		width: 50%;
		margin-top: 3em;
		border: 1px solid green;
		}
		
		td{
		border: 1px solid green;
		}

		.separate_borders{
		border-collapse: separate;
		}
		
		.collapse_borders{
		border-collapse: collapse;
		}
		
	</style>
	
</head>
<body>
	
	<table class="separate_borders">
		<caption>Таблица с раздельными границами</caption>
		<tr>
			<td>Ячейка 1.1</td><td>Ячейка 1.2</td>
		</tr>
		<tr>
			<td>Ячейка 2.1</td><td>Ячейка 2.2</td>
		</tr>
	</table>	
	
	
	<table class="collapse_borders">
		<caption>Таблица с объединенными границами</caption>
		<tr>
			<td>Ячейка 1.1</td><td>Ячейка 1.2</td>
		</tr>
		<tr>
			<td>Ячейка 2.1</td><td>Ячейка 2.2</td>
		</tr>
	</table>
		
</body>
</html>			

Пример №1