css3tablas
Pimp Your Tables with CSS3, algunos ejemplos de cómo utilizar algunas propiedades CSS3 para embellecer las tablas. Nuevos selectores que podemos usar en partes específicas de la tabla y las filas a fin de crear un estilo único, sin añadir otras clases.

Se webkit y moz, gradientes para crear un mejor aspecto sin utilizar imágenes, además se muestra como insertar contenido en elementos con una clase específica.

Ver DemoDescargar Demo
Ampliar Informacion  Pimp Your Tables with CSS3

  1. /* Table 1 Style */
  2. table.table1{
  3.     font-family: "Trebuchet MS", sans-serif;
  4.     font-size: 16px;
  5.     font-weight: bold;
  6.     line-height: 1.4em;
  7.     font-style: normal;
  8.     border-collapse:separate;
  9. }
  10. .table1 thead th{
  11.     padding:15px;
  12.     color:#fff;
  13.     text-shadow:1px 1px 1px #568F23;
  14.     border:1px solid #93CE37;
  15.     border-bottom:3px solid #9ED929;
  16.     background-color:#9DD929;
  17.     background:-webkit-gradient(
  18.         linear,
  19.         left bottom,
  20.         left top,
  21.         color-stop(0.02, rgb(123,192,67)),
  22.         color-stop(0.51, rgb(139,198,66)),
  23.         color-stop(0.87, rgb(158,217,41))
  24.         );
  25.     background: -moz-linear-gradient(
  26.         center bottom,
  27.         rgb(123,192,67) 2%,
  28.         rgb(139,198,66) 51%,
  29.         rgb(158,217,41) 87%
  30.         );
  31.     -webkit-border-top-left-radius:5px;
  32.     -webkit-border-top-right-radius:5px;
  33.     -moz-border-radius:5px 5px 0px 0px;
  34.     border-top-left-radius:5px;
  35.     border-top-right-radius:5px;
  36. }
  37. .table1 thead th:empty{
  38.     background:transparent;
  39.     border:none;
  40. }
  41. .table1 tbody th{
  42.     color:#fff;
  43.     text-shadow:1px 1px 1px #568F23;
  44.     background-color:#9DD929;
  45.     border:1px solid #93CE37;
  46.     border-right:3px solid #9ED929;
  47.     padding:0px 10px;
  48.     background:-webkit-gradient(
  49.         linear,
  50.         left bottom,
  51.         right top,
  52.         color-stop(0.02, rgb(158,217,41)),
  53.         color-stop(0.51, rgb(139,198,66)),
  54.         color-stop(0.87, rgb(123,192,67))
  55.         );
  56.     background: -moz-linear-gradient(
  57.         left bottom,
  58.         rgb(158,217,41) 2%,
  59.         rgb(139,198,66) 51%,
  60.         rgb(123,192,67) 87%
  61.         );
  62.     -moz-border-radius:5px 0px 0px 5px;
  63.     -webkit-border-top-left-radius:5px;
  64.     -webkit-border-bottom-left-radius:5px;
  65.     border-top-left-radius:5px;
  66.     border-bottom-left-radius:5px;
  67. }
  68. .table1 tfoot td{
  69.     color: #9CD009;
  70.     font-size:32px;
  71.     text-align:center;
  72.     padding:10px 0px;
  73.     text-shadow:1px 1px 1px #444;
  74. }
  75. .table1 tfoot th{
  76.     color:#666;
  77. }
  78. .table1 tbody td{
  79.     padding:10px;
  80.     text-align:center;
  81.     background-color:#DEF3CA;
  82.     border: 2px solid #E7EFE0;
  83.     -moz-border-radius:2px;
  84.     -webkit-border-radius:2px;
  85.     border-radius:2px;
  86.     color:#666;
  87.     text-shadow:1px 1px 1px #fff;
  88. }
  89. .table1 tbody span.check::before{
  90.     content : url(../images/check0.png)
  91. }
  92. /* Table 2 Style */
  93. table.table2{
  94.     font-family: Georgia, serif;
  95.     font-size: 18px;
  96.     font-style: normal;
  97.     font-weight: normal;
  98.     letter-spacing: -1px;
  99.     line-height: 1.2em;
  100.     border-collapse:collapse;
  101.     text-align:center;
  102. }
  103. .table2 thead th, .table2 tfoot td{
  104.     padding:20px 10px 40px 10px;
  105.     color:#fff;
  106.     font-size: 26px;
  107.     background-color:#222;
  108.     font-weight:normal;
  109.     border-right:1px dotted #666;
  110.     border-top:3px solid #666;
  111.     -moz-box-shadow:0px -1px 4px #000;
  112.     -webkit-box-shadow:0px -1px 4px #000;
  113.     box-shadow:0px -1px 4px #000;
  114.     text-shadow:1px 1px 1px #000;
  115. }
  116. .table2 tfoot th{
  117.     padding:10px;
  118.     font-size:18px;
  119.     text-transform:uppercase;
  120.     color:#888;
  121. }
  122. .table2 tfoot td{
  123.     font-size:36px;
  124.     color:#EF870E;
  125.     border-top:none;
  126.     border-bottom:3px solid #666;
  127.     -moz-box-shadow:0px 1px 4px #000;
  128.     -webkit-box-shadow:0px 1px 4px #000;
  129.     box-shadow:0px 1px 4px #000;
  130. }
  131. .table2 thead th:empty{
  132.     background:transparent;
  133.     -moz-box-shadow:none;
  134.     -webkit-box-shadow:none;
  135.     box-shadow:none;
  136. }
  137. .table2 thead :nth-last-child(1){
  138.     border-right:none;
  139. }
  140. .table2 thead :first-child,
  141. .table2 tbody :nth-last-child(1){
  142.     border:none;
  143. }
  144. .table2 tbody th{
  145.     text-align:right;
  146.     padding:10px;
  147.     color:#333;
  148.     text-shadow:1px 1px 1px #ccc;
  149.     background-color:#f9f9f9;
  150. }
  151. .table2 tbody td{
  152.     padding:10px;
  153.     background-color:#f0f0f0;
  154.     border-right:1px dotted #999;
  155.     text-shadow:-1px 1px 1px #fff;
  156.     text-transform:uppercase;
  157.     color:#333;
  158. }
  159. .table2 tbody span.check::before{
  160.     content : url(../images/check1.png)
  161. }
  162.  
  163. /* Table 3 Style */
  164. table.table3{
  165.     font-family:Arial;
  166.     font-size: 18px;
  167.     font-style: normal;
  168.     font-weight: normal;
  169.     text-transform: uppercase;
  170.     letter-spacing: -1px;
  171.     line-height: 1.7em;
  172.     text-align:center;
  173.     border-collapse:collapse;
  174. }
  175. .table3 thead th{
  176.     padding:6px 10px;
  177.     text-transform:uppercase;
  178.     color:#444;
  179.     font-weight:bold;
  180.     text-shadow:1px 1px 1px #fff;
  181.     border-bottom:5px solid #444;
  182. }
  183. .table3 thead th:empty{
  184.     background:transparent;
  185.     border:none;
  186. }
  187. .table3 thead :nth-child(2),
  188. .table3 tfoot :nth-child(2){
  189.     background-color: #7FD2FF;
  190. }
  191. .table3 tfoot :nth-child(2){
  192.     -moz-border-radius:0px 0px 0px 5px;
  193.     -webkit-border-bottom-left-radius:5px;
  194.     border-bottom-left-radius:5px;
  195. }
  196. .table3 thead :nth-child(2){
  197.     -moz-border-radius:5px 0px 0px 0px;
  198.     -webkit-border-top-left-radius:5px;
  199.     border-top-left-radius:5px;
  200. }
  201. .table3 thead :nth-child(3),
  202. .table3 tfoot :nth-child(3){
  203.     background-color: #45A8DF;
  204. }
  205. .table3 thead :nth-child(4),
  206. .table3 tfoot :nth-child(4){
  207.     background-color: #2388BF;
  208. }
  209. .table3 thead :nth-child(5),
  210. .table3 tfoot :nth-child(5){
  211.     background-color: #096A9F;
  212. }
  213. .table3 thead :nth-child(5){
  214.     -moz-border-radius:0px 5px 0px 0px;
  215.     -webkit-border-top-right-radius:5px;
  216.     border-top-right-radius:5px;
  217. }
  218. .table3 tfoot :nth-child(5){
  219.     -moz-border-radius:0px 0px 5px 0px;
  220.     -webkit-border-bottom-right-radius:5px;
  221.     border-bottom-right-radius:5px;
  222. }
  223. .table3 tfoot td{
  224.     font-size:38px;
  225.     font-weight:bold;
  226.     padding:15px 0px;
  227.     text-shadow:1px 1px 1px #fff;
  228. }
  229. .table3 tbody td{
  230.     padding:10px;
  231. }
  232. .table3 tbody tr:nth-child(4) td{
  233.     font-size:26px;
  234.     font-weight:bold;
  235. }
  236. .table3 tbody td:nth-child(even){
  237.     background-color:#444;
  238.     color:#444;
  239.     border-bottom:1px solid #444;
  240.     background:-webkit-gradient(
  241.         linear,
  242.         left bottom,
  243.         left top,
  244.         color-stop(0.39, rgb(189,189,189)),
  245.         color-stop(0.7, rgb(224,224,224))
  246.         );
  247.     background:-moz-linear-gradient(
  248.         center bottom,
  249.         rgb(189,189,189) 39%,
  250.         rgb(224,224,224) 70%
  251.         );
  252.     text-shadow:1px 1px 1px #fff;
  253. }
  254. .table3 tbody td:nth-child(odd){
  255.     background-color:#555;
  256.     color:#f0f0f0;
  257.     border-bottom:1px solid #444;
  258.     background:-webkit-gradient(
  259.         linear,
  260.         left bottom,
  261.         left top,
  262.         color-stop(0.39, rgb(85,85,85)),
  263.         color-stop(0.7, rgb(105,105,105))
  264.         );
  265.     background:-moz-linear-gradient(
  266.         center bottom,
  267.         rgb(85,85,85) 39%,
  268.         rgb(105,105,105) 70%
  269.         );
  270.     text-shadow:1px 1px 1px #000;
  271. }
  272. .table3 tbody td:nth-last-child(1){
  273.     border-right:1px solid #222;
  274. }
  275. .table3 tbody th{
  276.     color:#696969;
  277.     text-align:right;
  278.     padding:0px 10px;
  279.     border-right:1px solid #aaa;
  280. }
  281. .table3 tbody span.check::before{
  282.     content : url(../images/check2.png)
  283. }

Irina’s fresh take on fashion is the ideal fit
isabel marant sneakers Macy’s Glamorama 2013 celebrates Fashion in a New Light

particularly for some large pieces
burberry schalTablet PCs All Over the World