Table with Affinity

Translation from: A CSS styled table original: Http://veerle.duoh.com/comments.php?id=315_0_2_0_C copyright to the original author all this translation of the page copyright, authorized blue ideal. Reprint please indicate the source

In the previous period of time to create a CSS calendar, and then I want to use CSS to create a table model, the model follows the affinity rules, and has a good visual effect.

Figure: Color selection and collocation

The advantage of doing this is that it's best to use tables to load data, and you can be flexible about defining styles for each cell. Here are the specific practices

First in Photoshop to design an effect out, through a variety of colors, small icons and other common sense, made a satisfactory effect of the picture. Next, there are three images in the tribunal as background images of the title, and if you're not very good at color, here are some palette tools for you.

Www.snook.ca/technical/colour_contrast/colour.html

Veerle.duoh.com/comments.php?id=108_0_2_20_c8

Data structure is

<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>


...

You can see that I used the scope property to make sure that the table shows better results in a visually-free browser, which defines whether the header element contains a row (scope= "col") or a column (scope= "Row"). Below is the CSS content for the above title, use and background to better differentiate them

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 following defines the heading style on the left

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 data here comes from the MAC technical specifications of each power Mac g5|http://www.apple.com/powermac/specs.html down to define common and important data content

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;


}

So far, the whole production process is over.

View Table Effects

View CSS Files

The translator's words: This page has been tested by me through the standard authentication of the Ie,firefox,opera, and compatible with the mainstream browser, for a large number of data, you can use JS to achieve two kinds of background alternating display.