How to Style a Table with CSS

  • google plus

In Brief...

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.

Take our Introduction to CSS Training course for free.

See the Course Outline and Register

Instructions

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

Author: Chris Minnick

Chris is a prolific author and trainer, and the CEO of WatzThis?. His published books include Writing Computer Code, JavaScript for Kids, Coding with JavaScript For Dummies, Beginning HTML5 and CSS3 For Dummies, Webkit For Dummies, CIW eCommerce Certification Bible, and New Riders' XHTML.

Discuss