Вы здесь: Главная > CSS > Сворачивание границ ячеек таблицы и границ таблицы

Сворачивание границ ячеек таблицы и границ таблицы

Опубликовано автором Просмотры: 7

Оформление границ ячеек таблицы и границ таблицы.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Border collapsing 2</title>
	<style>
		table {
			border: 1px solid black;
		}

		td, th {
			padding: 0.1em 1em;
			border: 10px solid #ccc;
		}

		#t2 {
			border-collapse: collapse;
		}
	</style>
</head>
<body>
	<h1>Border collapsing 2</h1>

	<h2><code>border-collapse: separate;</code> (default)</code></h2>
	<table>
		<tr>
			<th colspan="2">Carnivores</th>
			<th>Primates</th>
		</tr>
		<tr>
			<td>Tiger</td>
			<td>Grey Wolf</td>
			<td>Indri</td>
		</tr>
		<tr>
			<td>Cheetah</td>
			<td>Cape hunting dog</td>
			<td>Sifaka</td>
		</tr>
		<tr>
			<td>Caracal</td>
			<td>Red fox</td>
			<td>Brown lemur</td>
		</tr>
		<tr>
			<td>Wildcat</td>
			<td>Fennec</td>
			<td>Dwarf lemur</td>
		</tr>
	</table>

	<h2><code>border-collapse: collapse;</code></code></h2>
	<table id="t2">
		<tr>
			<th rowspan="2">Carnivores</th>
			<td>Tiger</td>
			<td>Cheetah</td>
			<td>Caracal</td>
			<td>Wildcat</td>
		</tr>
		<tr>
			<td>Grey Wolf</td>
			<td>Cape hunting dog</td>
			<td>Red fox</td>
			<td>Fennec</td>
		</tr>
		<tr>
			<th>Primates</th>
			<td>Indri</td>
			<td>Sifaka</td>
			<td>Brown lemur</td>
			<td>Dwarf lemur</td>
		</tr>
	</table>
</body>
</html>

Добавить комментарий