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 technicalYou 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 {The following defines the heading style on the left
Th.spec {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 {So far, the whole production process is over.
View Table Effects
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "http://www.w3c.org/TR/1999/REC-html401-19991224/ Loose.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><title>css tables</title> <meta http-equiv=content-type content= "text/html; Charset=utf-8 "><link href=" Http://www.webjx.com/upfiles/20060314/20060314125704_styles.css "type=text/css Rel=stylesheet><meta content= "MSHTML 6.00.2900.2802" name=generator></pead><body><p> <a href= "http://www.webjx.com" > Web Teaching Network </a></p><table id=mytable cellspacing=0 "the Technical specifications of the Apple PowerMac G5 series "> <caption>table 1:power Mac G5 Tech Specs </captio n> <TBODY> <TR> <th class=nobg scope=col abbr=configurations>configurations</th> <TH Scope=col abbr= "Dual 1.8" >dual 1.8ghz</th> <th scope=col abbr= "Dual 2" >dual 2ghz</th> <TH S Cope=col abbr= "Dual 2.5 ">dual 2.5ghz</th></tr> <TR> <th class=spec scope=row abbr=model>model</th> &L T td>m9454ll/a</td> <TD>M9455LL/A</TD> <TD>M9457LL/A</TD></TR> <TR> & lt;th class=specalt scope=row abbr= "G5 Processor" >g5 processor</th> <td class=alt>dual 1.8GHz PowerPC G5 </TD> <td class=alt>dual 2GHz PowerPC g5</td> <td class=alt>dual 2.5GHz PowerPC g5</td> ;</tr> <TR> <th class=spec scope=row abbr= "Frontside Bus" >frontside bus</th> Hz per processor</td> <td>1ghz/processor</td> <td>1.25ghz per processor</td></t r> <TR> <th class=specalt scope=row abbr= "L2 Cache" >level2 cache</th>, <TD Per processor</td> <td class=alt>512k/processor</td> <td class=alt>512k per PROCESSOR&L T;/td></tr>&lT;/tbody></table><p><a href= "Http://www.webjx.com/upfiles/20060314/20060314125704_styles.css" >→download stylesheet</a></p></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
