Foros aprenderaprogramar.com

Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: Dimitar Stefanov en 22 de Enero 2016, 01:12

Título: Crear tabla HTML y CSS con fondo gris degradado y bordes redondeados CU01058D
Publicado por: Dimitar Stefanov en 22 de Enero 2016, 01:12
Posibles códigos del ejercicio CU01058D del curso CSS desde cero.

Código HTML y CSS unido en un solo archivo html:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
td, th {
border-bottom: solid 1px #CDCDCD;
text-align: center;
font-weight: bold;
border-left: solid 1px white;
border-right: solid 1px white;
height: 35px;
width: 100px;
background-color: #EBEBEB;
}
.tabla-destacada {
width: 60%;
margin: 10% auto;
border-spacing: 0;
}
tr th:last-child, tr td:last-child {
background-color: #E2F4C4;
}
tfoot tr td {
border-bottom: none;
}
thead tr th:first-child, thead tr th:nth-child(2), thead tr th:last-child {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
tfoot tr td:first-child, tfoot tr td:nth-child(2), tfoot tr td:last-child {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
</style>
<title>Portal web</title>
</head>
<body>
<div>
<table class="tabla-destacada">
<thead>
<tr>
<th>Standard</th>
<th>Professional</th>
<th>Enterprise</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="http://i.imgur.com/WX1dBA4.png?1"/></td>
<td><img src="http://i.imgur.com/WX1dBA4.png?1"/></td>
<td><img src="http://i.imgur.com/WX1dBA4.png?1"/></td>
</tr>
<tr>
<td><img src="http://i.imgur.com/WX1dBA4.png?1"/></td>
<td><img src="http://i.imgur.com/WX1dBA4.png?1"/></td>
<td><img src="http://i.imgur.com/WX1dBA4.png?1"/></td>
</tr>
<tr>
<td><img src="http://i.imgur.com/LbraO64.png?1"/></td>
<td><img src="http://i.imgur.com/WX1dBA4.png?1"/></td>
<td><img src="http://i.imgur.com/WX1dBA4.png?1"/></td>
</tr>
<tr>
<td><img src="http://i.imgur.com/LbraO64.png?1"/></td>
<td><img src="http://i.imgur.com/LbraO64.png?1"/></td>
<td><img src="http://i.imgur.com/WX1dBA4.png?1"/></td>
</tr>
</tbody>
<tfoot>
<tr>
<td>$99</td>
<td>$199</td>
<td>$399</td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>


Gracias.
Título: Re:Crear tabla HTML y CSS con fondo gris degradado y bordes redondeados CU01058D
Publicado por: Ogramar en 03 de Febrero 2016, 08:18
Buenas dimiste veo el ejercicio bien resuelto aunque el tipo de letra y el tamaño de letra no son como proponía el ejercicio, en este hilo se asemejan más https://www.aprenderaprogramar.com/foros/index.php?topic=3807.0 y también puedes ver una idea para hacerlo sin imágenes, aunque no digo que sea mejor de una forma u otra, depende del objetivo que queramos conseguir (por ejemplo si queremos optimizar la velocidad de carga de la página, si queremos optimizar la estética, etc.).

Salu2