Вы здесь: Главная > CSS > Группы столбцов: элементы col и colgroup

Группы столбцов: элементы col и colgroup

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

Оформление группы столбцов с элементами col и colgroup.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Column groups</title>
	<style>
		body {
			font: 80%/1.5 arial, helvetica, sans-serif;
		}
	
		table {
			border: 1px solid #668;
			border-collapse: collapse;
			caption-side: bottom;
		}
	
		td {
			padding: 0.1em 2em;
			border-spacing: 1em;
		}

	
		col.alternative {
			background: #ddf;
		}
	</style>
</head>
<body>
	<table>
		<caption>Caption</caption>
		<colgroup>
			<col>
			<col class="alternative">
			<col>
			<col class="alternative">
			<col>
		</colgroup>
		<tr>
			<td>This</td>
			<td>That</td>
			<td>The other</td>
			<td>Lunch</td>
			<td>Lunch</td>
		</tr>
		<tr>
			<td>Ladybird</td>
			<td>Locust</td>
			<td>Lunch</td>
			<td>Lunch</td>
			<td>Lunch</td>
		</tr>
		<tr>
			<td>Ladybird</td>
			<td>Locust</td>
			<td>Lunch</td>
			<td>Lunch</td>
			<td>Lunch</td>
		</tr>
		<tr>
			<td>Ladybird</td>
			<td>Locust</td>
			<td>Lunch</td>
			<td>Lunch</td>
			<td>Lunch</td>
		</tr>
		<tr>
			<td>Ladybird</td>
			<td>Locust</td>
			<td>Lunch</td>
			<td>Lunch</td>
			<td>Lunch</td>
		</tr>
	</table>
</body>
</html>

Страницы в тему:

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