1
Aprender a programar desde cero / HTML y CSS crear una tabla estilo profesional con bordes redondeados CU01058D
« en: 22 de Abril 2016, 04:14 »
Busque aqui en el foro algo con que orientarme pero no encontre ningun ejemplo, asi que bueno despues de un tiempo logre crear una tabla parecida a la requerida, asi que dejo mi aporte. Este es el codigo html:
Y este es el codigo CSS:
Y este es el link de ejemplo: http://utilities.byethost3.com/cursoCSS/archivohtml-36.html
Código: [Seleccionar]
<!-- Código Ejemplo 2 de border-radius -->
<html>
<head>
<title>Código Ejemplo 2 de border-radius</title>
<meta charset="utf-8">
<!-- Se llama al archivo de estilos-->
<link rel="stylesheet" type="text/css" href="estilo36.css">
</head>
<!-- Contenido de la página web -->
<body>
<table>
<tr id="firstRow"><th class="std">Standard</th><th class="pro">Professional</th><th class="ent">Enterprise</th></tr>
<tr><td class="std"><img src="img/check-yes-1.png" alt="Yes"></td> <td class="pro"><img src="img/check-yes-1.png" alt="Yes"></td> <td class="ent"><img src="img/check-yes-1.png" alt="Yes"></td></tr>
<tr><td class="std"><img src="img/check-yes-1.png" alt="Yes"></td> <td class="pro"><img src="img/check-yes-1.png" alt="Yes"></td> <td class="ent"><img src="img/check-yes-1.png" alt="Yes"></td></tr>
<tr><td class="std"><img src="img/check-no-1.png" alt="No"></td> <td class="pro"><img src="img/check-yes-1.png" alt="Yes"></td> <td class="ent"><img src="img/check-yes-1.png" alt="Yes"></td></tr>
<tr><td class="std"><img src="img/check-no-1.png" alt="No"></td> <td class="pro"><img src="img/check-no-1.png" alt="No"></td> <td class="ent"><img src="img/check-yes-1.png" alt="Yes"></td></tr>
<tr id="lastRow"><td class="std">$99</td><td class="pro">$199</td><td class="ent">$399</td></tr>
</table>
</body>
</html>
Y este es el codigo CSS:
Código: [Seleccionar]
/* Hoja de estilo para el ejemplo 2 de border-radius */
table {padding:0px; margin:0px; border-collapse: separate; border: solid #ccc 0px; overflow:hidden; border-spacing:2px 0px; }
#firstRow th{border-bottom:1px solid gray; border-radius: 10px 10px 0 0;}
#lastRow td{border-bottom:1px solid gray; border-radius: 0 0 10px 10px;}
tr {text-align:center;}
tr img { width:30px; height:30px; }
th, td { width:100px; height: 30px; padding:8px ; border-bottom:1px solid gray; margin:0px;}
/* Colores Columnas */
.std, .pro {background-color:Linen;}
.ent {background-color: PaleTurquoise;}
Y este es el link de ejemplo: http://utilities.byethost3.com/cursoCSS/archivohtml-36.html