Buenas tardes! Les adjunto mi ejercicio CU01051D del tutorial de desarrollo web con programación en CSS y como siempre aguardo sus mejoras / correcciones.
HTML:
<!DOCTYPE html>
<!--Curso CSS estilos aprenderaprogramar.com-->
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<link rel="stylesheet" type="text/css" href="CSSEjerciciofinale51.css">
</head>
<body>
<table id="primera">
<caption> Tabla numero 1 </caption>
<tr>
<th> Columnas </th>
<th> Columnas </th>
<th> Columnas </th>
<th> Columnas </th>
<th> Columnas </th>
</tr>
<tr>
<td> DATO </td>
<td> DATO </td>
<td> DATO </td>
<td> DATO </td>
<td> DATO </td>
</tr>
<tr>
<td> DATO </td>
<td> DATO </td>
<td> DATO </td>
<td> DATO </td>
<td> DATO </td>
</tr>
<tr>
<td> DATO </td>
<td> DATO </td>
<td> DATO </td>
<td> DATO </td>
<td> DATO </td>
</tr>
<tr>
<td> DATO </td>
<td> DATO </td>
<td> DATO </td>
<td> DATO </td>
<td> DATO </td>
</tr>
<tr>
<td> DATO </td>
<td> DATO </td>
<td> DATO </td>
<td> DATO </td>
<td> DATO </td>
</tr>
<tr>
<td> DATO </td>
<td> DATO </td>
<td> DATO </td>
<td> DATO </td>
<td> DATO </td>
</tr>
<tr>
<td> DATO </td>
<td> DATO </td>
<td> DATO </td>
<td> DATO </td>
<td> DATO </td>
</tr>
</table>
</br>
<table id="segunda">
<caption> Tabla numero 2 </caption>
<tr>
<th> Columna 1 </th>
<th> Columna 2 </th>
<th> Columan 3 </th>
<th> Columna 4 </th>
<th> Columna 5 </th>
</tr>
<tr>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
</tr>
<tr>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
</tr>
<tr>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
</tr>
<tr>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
</tr>
<tr>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
</tr>
<tr>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
</tr>
<tr>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
</tr>
</table>
</br>
<table id="tercera">
<caption> Tabla numero 3 </caption>
<tr>
<th> Columna 1 </th>
<th> Columna 2 </th>
<th> Columan 3 </th>
<th> Columna 4 </th>
<th> Columna 5 </th>
</tr>
<tr>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
</tr>
<tr>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
</tr>
<tr>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
</tr>
<tr>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
</tr>
<tr>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
</tr>
<tr>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
</tr>
<tr>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
<td> Casilla 1 </td>
</tr>
</table>
</br>
</body>
</html>
CSS
#primera {width:600px;border-collapse:collapse;}
#primera th {width:20%;} /*columna*/
#primera td, #primera th {border:8px solid gray;} /*no funciona con #primera td,th ...lo mismo en los de abajo*/
#segunda {width:100%;}
#segunda th {width:20%;}
#segunda td, #segunda th {border:2px double brown;}
#tercera {width:500px; border-collapse: collapse;}
#tercera th {width:100px;}
#tercera td {border-bottom:6px solid blue;}
Tema: HTML Estilos y herencia CSS en tablas aplicarles formato personalizado CU01051D (Leído 2250 veces)
RSS -
WAP2