HTML5 rating 1-5

Table based infobox with css3

Table based infobox: html:

<table><thead><tr>
<th>Attribute</th><th>Value</th>
</tr></thead><tbody>
<tr><td>width</td><td>100px</td></tr>
<tr><td>title</td><td>text</td></tr>
<tr><td>colspan</td><td>4</td></tr>
<tr><td>rowspan</td><td>2</td></tr>
</tbody></table>

<table><thead><tr><th>
 Title
</th></tr></thead><tbody><tr><td>
<ul>
  <li>First element</li>
  <li>Second element</li>
  <li>Third element</li>
  <li>Fourth element</li>
  </ul>
</td></tr></tbody></table>

css (part of Reset.css included):

* { /*** Reset start ***/
 padding:0;
 margin:0;
 font-family:Tahoma,Verdana,Arial;
 font-size:100%;
}
ul {
 list-style:disc outside;padding-left:25px;
}
table {
 border-spacing:0;
 border:1px solid #666;
}
body {color:#333;}
/* Reset end */
table {
 margin:20px;
 width:10em;
 
 background:#ace;
 background: -moz-linear-gradient(top,#eff,#ace 7%, #ace 90%,#777 );
 background: -webkit-gradient(linear, left top, left bottom,  color-stop(0,#eff), color-stop(0.07, #ace), color-stop(1,#777));

 -moz-border-radius:.6em;
 border-radius:.6em;
 
 -webkit-box-shadow: .4em .4em .4em rgba(0,0,0,0.5);
 -moz-box-shadow: .4em .4em .4em rgba(0,0,0,0.5);
 box-shadow: .4em .4em .4em rgba(0,0,0,0.5);
}
 
table th {
 padding:.4em;
 text-align:center;
 border-bottom:1px #888 solid;
 background-color:transparent;
 text-shadow: .06em .06em .1em rgba(0,0,0,0.5);
}
table td {
 background:#fafafa;
 padding:.5em;
 border:1px #888 solid;
}
table tr:last-child td:first-child {
 -moz-border-radius-bottomleft:.5em;
 border-bottom-left-radius:.5em;
}
table tr:last-child td:last-child {
 -moz-border-radius-bottomright:.5em;
 border-bottom-right-radius:.5em;
}

Reset.css

My own Reset.css
Actually it contains Base.css as well. I don't see the reason for an extra Base.css
I don't test on IE7 (forget about IE6).

* {
 -moz-box-sizing:border-box;
}
/*upd: 20111020 ************************************/
* {
 box-sizing:border-box;
}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
strike, strong, sub, sup,
dl, dt, dd,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
 margin:0;
 padding:0;
 border:0;
 font-weight:inherit;
 font-size:100%;
 font-style:inherit;
 font-family:inherit;
 border:1px none #000;
 background:transparent;
 vertical-align:baseline;
}
body {
 line-height: 1.2;
 color:#333;
}
body, select, input, textarea {
 font-family:Tahoma,Verdana,Arial,helvetica, Sans-Serif;
 margin:0;
}
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary { 
 display:block;
}
pre,code {
 font-family:Monospace;
}
html,body {
 height:100%;
}
table {
 border-collapse:collapse;
 border-spacing:0;
 /*width:100%;*/
}
th,td {
 border:1px solid #666;
 /*padding:.5em;*/
 vertical-align:top; 
}
caption {
 margin-bottom:.5em;
 text-align:center;
}
blockquote,q { quotes: "\201C" "\201D"; } 
blockquote:before { content: "\201C"; font-weight: bold; }  
blockquote:after { content: "\201D"; font-weight: bold; }

ol,ul {list-style-position:outside;padding-left:25px;}
ol {list-style-type:decimal;}
ul {list-style-type:disc;}
li:before {display:marker;marker-offset:1em;}

ins {text-decoration:underline;}
del {text-decoration: line-through;}
em {font-style:italic;}
h1 {font-size:200%;}
h2 {font-size:178%;}
h3 {font-size:159%;}
h4 {font-size:141%;}
h5 {font-size:126%;}
h6 {font-size:112%;}
h1,h2,h3,h4,h5,h6 {margin:1em 0;}
h1,h2,h3,h4,h5,h6,strong,th {font-weight:bold;}
mark {background-color:#ff9;}

abbr,acronym {
 border-bottom:1px dotted #000;
 cursor:help;
}
p,fieldset {margin-bottom:1em;} 

Credits:
Yahoo yui3 cssreset
Eric Meyer
HTML5 Reset.css
http://html5boilerplate.com/

---