Tabla

by Alejandro Hernández

HTML

<table cellspacing=0;>
    <thead>
        <th>Código</th><th>Nombre</th><th>Valor</th><th>Fecha</th>
    </thead>
    <tbody>
        <tr>
            <td>ABA</td><td>Activa</td><td>1.57%</td><td>11/12/2008</td>
        </tr>
        <tr>
            <td>HMI</td><td>Pasiva</td><td>0.52%</td><td>10/10/2007</td>
        </tr>
        <tr>
            <td>OTR</td><td>ING. BRT. LIBOR</td><td>1.25%</td><td>05/08/2012</td>
        </tr>
    </tbody>        
</table>

CSS

body {
    font-family:"Arial";
    font-size:11px;
    line-height:18px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAGElEQVQIW2NkwAIYr127JokuzohVJdGCANcYAqFnmNWjAAAAAElFTkSuQmCC);  
}

table
{
  color:#111;
  text-shadow:0 1px 1px rgba(0,0,0,0.25);    
  border-radius: 3px;
  min-width: 150px;
  background: #bf3030;
}
 
tbody tr:nth-child(even) td {  
  background: #fbe1ce;/*linear-gradient(#fffaff, #eaefee);*/
}
tbody tr:nth-child(odd) td {
  background: #fbebce;
}

table tr th,
table tr td {
  border-right: 1px solid #bf3030;
  border-bottom: 1px solid #bf3030;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 5px;
  padding-right: 3px;
    
}
table tr th{
   font-size: 12px; 
   font-weight:normal;
}

table tr th:first-child,
table tr td:first-child {
    border-left: 1px solid #bf3030;
}

table tr th {
  border-top: 1px solid #bf3030;
  text-align: left;
  color:#E6E9F4;
}

/* top-left border-radius */
table tr:first-child th:first-child {
  border-top-left-radius: 3px;
}
/* top-right border-radius */
table tr:first-child th:last-child {
  border-top-right-radius: 3px;
}
/* bottom-left border-radius */
table tr:last-child td:first-child {
  border-bottom-left-radius: 3px;
}
/* bottom-right border-radius */
table tr:last-child td:last-child {
  border-bottom-right-radius: 3px;
}