Design Shack — Web Design Gallery, Articles & Community

10 CSS Table Examples

Today we’re going to take a look at a selection of beautiful tables styled using CSS. These are sourced from a variety of different sites. If you’re interested in learning how to do this yourself, be sure to take a look at a few of our CSS tutorials!

Free CSS Layout Templates

When designing a new website, having a template to work from can save a huge amount of time. We have a collection of 12 great CSS templates to base your design on, both fixed and fluid layouts. These free CSS templates are designed by Mitch Bryson, and provided for you with his permission.

• Static – 1 Column
  
  View template
  Download template

---

• Static – 2 Column
  
  View template
  Download template

---

• Static – 2 Column
  
  View template
  Download template

---

• Static – 3 Column
  
  View template
  Download template

---

• Static – 3 Column
  
  View template
  Download template

---

• Static – 3 Column
  
  View template
  Download template

---

• Fluid – 1 Column
  
  View template
  Download template

---

• Fluid – 2 Column
  
  View template
  Download template

---

• Fluid – 2 Column
  
  View template
  Download template

---

• Fluid – 3 Column
  
  View template
  Download template

---

• Fluid – 3 Column
  
  View template
  Download template

---

• Fluid – 3 Column
  
  View template
  Download template

One Column Slider Layout

So you know what the aim of this tutorial is, take a look at the end result. This is a fairly technical website, but uses the Moo.fx javascript library for the effects. Make sure that it is downloaded and installed before getting started.

Setting up Moo.fx

First of all, you need to download this Javascript package from the Moo.fx site. Make sure that this is included in the head of each page.

The HTML

You can download a copy of the HTML for the page to take a look and see how the effect is achieved.

The CSS

body {
	color: #222;
	font: 62.5% verdana, arial, helvetica, sans-serif;
	margin: 5px 0 0;
	padding: 0;
	text-align: center;
}
h3 {
	background: #000;
	margin: 5px 0 0;
	padding: 1px 0;
	height: 17px;
	width: 600px;
	cursor: pointer;
	font-size: 0.99em;
}
h3 a:link, h3 a:visited {
	color: #fff;
	
	padding: 2px 8px 1px;
	-moz-outline-style: none;
	display: block;
	height: 14px;
	width: 330px;
	text-decoration: none;
}
#container {
	
	width: 666px;
	text-align: left;
	margin: 0 auto;
}
#header {
	text-align: center;
}
#content {
	padding: 0 10px 25px 33px;
}
p {
	margin: 0 0 1px;
	padding: 5px;
	line-height: 15px;
}
div.wrapper {
	background-color: #EBEBEB;
}
#content div {
	margin: 0;
	padding: 0;
	height: 1%;
}
.stretcher {
	background: none !important;
}

Put it all together

Make sure you reference Moo.fx and the style sheet in the head of your HTML document, and you should be ready to go! Adding new sections to the layout is as simple as adding a new heading and following the structure which is already there.