A nice CSS styled table tutorial PDF Print E-mail

A nice CSS styled table tutorial

Styling a table with CSS has mayor advantages since it separates the structural markup from presentation formatting. It offers extra flexibility on the way you present your table. You have the freedom to style each side of a table cell separately, isn't that cool.

First create a simple draft in Photoshop. Try out some color combinations, bullets, colors for the alternating rows etc. If you can't decide on colors, then maybe these color calculators can help you out.

In the next step I export these 3 image files to style the background of the headers:

The structural markup
The coding in BBEdit is pretty simple. Here is some part of it:

<table id="mytable" cellspacing="0" summary="The technical
specifications of the Apple PowerMac G5 series">
<caption>Table 1: Power Mac G5 tech specs </caption>
<tr>
  <th scope="col" abbr="Configurations" class="nobg">Configurations</th>
  <th scope="col" abbr="Dual 1.8GHz">Dual 1.8GHz</th>
  <th scope="col" abbr="Dual 2GHz">Dual 2GHz</th>
  <th scope="col" abbr="Dual 2.5GHz">Dual 2GHz</th>
</tr>
<tr>
  <th scope="row" class="spec">Model</th>
  <td>M9454LL/A</td>
  <td>M9455LL/A</td>
  <td>M9457LL/A</td>
</tr>
...

As you can see, the scope attribute to make sure that a this table makes sense in non-visual browsers. This attribute defines whether the header cell holds header information for a column (scope="col") or a row (scope="row").

The CSS styles
For the headers at the top use a background image to make them extra visible, except for the one on the left. For this one create a class (.nobg try to use 'bg' as an abbreviation of 'background', to be easy to understand). Here is how the CSS code looks:

th {
	font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica,
	sans-serif;
	color: #6D929B;
	border-right: 1px solid #C1DAD7;
	border-bottom: 1px solid #C1DAD7;
	border-top: 1px solid #C1DAD7;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: left;
	padding: 6px 6px 6px 12px;
	background: #CAE8EA url(images/bg_header.jpg) no-repeat;
}

th.nobg {
	border-top: 0;
	border-left: 0;
	border-right: 1px solid #C1DAD7;
	background: none;
}

The headers on the left that appear as rows (the specification headers) have alternating styles:

th.spec {	
	border-left: 1px solid #C1DAD7;
	border-top: 0;
	background: #fff url(images/bullet1.gif) no-repeat;
	font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica,
	sans-serif;
}

th.specalt {
	border-left: 1px solid #C1DAD7;
	border-top: 0;
	background: #f5fafa url(images/bullet2.gif) no-repeat;
	font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica,
	sans-serif;
	color: #B4AA9D;
}

The table cells that hold the technical specifications of each Power Mac G5 also have alternating styles:

td {
	border-right: 1px solid #C1DAD7;
	border-bottom: 1px solid #C1DAD7;
	background: #fff;
	padding: 6px 6px 6px 12px;
	color: #6D929B;
}


td.alt {
	background: #F5FAFA;
	color: #B4AA9D;
}

And this is the final result:

This tutorial was presented by Veerle Pieters


Add this to your website
 

Add comment

Please keep your comments relevant to the topic. Email addresses are never displayed, but they are required to confirm your comments.
In order to comment without Captcha requirement, please register.
To create a live link, simply type the URL (including http://) or email address and we will make it a live link for you. You can put only 1 URL in your comments. Line breaks and paragraphs are automatically converted.


Security code
Refresh

Statistics

Members : 57
Content : 1479
Web Links : 356
Content View Hits : 2112971

About Hook4Free

Hook4Free was initiated to give information about freebees for everyone who needs them. Free Icons, Free Templates, Free Images and many more...