Autor Tema: Crear tabla HTML y CSS con fondo gris degradado y bordes redondeados CU01058D (Leído 4764 veces)

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:

<!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.

Ogramar · « **Respuesta #1 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

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

Noticias: