Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: Jonathan Ramos 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:
<!-- 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:
/* 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
-
Hola Jonathan ya te he comentado en otras ocasiones esto:
Para poder localizar los ejercicios y poder revisarlos otras personas es importante incluir en el título del tema del foro el código del ejercicio, en este caso CU01058D, junto con las sentencias principales que se usan, en este caso fopen, etc. esto facilita todo.
Por favor colabora incluyendo el código en el título del tema.
Es preferible que en las urls dentro de los ejercicios como src="img/check-yes-1.png" pongas rutas http accesibles desde internet, ya que si pones rutas locales no podemos ver las imágenes (las puedes subir tú mismo a imgur o similar, o capturar la ruta de otra página web, o capturar la ruta de tu servidor, etc. puedes ver un ejemplo en https://www.aprenderaprogramar.com/foros/index.php?topic=3793.0). En tu caso como tienes el ejercicio en un servidor bastaría con capturar la ruta, por ejemplo http://utilities.byethost3.com/cursoCSS/img/check-yes-1.png es la ruta completa que nos permite visualizar el ejercicio.
Tu ejercicio está bien. Se puede intentar acercar más el resultado a la imagen propuesta en el curso, por ejemplo esta propuesta resulta más aproximada: https://www.aprenderaprogramar.com/foros/index.php?topic=3234.0
Saludos
-
Ok para la proxima vez incluire el codigo en el tema, veo que ya lo has cambiado, muchas gracias. Buen dia.