Search-this.com’s Styling Table Columns with CSS by Paul OB
First Group Second Group
Example Colgroup
red blue green orange red blue green orange red blue
1 2 3 4 5 6 7 8 9 10
1 2 3 4 5 6 7 8 9 10
1 2 3 4 5 6 7 8 9 10
1 2 3 4 5 6 7 8 9 10 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Styling columns with colgroup</title>
		<style type="text/css">
			table{border-collapse:collapse}
			.col1,.col5,.col9{background:red}
			.col2,.col6,.col10{background:blue}
			.col3,.col7{background:green}
			.col4,.col8{background:orange}
			td,th{border:1px solid #000;padding:5px}
			.col1-group {background:#ccc;}
			.col2-group {background:#ddd;}
		</style>
	</head>
	<body>
		<table cellspacing="0" cellpadding="0">
			<thead>
				<colgroup>
					<col span="5" class="col1-group" />
					<col span="5" class="col2-group" />
				</colgroup>
				<tr>
					<th colspan="5">First Group</td>
					<th colspan="5">Second Group</th>
				</tr>
			</thead>
			<tbody>
				<caption>
				Example Colgroup
				</caption>
				<colgroup>
					<col class="col1" />
					<col class="col2" />
					<col class="col3" />
					<col class="col4" />
					<col class="col5" />
					<col class="col6" />
					<col class="col7" />
					<col class="col8" />
					<col class="col9" />
					<col class="col10" />
				</colgroup>
				<tr>
					<th>red</th>
					<th>blue</th>
					<th>green</th>
					<th>orange</th>
					<th>red</th>
					<th>blue</th>
					<th>green</th>
					<th>orange</th>
					<th>red</th>
					<th>blue</th>
				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>