Table style – it’s a difficult thing to do right sometimes without a plugin, or either by spending a lot of time playing with css styles and refreshing the browser to see your new changes. You know I’m telling the truth ;) What we really need, I realized after searching many times for good looking table css examples, is a site that gives us some css examples and alternative stylesheets to help us design good-looking tables. I’ve compiled a few here that I’ve spent my own time designing, and I hope that people can use these to build upon and to design really nice tables. Maybe someone will take these and build a little design site that has css examples for things like tables, forms, headers, etc. There really is a need for this kind of thing…at least my need!

This is for tables that hold data, which is really the purpose of tables, so it includes table headers, etc. Let’s start with something basic that we can build upon.

Example Table for Our Table Styles

<table id="table-design">
	<thead>
		<th>First Name</th>
		<th>Last Name</th>
		<th>Email Address</th>
		<th>Website</th>
	</thead>
	<tbody>
		<tr>
			<td>John</td>
			<td>Smith</td>
			<td>johnsmith@example.com</td>
			<td>http://www.example.com</td>
		</tr>
		<tr>
			<td>Peter</td>
			<td>James</td>
			<td>peterjames@example.com</td>
			<td>http://www.example.com</td>
		</tr>
		<tr>
			<td>Ronald</td>
			<td>Weeley</td>
			<td>ronweeley@example.com</td>
			<td>http://www.example.com</td>
		</tr>
	</tbody>
</table>

Table Style #1 – ABC Basic

CSS Code for Style #1

<style type="text/css">
#table-design thead {
	width: 100%;
}
#table-design td {
	padding: 5px 5px 5px 0;
	vertical-align: top;
}
#table-design thead th {
	padding-right: 10px;
	text-align: left;
}
</style>

An Example of Table Style #1

First NameLast NameEmail AddressWebsite
JohnSmithjohnsmith@example.comhttp://www.example.com
PeterJamespeterjames@example.comhttp://www.example.com
RonaldWeeleyronweeley@example.comhttp://www.example.com

Table Style #2 – Fancy Gray

CSS Code for Style #2

<style type="text/css">
#table-2 {
	border: 1px solid #e3e3e3;
	background-color: #f2f2f2;
        width: 100%;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
}
#table-2 td, #table-2 th {
	padding: 5px;
	color: #333;
}
#table-2 thead {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	padding: .2em 0 .2em .5em;
	text-align: left;
	color: #4B4B4B;
	background-color: #C8C8C8;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#e3e3e3), color-stop(.6,#B3B3B3));
	background-image: -moz-linear-gradient(top, #D6D6D6, #B0B0B0, #B3B3B3 90%);
	border-bottom: solid 1px #999;
}
#table-2 th {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 17px;
	line-height: 20px;
	font-style: normal;
	font-weight: normal;
	text-align: left;
	text-shadow: white 1px 1px 1px;
}
#table-2 td {
	line-height: 20px;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 14px;
	border-bottom: 1px solid #fff;
	border-top: 1px solid #fff;
}
#table-2 td:hover {
	background-color: #fff;
}
</style>

Table Style #2 – Example

First NameLast NameEmail AddressWebsite
JohnSmithjohnsmith@example.comhttp://www.example.com
PeterJamespeterjames@example.comhttp://www.example.com
RonaldWeeleyronweeley@example.comhttp://www.example.com

Table Style #3 – Super Elegant

CSS For Table Style #3

<style type="text/css">
#table-3 {
	border: 1px solid #DFDFDF;
	background-color: #F9F9F9;
	width: 100%;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	font-family: Arial,"Bitstream Vera Sans",Helvetica,Verdana,sans-serif;
	color: #333;
}
#table-3 td, #table-3 th {
	border-top-color: white;
	border-bottom: 1px solid #DFDFDF;
	color: #555;
}
#table-3 th {
	text-shadow: rgba(255, 255, 255, 0.796875) 0px 1px 0px;
	font-family: Georgia,"Times New Roman","Bitstream Charter",Times,serif;
	font-weight: normal;
	padding: 7px 7px 8px;
	text-align: left;
	line-height: 1.3em;
	font-size: 14px;
}
#table-3 td {
	font-size: 12px;
	padding: 4px 7px 2px;
	vertical-align: top;
}
</style>

Example of Table Style #3

First NameLast NameEmail AddressWebsite
JohnSmithjohnsmith@example.comhttp://www.example.com
PeterJamespeterjames@example.comhttp://www.example.com
RonaldWeeleyronweeley@example.comhttp://www.example.com

Table Style #4 – Modern Fresh

Style #4 CSS

<style type="text/css">
#table-4 {
	background-color: whiteSmoke;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
}
#table-4 td, #table-4 th {
}
#table-4 th {
	color: #333;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: normal;
	text-align: left;
	padding: 0 20px;
}
#table-4 td {
	padding: 0 20px;
	line-height: 20px;
	color: #0084B4;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 14px;
	border-bottom: 1px solid #fff;
	border-top: 1px solid #fff;
}
#table-4 td:hover {
	background-color: #fff;
}
</style>

Style #4 Example

First NameLast NameEmail AddressWebsite
JohnSmithjohnsmith@example.comhttp://www.example.com
PeterJamespeterjames@example.comhttp://www.example.com
RonaldWeeleyronweeley@example.comhttp://www.example.com

Table Style #5 – Basic Gray

CSS

<style type="text/css">
#table-5 {
	background-color: #f5f5f5;
	padding: 5px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: 1px solid #ebebeb;
}
#table-5 td, #table-5 th {
	padding: 1px 5px;
}
#table-5 thead {
	font: normal 15px Helvetica Neue,Helvetica,sans-serif;
	text-shadow: 0 1px 0 white;
	color: #999;
}
#table-5 th {
	text-align: left;
	border-bottom: 1px solid #fff;
}
#table-5 td {
	font-size: 14px;
}
#table-5 td:hover {
	background-color: #fff;
}
</style>

Table Style #5 Example – Minimal/Stylish Gray

First NameLast NameEmail AddressWebsite
JohnSmithjohnsmith@example.comhttp://www.example.com
PeterJamespeterjames@example.comhttp://www.example.com
RonaldWeeleyronweeley@example.comhttp://www.example.com

Table Style #6 – Elegant and Practical

CSS for Style #6

<style type="text/css">
#table-6 {
width: 100%
border: 1px solid #B0B0B0;
}
#table-6 tbody {
/* Kind of irrelevant unless your .css is alreadt doing something else */
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
#table-6 thead {
text-align: left;
}
#table-6 thead th {
background: -moz-linear-gradient(top, #F0F0F0 0, #DBDBDB 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F0F0F0), color-stop(100%, #DBDBDB));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F0F0F0', endColorstr='#DBDBDB', GradientType=0);
border: 1px solid #B0B0B0;
color: #444;
font-size: 16px;
font-weight: bold;
padding: 3px 10px;
}
#table-6 td {
padding: 3px 10px;
}
#table-6 tr:nth-child(even) {
background: #F2F2F2;
}
</style>

Example of Style #6

First NameLast NameEmail AddressWebsite
JohnSmithjohnsmith@example.comhttp://www.example.com
PeterJamespeterjames@example.comhttp://www.example.com
RonaldWeeleyronweeley@example.comhttp://www.example.com

My personal favorite table styles from these are #3 and #5 – what do you think?

Related Resources:

CSS Table Style Examples. I tried to add one of my table style designs here to this website, but it wouldn’t let me! Pretty exhaustive list of designs though!