Tabla Bonita y Simple con CSS3

Este código le da un aspecto diferente cuando queremos hacer el uso de tablas, para presentar alguna comparación o información que necesite ser mostrada en tablas.

El markup HTML de la Tabla.

<div id="content">
    <table cellspacing="0">
        <tr>
            <th>Task Details</th>
            <th>Progress</th>
            <th>Vital Task</th>
        </tr>
        <tr>
            <td>Look at Orman's <a href="http://www.premiumpixels.com/simple-little-table-psd/">simple table design</a></td>
            <td>100%</td>
            <td>No</td>
        </tr>
        <tr>
            <td>Turn table design into a web project</td>
            <td>100%</td>
            <td>Yes</td>
        </tr>
        <tr>
            <td>Drink another cup of coffee</td>
            <td>50%</td>
            <td>Yes</td>
        </tr>
        <tr>
            <td>Take a stretch break</td>
            <td>0%</td>
            <td>Yes</td>
        </tr>
        <tr>
            <td>Post this stuff on the interweb</td>
            <td>100%</td>
            <td>Yes</td>
         </tr>
    </table>
</div>

Actualizado: El CSS contiene un Reset genérico para reseatear los estilos de los elementos.

/* reset */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    margin: 0;
    padding: 0;
    font: 12px/15px "Helvetica Neue",Arial, Helvetica, sans-serif;
    color: #555;
    background: #f5f5f5;
}
a {
    color: #666;
}
#content {
    width: 65%;
    max-width: 690px;
    margin: 6% auto 0;}

table {
    overflow: hidden;
    border: 1px solid #d3d3d3;
    background: #fefefe;
    width: 70%;
    margin: 5% auto 0;
    border-radius:5px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
th, td {padding:18px 28px 18px; text-align:center; }
th {padding-top:22px; text-shadow: 1px 1px 1px #fff; background:#e8eaeb;}
td {border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;}
tr.odd-row td {background:#f6f6f6;}
td.first, th.first {text-align:left}
td.last {border-right:none;}

td {
    background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);
    background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));
}
tr.odd-row td {
    background: -moz-linear-gradient(100% 25% 90deg, #f6f6f6, #f1f1f1);
    background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f1f1f1), to(#f6f6f6));
}
th {
    background: -moz-linear-gradient(100% 20% 90deg, #e8eaeb, #ededed);
    background: -webkit-gradient(linear, 0% 0%, 0% 20%, from(#ededed), to(#e8eaeb));
}
tr:first-child th.first {
    -moz-border-radius-topleft:5px;
    -webkit-border-top-left-radius:5px; /* Saf3-4 */
}
tr:first-child th.last {
    -moz-border-radius-topright:5px;
    -webkit-border-top-right-radius:5px; /* Saf3-4 */
}
tr:last-child td.first {
    -moz-border-radius-bottomleft:5px;
    -webkit-border-bottom-left-radius:5px; /* Saf3-4 */
}
tr:last-child td.last {
    -moz-border-radius-bottomright:5px;
    -webkit-border-bottom-right-radius:5px; /* Saf3-4 */
}

jsFiddle Demo

5 Responses

  1. jajajajaja
    jajajajaja Abril 9, 2014 at 12:34 PM |

    jajajajja vaya mierda poner todas las etiquetas en el primer selector de css!?!?! jajaj es una broma?? ! xD prueba con * a ver k tal jajjaa

    1. Anthuan Vasquez
      Anthuan Vasquez Abril 12, 2014 at 7:31 PM |

      No es una broma, es un ejemplo, tu puedes poner los selectores que quieras. Esto solo es un ejemplo de como hacerlo con las propiedades, etc.

  2. Danny Feliz
    Danny Feliz Junio 10, 2014 at 2:22 AM |

    Me silvió, a diferencia de tu utilicé Normalize así no tengo que aplicar todo esos reset 😉

    1. Anthuan Vasquez
      Anthuan Vasquez Junio 10, 2014 at 7:33 PM |

      Señores es un simple ejemplo de como hacerlo no es que tiene que ser así…

    2. Danny Feliz
      Danny Feliz Junio 10, 2014 at 7:35 PM |

      Jejeje ok, no pasa nada solo decía.

      Buen tutorial paisano.

Comments are closed, but trackbacks and pingbacks are open.