Hola a Todos. Aquí dejo el Ejercicio nº CU01058D del curso práctico de desarrollo web con CSS desde cero.
Código HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="ejercicio58.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<link href="https://fonts.googleapis.com/css?family=Akronim" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Almendra+Display" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=UnifrakturCook:700" rel="stylesheet">
</head>
<body>
<div id="Div1">
<h1 id="cab"> Curso CSS estilos aprenderaprogramar.com</h1>
<h1 id="cab">Practicas de propiedades para Tablas </h1>
<h1 id="subcab">Propiedades de bordes redondeados</h1>
<h1 id="cab">Ejercicio Entrega 58 cu01058d</h1>
<h2 id="nom">Pablo Ramon Perez Blasco</h2>
</div>
<h1 align="center">Ejercicio Entrega 58 cu01058d</h1>
<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" ><img src="http://imgur.com/0VfOuO8.png"></td>
<td class="colum2"><img src="http://imgur.com/0VfOuO8.png"></td>
<td class="colum3"><img src="http://imgur.com/0VfOuO8.png"></td>
</tr>
<tr>
<!-- <td> Columnas normales de datos (table data cell). -->
<td class="colum1"><img src="http://imgur.com/0VfOuO8.png"></td>
<td class="colum2"><img src="http://imgur.com/0VfOuO8.png"></td>
<td class="colum3"><img src="http://imgur.com/0VfOuO8.png"></td>
</tr>
<tr>
<!-- <td> Columnas normales de datos (table data cell). -->
<td class="colum1"><img src="http://imgur.com/lZX3UpQ.png"></td>
<td class="colum2"><img src="http://imgur.com/0VfOuO8.png"></td>
<td class="colum3"><img src="http://imgur.com/0VfOuO8.png"></td>
</tr>
<tr>
<!-- <td> Columnas normales de datos (table data cell). -->
<td class="colum1"><img src="http://imgur.com/lZX3UpQ.png"> </td>
<td class="colum2"><img src="http://imgur.com/lZX3UpQ.png"> </td>
<td class="colum3"><img src="http://imgur.com/0VfOuO8.png"> </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> (http://imgur.com/l2I3zAt.png)
Código CSS
body {font-family: verdana, sans-serif; margin:0;background-color:DarkSlateBlue; }
/* <<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/* <<<<<<<<<<<<<<<<<<<<<<<<Presentacion cabecera>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/* <<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
#Div1{ height:400px; width:75%x; }
#Menu{ height:450px; width:100%;}
#Div1, #Menu{ background-color:indigo; border-style:none; color:red; border-width:0px;}
#cab{color:#228B22; text-align:center; font-family: "Tangerine", serif; font-size:88px;
text-shadow: 4px 4px 4px #aaa; margin:0; padding:0; }
#subcab{ color:#008000; text-align:center; font-family: "Akronim", cursive; font-size: 58px;
text-shadow: 4px 4px 4px #aaa; margin:0; padding:0; }
#nom{ color:#00FF7F; text-align:center; font-family: "Almendra Display", cursive; font-size:18px;
text-shadow: 4px 4px 4px #fff; margin:0; padding:0; }
#Menu{ font-family: "UnifrakturCook", cursive; font-size:20px;}
#menunom{color:#00FF7F; font-size:55px; text-align:center; text-shadow: 4px 4px 4px #fff;
margin:50;padding:50;}
h1, h2 {text-align:center;}
/* <<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/* <<<<<<<<<<<<<<<<<<<<<<<<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*/
color:black; /*Color texto contenedor*/
font-size: 20px; /*Tamaño de la fuente*/
text-align:center; /*Alineacion del texto */
padding-top: 10px; /*Separación del borde de la cabecera*/
word-wrap:break-word; /*Cuando la letra llega al final de la caja se cortara en formato word*/
}
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<DISEÑO DE LA TABLA >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>><*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
.tab-des { color: #333; /*se muestras los textos en la tabla con el color #3333 */
font-family: calibri; /*tipo de fuente para la tabla*/
width: 840px; /*ancho de la tabla*/
margin:0.5% auto; /*Alineacion tabla*/
}
td, th {
border: 1px solid transparent; /* borde de 1 pixel solido color tranparente*/
height: 65px; /*altura de las celdas de cabecera y de datos 30px*/
border-collapse:collapse; /*Sin Bordes*/
color:black; /*color texto*/
text-shadow: 2px 2px #ffffff; /*sombra texto*/
}
th {
font-size:30px;
font-weight: bold; /*Fuente cabeceras negrita */
}
td {
background: #FAFAFA; /*color celdas de datos #FAFAFA */
text-align: center; /* alineado de texto en celdas de datos */
}
.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-family: Calibri; /*tipo de fuente para la tabla*/
font-weight: bold; /*fuente para el tfoot */
font-size:30px; /*tamaño fuente pa tfoot */
border-bottom-left-radius:10px;/*esquinas redondeadas*/
border-bottom-right-radius:10px;
}