How to Style a Table with CSS

See CSS: Tips and Tricks for similar articles.

Back before CSS, people used HTML tables to lay out web pages. The rule is the same now as it was then: tables should not be used to lay out pages. They should be used for tabular data, such as financial reports or a meeting agenda. To style tables with CSS, you should first be familiar with HTML table syntax.

The following is a list of the CSS you can use in tables, the tags you can use them with, and a brief description of each:

CSS	Tags	Description
border-spacing	table	Specifies the space between adjacent borders and the content surrounding the table.
border-collapse	table	Takes the values `separate` and `collapse`. Used to indicate whether adjacent borders should be merged (collapse) or not (separate).
padding	table	When applied to table cells (e.g., `th` and `td`), creates a buffer between their content and the cell borders.
border	table	Allows you to control the borders of each side of the table and each side of each cell independently using the border properties.
background-image	table, th, td	Specifies the background image.
background-color	all	Specifies the background color.
width	table, th, td	Specifies the width of the `table`, `th`, or `td`.
height	table, tr, th, td	Specifies the height of the `table`, `th`, or `td`.
text-align	tr, th, td	Aligns the text.
vertical-align	tr, th, td	Aligns vertically.

The following code shows this CSS in use:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body {
	background-color: #f6f6ff;
	font-family: Calibri, Myriad;
}

#main {
	width: 780px;
	padding: 20px;
	margin: auto;
}

table.timecard {
	margin: auto;
	width: 600px;
	border-collapse: collapse;
	border: 1px solid #fff; /*for older IE*/
	border-style: hidden;
}

table.timecard caption {
	background-color: #f79646;
	color: #fff;
	font-size: x-large;
	font-weight: bold;
	letter-spacing: .3em;
}

table.timecard thead th {
	padding: 8px;
	background-color: #fde9d9;
	font-size: large;
}

table.timecard thead th#thDay {
	width: 40%;	
}

table.timecard thead th#thRegular, table.timecard thead th#thOvertime, table.timecard thead th#thTotal {
	width: 20%;
}

table.timecard th, table.timecard td {
	padding: 3px;
	border-width: 1px;
	border-style: solid;
	border-color: #f79646 #ccc;
}

table.timecard td {
	text-align: right;
}

table.timecard tbody th {
	text-align: left;
	font-weight: normal;
}

table.timecard tfoot {
	font-weight: bold;
	font-size: large;
	background-color: #687886;
	color: #fff;
}

table.timecard tr.even {
	background-color: #fde9d9;
}
</style>
<title>Employee Timecard</title>
</head>

<body>
<div id="main">
<table class="timecard">
	<caption>Employee Timecard</caption>
	<thead>
		<tr>
			<th id="thDay">Day</th>
			<th id="thRegular">Regular</th>
			<th id="thOvertime">Overtime</th>
			<th id="thTotal">Total</th>
		</tr>
	</thead>
	<tbody>
		<tr class="odd">
			<th>Monday</th>
			<td>8</td>
			<td>0</td>
			<td>8</td>
		</tr>
		<tr class="even">
			<th>Tuesday</th>
			<td>8</td>
			<td>2.5</td>
			<td>10.5</td>
		</tr>
		<tr class="odd">
			<th>Wednesday</th>
			<td>8</td>
			<td>0</td>
			<td>8</td>
		</tr>
		<tr class="even">
			<th>Thursday</th>
			<td>8</td>
			<td>0</td>
			<td>8</td>
		</tr>
		<tr class="odd">
			<th>Friday</th>
			<td>8</td>
			<td>0</td>
			<td>8</td>
		</tr>
		<tr class="even">
			<th>Saturday</th>
			<td>0</td>
			<td>5</td>
			<td>5</td>
		</tr>
		<tr class="odd">
			<th>Sunday</th>
			<td>0</td>
			<td>1</td>
			<td>1</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<th>Total weekly hours:</th>
			<td>40</td>
			<td>8.5</td>
			<td>48.5</td>
		</tr>
	</tfoot>
</table>
</div>
</body>
</html>

This code renders the following: CSS table

How to Style a Table with CSS

Related Articles