Tables with affinity

A css styled Table Original: http://veerle.duoh.com/comments.php? Id = 315_0_2_0_c: The copyright belongs to the original author. The translated page is copyrighted and blue is authorized. Reprinted please indicate the source

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 knowledge of various colors, small icons, and so on. 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 "). The following is the content of CSS. For the title above, it is better to distinguish it from the background.

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.

View table results

View CSS files

Translator's words: This page has passed the W3C standard strict validation and is compatible with mainstream browsers such as IE, Firefox, and opera. For a large amount of data, you can use JavaScript to display rows in different backgrounds.