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

Recomendado
  • jajajajaja

    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

    • 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.

  • Danny Feliz

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

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

    • Danny Feliz

      Jejeje ok, no pasa nada solo decía.

      Buen tutorial paisano.