Use CSS to create a table with affinity

I made CSS calendar some time ago, and then I want to use css to create a table model. This model follows the affinity rules and has good visual effects.
Figure: color selection and matching
The advantage of this is that using tables to load data is self-evident, and you can flexibly define styles for each cell. The following are the specific practices:
First, design an effect in Photoshop, and make a satisfactory effect through the common sense of various colors and small icons. Next, we will use the three pictures below as the title background image. If you are not sure about the color, we will provide you with some color coloring tools.
Www. snook. ca/technical/colour_contrast/colour.html
Veerle.duoh.com/comments.php? Id = pai_0_2_20_c8
The 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 = "tolerations" class = "nobg"> tolerations </th>
<Th scope = "col" abbr = "Dual 1.8 GHz"> Dual 1.8 GHz </th>
<Th scope = "col" abbr = "Dual 2 GHz"> Dual 2 GHz </th>
<Th scope = "col" abbr = "Dual 2.5 GHz"> Dual 2 GHz </th>
</Tr>
<Tr>
<Th scope = "row" class = "spec"> Model </th>
<Td> M9454LL/A </td>
<Td> M9455LL/A </td>
<Td> M9457LL/A </td>
</Tr>
...
We can see that I used the scope attribute to make sure that the table shows better results in a browser with no visual effect, this attribute defines whether the title content contained in the title element is a row (scope = "col") or a column (scope = "row ").

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 title style on the left is defined below

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

Here the data comes from MAC's technical specifications of each Power Mac G5 | http://www.apple.com/powermac/specs.htmlto 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 entire production process has ended.