Buenas paramonso.
El ejercicio hace lo que pide el enunciado, pero se podrían cambiar algunas cosas.
Para ahorrar código, podrías haber insertado las imágenes desde el código css.
En .tab-des estableces un color de letra y posteriormente en td, th {...} estableces otro con lo que el que estableciste en la clase tab-des pierde su efecto, y en tfoot td{...} vuelves a establecer el mismo tipo de letra que ya habías establecido en .tab-des
También pedirte que resuelvas los ejercicios con lo que pide el enunciado exclusivamente, para no hacer el código a corregir tan largo.
Te dejo un ejemplo:
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<style>
/* <<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/* <<<<<<<<<<<<<<<<<<<<<<<<EJERCICIO Nº 58 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/* <<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<CONTENEDOR PRINCIPAL >>>>>>>>>>>>>>>>>*/
.Cont1{
margin:4% auto; /*Centrar el contenedor en el centro de la pagina*/
border: 2px solid white; /*Grosor del contenedor */
height: 450px; /*Altura del contenedor */
width: 900px; /*Anchura del contenedor*/
background-color: white; /*Color fondo contenedor*/
padding-top: 10px; /*Separación del borde de la cabecera*/
}
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<DISEÑO DE LA TABLA >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>><*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
.tab-des {
font-family: Calibri;
width: 840px; /*ancho de latabla*/
margin: 0.5% auto; /*Alineacion tabla*/
color: black;
font-size:30px;
text-align: center;
}
td, th {
border: 1px solid transparent;
height: 65px;
border-collapse:collapse;
text-shadow: 5px 5px #ffffff;
background-position: 50%;
background-repeat: no-repeat;
}
.colum1, .colum2{
background-color:#E6E6FA;/*Color del fondo de la caja*/
}
.colum3 {
background-color:#DAF7A6 ;/*Color del fondo de la caja*/
}
thead th{
border-top-left-radius:10px; /*esquinas redondeadas*/
border-top-right-radius:10px;
}
tfoot td{
font-weight: bold; /*fuente para el tfoot */
border-bottom-left-radius:10px;/*esquinas redondeadas*/
border-bottom-right-radius:10px;
}
.verde {
background-image: url("http://imgur.com/0VfOuO8.png");
}
.rojo {
background-image: url("http://imgur.com/lZX3UpQ.png");
}
</style>
</head>
<body>
<div class="Cont1" >
<table class="tab-des">
<!--<caption>: elemento opcional que permite poner un título de tabla. Muchas veces no se usa.-->
<thead>
<!-- <tr> Filas (table row).-->
<tr>
<!-- <th> Columnas de cabecera -->
<th class="colum1">Standard</th>
<th class="colum2">Professional</th>
<th class="colum3">Enterprise</th>
</tr>
</thead>
<tbody>
<tr>
<!-- <td> Columnas normales de datos (table data cell). -->
<td class="colum1 verde"></td>
<td class="colum2 verde"></td>
<td class="colum3 verde"></td>
</tr>
<tr>
<!-- <td> Columnas normales de datos (table data cell). -->
<td class="colum1 verde"></td>
<td class="colum2 verde"></td>
<td class="colum3 verde"></td>
</tr>
<tr>
<!-- <td> Columnas normales de datos (table data cell). -->
<td class="colum1 rojo"></td>
<td class="colum2 verde"></td>
<td class="colum3 verde"></td>
</tr>
<tr>
<!-- <td> Columnas normales de datos (table data cell). -->
<td class="colum1 rojo"></td>
<td class="colum2 rojo"></td>
<td class="colum3 verde"></td>
</tr>
</tbody>
<tfoot>
<tr>
<!-- <td> Columnas normales de datos (table data cell). -->
<td class="colum1">$99</td>
<td class="colum2">$199</td>
<td class="colum3">$399</td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>Saludos.
Mostrar Mensajes
RSS