Style Entire Table Column

HTML & CSS
1

Here is a snippet of code for my table…


		<thead>
			<tr id="headerRow">
				<th scope="col" id="col1">
					Event<br />
					Name
				</th>
				<th scope="col">
					Ticket<br />
					Price
				</th>
				<th scope="col">
					# of<br />
					Attendees
				</th>
				<th scope="col">
					<br />Total
				</th>
				<th scope="col">
					Choose<br />
					One
				</th>
			</tr>
		</thead>
		<tbody>
			<!-- Row 1 -->
			<tr>
				<th scope="row" class="headerCol">
					Flower Show<br />
					Mankato, MN<br />
					Sept 24, 2011
				</th>
				<td>$20</td>
				<td>
					<select>
						<option value="">--</option>
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
					</select>
				</td>
				<td>$60</td>
				<td>* Select *</td>
			</tr>

[b]What is the best way to code things if I want to easily…

1.) Style Column #1?

2.) Style any other Column?[/b]

Since I have a Header, it seems like it messes any easy styling choices, but I’m thinking there is a more streamlined way to do what I’ve been trying.

Thanks,

Debbie

2

Hi,

There is limited styling available for columns specifically using colgroup and col but the limitations are that only width, border, background and visibility are supported. See my old article for a run down on how to use these elements.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.events {border-collapse:collapse}
.events td,.events th{padding:10px 20px;}
col{background:#fffccc;}
.col1,.col3,.col5{background:#fcf;}
.events thead th{border-bottom:1px solid #000;padding:2px 20px}
</style>
</head>

<body>
<table class="events">
		<colgroup>
		<col class="col1">
		<col class="col2">
		<col class="col3">
		<col class="col4">
		<col class="col5">
		</colgroup>
		<thead>
				<tr id="headerRow">
						<th scope="col" id="col1"> Event<br />
								Name </th>
						<th scope="col"> Ticket<br />
								Price </th>
						<th scope="col"> # of<br />
								Attendees </th>
						<th scope="col"> <br />
								Total </th>
						<th scope="col"> Choose<br />
								One </th>
				</tr>
		</thead>
		<tbody>
				<!-- Row 1 -->
				<tr>
						<th scope="row" class="headerCol"> Flower Show<br />
								Mankato, MN<br />
								Sept 24, 2011 </th>
						<td>$20</td>
						<td><select>
										<option value="">--</option>
										<option value="1">1</option>
										<option value="2">2</option>
										<option value="3">3</option>
										<option value="4">4</option>
								</select></td>
						<td>$60</td>
						<td>* Select *</td>
				</tr>
		<tbody>
</table>
</body>
</html>

Properties applied to the td and th will over-ride any settings placed on the colgroup elements.

If you need more styling than this then it means adding classes to the table elements where appropriate.