Autor Tema: HTML y CSS cómo redondear esquinas de contenedores tabla border-radius CU01058D (Leído 3661 veces)

Chompy129 · « **en:** 26 de Septiembre 2016, 07:16 »

Efecto CSS esquinas redondeadas: border-radius. border-left-top-radius. Ejemplos círculo o elipse (CU01058D)

Bueno, logre que fuera "CASI" igual (o al menos eso pienso). Aquí les dejo una imagen de referencia:

Y aquí les dejo el codigo, ejercicio CU01058D del curso de bases de la programación web con CSS:

Código HTML

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Border-radius</title>
	<link rel="stylesheet" type="text/css" href="tablas.css">
</head>
<body>
	<table class="tabla-destacada">
		<thead>
			<th>Standard</th>
			<th>Professional</th>
			<th>Enterprise</th>
		</thead>
		<tbody>
			<tr>
				<td><img src="https://axelname.ru/static/i/ok2.png"></td>
				<td><img src="https://axelname.ru/static/i/ok2.png"></td>
				<td><img src="https://axelname.ru/static/i/ok2.png"></td>
			</tr>
			<tr>
				<td><img src="https://axelname.ru/static/i/ok2.png"></td>
				<td><img src="https://axelname.ru/static/i/ok2.png"></td>
				<td><img src="https://axelname.ru/static/i/ok2.png"></td>
			</tr>
			<tr>
				<td><img src="https://cdn2.iconfinder.com/data/icons/aspneticons_v1.0_Nov2006/delete_16x16.gif"></td>
				<td><img src="https://axelname.ru/static/i/ok2.png"></td>
				<td><img src="https://axelname.ru/static/i/ok2.png"></td>
			</tr>
			<tr>
				<td><img src="https://cdn2.iconfinder.com/data/icons/aspneticons_v1.0_Nov2006/delete_16x16.gif"></td>
				<td><img src="https://cdn2.iconfinder.com/data/icons/aspneticons_v1.0_Nov2006/delete_16x16.gif"></td>
				<td><img src="https://axelname.ru/static/i/ok2.png"></td>
			</tr>
		</tbody>
		<tfoot>
			<th>$99</th>
			<th>$199</th>
			<th>$399</th>
		</tfoot>
	</table>
</body>
</html>

Código CSS

Código: [Seleccionar]

/*ESTILOS DE TABLA*/
/*General*/
.tabla-destacada{width: 575px; border-spacing: 1px; font-family: arial, sans-serif; color: #444;}

.tabla-destacada td,
 .tabla-destacada th{width: 33%; padding: 15px;
					 background-color: #E5E5E5;
					 text-align: center; font-size: 20px;}

.tabla-destacada td:last-child,
 .tabla-destacada th:last-child{background-color: #DDEFBF;}
/*FIN General*/

/*Por partes*/
.tabla-destacada thead th{border-bottom: 1px groove #FFF;
						  border-radius: 10px 10px 0 0}

.tabla-destacada tbody td{border-bottom: 1px groove #FFF;}

.tabla-destacada tfoot th{border-radius: 0 0 10px 10px;}
/*FIN Por partes*/
/*FIN ESTILOS DE TABLA*/

Alex Rodríguez · « **Respuesta #1 en:** 01 de Octubre 2016, 12:24 »

Hola Chompy, lo has dejado prácticamente exacto a la imagen, buen trabajo. Como único comentario recomendar que las etiquetas que no tengan cierre específico se cierren con un /> , por ejemplo

<meta charset="utf-8">

Se cerraría <meta charset="utf-8"/>

Esto no es obligatorio pero solemos recomendarlo para cumplir el estándar xhtml.

Saludos

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

Noticias: