Hola! A todos. Mi solución para el ejercicico CU01058D:
Código html:
<!DOCKTYPE html>
<head>
<meta charset="utf-8">
<meta name="description" content="Ejercicio 1058">
<meta name="keywords" content="palabras clave">
<title>Ejercicio 1058</title>
<link rel="stylesheet" type="text/css" href="1058.css">
</head>
<body>
<table class="tabla-destacada">
<tr><th class="azul">Standard</th>
<th class="azul">Professional</th>
<th class="verde">Enterprise</th></tr>
<tr><td class="azul"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRlejl7e5gZB3lto_vlUwOb3EyMCiuqc6vmQoZ-KUQ9Tmoqb1IK_A" alt="SI"/></td>
<td class="azul"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRlejl7e5gZB3lto_vlUwOb3EyMCiuqc6vmQoZ-KUQ9Tmoqb1IK_A" alt="SI"/></td>
<td class="verde"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRlejl7e5gZB3lto_vlUwOb3EyMCiuqc6vmQoZ-KUQ9Tmoqb1IK_A" alt="SI"/></td></tr>
<tr><td class="azul"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRlejl7e5gZB3lto_vlUwOb3EyMCiuqc6vmQoZ-KUQ9Tmoqb1IK_A" alt="SI"/></td>
<td class="azul"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRlejl7e5gZB3lto_vlUwOb3EyMCiuqc6vmQoZ-KUQ9Tmoqb1IK_A" alt="SI"/></td>
<td class="verde"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRlejl7e5gZB3lto_vlUwOb3EyMCiuqc6vmQoZ-KUQ9Tmoqb1IK_A" alt="SI"/></td></tr>
<tr><td class="azul"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRwHsUT5SnlWNrNSVMf9w8_ZYVmIx9HngnXA6wHEfoppX5ldOVH" alt="NO"/></td>
<td class="azul"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRlejl7e5gZB3lto_vlUwOb3EyMCiuqc6vmQoZ-KUQ9Tmoqb1IK_A" alt="SI"/></td>
<td class="verde"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRlejl7e5gZB3lto_vlUwOb3EyMCiuqc6vmQoZ-KUQ9Tmoqb1IK_A" alt="SI"/></td></tr>
<tr><td class="azul"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRwHsUT5SnlWNrNSVMf9w8_ZYVmIx9HngnXA6wHEfoppX5ldOVH" alt="NO"/></td>
<td class="azul"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRwHsUT5SnlWNrNSVMf9w8_ZYVmIx9HngnXA6wHEfoppX5ldOVH" alt="NO"/></td>
<td class="verde"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRlejl7e5gZB3lto_vlUwOb3EyMCiuqc6vmQoZ-KUQ9Tmoqb1IK_A" alt="SI"/></td></tr>
<tfoot><td class="azul">$99</td>
<td class="azul">$199</td>
<td class="verde">$399</td>
</tfoot>
</table>
</body>
</html>
Código CSS:
/*Ejercicio 1058*/
*{font-family:Vani, Georgia, Helvetica, arial;}
.tabla-destacada{border-collapse:collapse; text-align:center;
font-size:22px}
.tabla-destacada tr th, td{border:1px solid #fff;
width:9em; height:2.5em;}
.tabla-destacada tr th{border-top-left-radius:10px;
border-top-right-radius:10px;}
.tabla-destacada tfoot td{border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
font-weight:bold;}
.azul{background-color:#E0E0F8;}
.verde{background-color:#D8F6CE;}
img{width:20px;}
Gracias! Chau!!
Tema: HTML y CSS redondear bordes tabla ejemplo border radius Ejercicio CU01058D (Leído 8990 veces)
RSS -
WAP2