Autor Tema: HTML y CSS crear una tabla estilo profesional con bordes redondeados CU01058D (Leído 3754 veces)

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: [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

Alex Rodríguez · « **Respuesta #1 en:** 24 de Abril 2016, 13:02 »

Hola Jonathan ya te he comentado en otras ocasiones esto:

Citar

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

Jonathan Ramos · « **Respuesta #2 en:** 24 de Abril 2016, 23:45 »

Ok para la proxima vez incluire el codigo en el tema, veo que ya lo has cambiado, muchas gracias. Buen dia.

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: