HTML Dog
Skip to navigation

Column groups

col and colgroup elements.

HTML

<!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>

	<!-- Link back to HTML Dog: -->
	<p><a href="http://www.htmldog.com/examples/"><img src="http://www.htmldog.com/badge1.gif" alt="HTML Dog"></a></p>
</body>
</html>

Output

View original