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: pedro,, en 18 de Septiembre 2015, 17:57
-
Hola, les dejo otro ejercicio CSS.
EJERCICIO
Crea un documento HTML con tres tablas, todas ellas iguales, con un título de tabla, cinco columnas y 7 filas (la primera ella, fila de encabezados que no son datos propiamente dichos). Aplícale los siguientes estilos y comprueba la visualización obtenida:
a) La tabla 1 tendrá una anchura de 600 píxeles y cada columna tendrá un 20% de la anchura total de la tabla. Existirán bordes únicos de color gris y tendrán un grosor de 8 píxeles.
b) La tabla 2 tendrá una anchura igual al 100 % disponible en la ventana y cada columna tendrá un 20 % de la anchura total de la tabla. Existirán bordes dobles de color marrón y tendrán un grosor de 2 píxeles.
c) La tabla 3 tendrá una anchura de 500 píxeles y cada columna tendrá 100 píxeles de anchura. Sólo existirán bordes en la parte inferior de las filas (es decir, no habrá bordes laterales ni superiores), tipo borde único, con un grosor de 6 píxeles y color azul.
Código HTML:
<html>
<head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Ejercicio_estilosCU01051D.css">
</head>
<body>
<div id="tabla1">
<table >
<caption>Tabla 1</caption>
<tr>
<th>Encabezado 1</th><th>Encabezado 2</th><th>Encabezado 3</th><th>Encabezado 4</th><th>Encabezado 5</th>
</tr>
<tr>
<td>fila 1</td><td>fila 1</td><td>fila 1</td><td>fila 1</td><td>fila 1</td>
</tr>
<tr>
<td>fila 2</td><td>fila 2</td><td>fila 2</td><td>fila 2</td><td>fila 2</td>
</tr>
<tr>
<td>fila 3</td><td>fila 3</td><td>fila 3</td><td>fila 3</td><td>fila 3</td>
</tr>
<tr>
<td>fila 4</td><td>fila 4</td><td>fila 4</td><td>fila 4</td><td>fila 4</td>
</tr>
<tr>
<td>fila 5</td><td>fila 5</td><td>fila 5</td><td>fila 5</td><td>fila 5</td>
</tr>
<tr>
<td>fila 6</td><td>fila 6</td><td>fila 6</td><td>fila 6</td><td>fila 6</td>
</tr>
</table>
</div>
<hr/>
<div id="tabla2">
<table >
<caption>Tabla 2</caption>
<tr>
<th>Encabezado 1</th><th>Encabezado 2</th><th>Encabezado 3</th><th>Encabezado 4</th><th>Encabezado 5</th>
</tr>
<tr>
<td>fila 1</td><td>fila 1</td><td>fila 1</td><td>fila 1</td><td>fila 1</td>
</tr>
<tr>
<td>fila 2</td><td>fila 2</td><td>fila 2</td><td>fila 2</td><td>fila 2</td>
</tr>
<tr>
<td>fila 3</td><td>fila 3</td><td>fila 3</td><td>fila 3</td><td>fila 3</td>
</tr>
<tr>
<td>fila 4</td><td>fila 4</td><td>fila 4</td><td>fila 4</td><td>fila 4</td>
</tr>
<tr>
<td>fila 5</td><td>fila 5</td><td>fila 5</td><td>fila 5</td><td>fila 5</td>
</tr>
<tr>
<td>fila 6</td><td>fila 6</td><td>fila 6</td><td>fila 6</td><td>fila 6</td>
</tr>
</table>
</div>
<hr/>
<div id="tabla3">
<table >
<caption>Tabla 3</caption>
<tr>
<th>Encabezado 1</th><th>Encabezado 2</th><th>Encabezado 3</th><th>Encabezado 4</th><th>Encabezado 5</th>
</tr>
<tr>
<td>fila 1</td><td>fila 1</td><td>fila 1</td><td>fila 1</td><td>fila 1</td>
</tr>
<tr>
<td>fila 2</td><td>fila 2</td><td>fila 2</td><td>fila 2</td><td>fila 2</td>
</tr>
<tr>
<td>fila 3</td><td>fila 3</td><td>fila 3</td><td>fila 3</td><td>fila 3</td>
</tr>
<tr>
<td>fila 4</td><td>fila 4</td><td>fila 4</td><td>fila 4</td><td>fila 4</td>
</tr>
<tr>
<td>fila 5</td><td>fila 5</td><td>fila 5</td><td>fila 5</td><td>fila 5</td>
</tr>
<tr>
<td>fila 6</td><td>fila 6</td><td>fila 6</td><td>fila 6</td><td>fila 6</td>
</tr>
</table>
</div>
</body>
</html>
Código CSS:
/* Curso CSS estilos aprenderaprogramar.com*/
body {font-family: Arial, Helvetica, sans-serif; }
#tabla1 table{width: 600px;}
#tabla1 table, #tabla1 th, #tabla1 td{border: solid 8px gray; border-collapse: collapse;}
#tabla1 td, #tabla2 th{width: 20%;}
#tabla2 table{width: 100%;}
#tabla2 table, #tabla2 th, #tabla2 td{border: solid 2px brown; border-collapse: separate;}
#tabla2 td, #tabla2 th{width: 20%;}
#tabla3 table{width: 500px;}
#tabla3 table, #tabla3 th, #tabla3 td{border-bottom: solid 6px blue; border-collapse: collapse;}
#tabla3 td, #tabla3 th{width: 100px;}
Este ejercicio me dió bastantes problemas debido a que se sobreescribía el código css. Cuando escribía la parte de #tabla3 me cambiaba todo. Al final conseguí lo que dejé aquí arriba.
Saludos.
-
Hola Pedro!
Todo perfecto
Para ver las tablas más separadas le he añadido table{margin-top:50px;}
Otra opción que también es viable es no meter las tablas dentro de div, sino aplicarles estilos directamente a las tablas:
<html>
<head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<style type="text/css">
/* Curso CSS estilos aprenderaprogramar.com*/
body {font-family: Arial, Helvetica, sans-serif; }
table{margin-top:50px;}
#tabla1 {width: 600px;}
#tabla1, #tabla1 th, #tabla1 td{border: solid 8px gray; border-collapse: collapse;}
#tabla1 td, #tabla2 th{width: 20%;}
#tabla2 {width: 100%;}
#tabla2, #tabla2 th, #tabla2 td{border: solid 2px brown; border-collapse: separate;}
#tabla2 td, #tabla2 th{width: 20%;}
#tabla3 {width: 500px;}
#tabla3, #tabla3 th, #tabla3 td{border-bottom: solid 6px blue; border-collapse: collapse;}
#tabla3 td, #tabla3 th{width: 100px;}
</style>
</head>
<body>
<table id="tabla1">
<caption>Tabla 1</caption>
<tr>
<th>Encabezado 1</th><th>Encabezado 2</th><th>Encabezado 3</th><th>Encabezado 4</th><th>Encabezado 5</th>
</tr>
<tr>
<td>fila 1</td><td>fila 1</td><td>fila 1</td><td>fila 1</td><td>fila 1</td>
</tr>
<tr>
<td>fila 2</td><td>fila 2</td><td>fila 2</td><td>fila 2</td><td>fila 2</td>
</tr>
<tr>
<td>fila 3</td><td>fila 3</td><td>fila 3</td><td>fila 3</td><td>fila 3</td>
</tr>
<tr>
<td>fila 4</td><td>fila 4</td><td>fila 4</td><td>fila 4</td><td>fila 4</td>
</tr>
<tr>
<td>fila 5</td><td>fila 5</td><td>fila 5</td><td>fila 5</td><td>fila 5</td>
</tr>
<tr>
<td>fila 6</td><td>fila 6</td><td>fila 6</td><td>fila 6</td><td>fila 6</td>
</tr>
</table>
<hr/>
<table id="tabla2" >
<caption>Tabla 2</caption>
<tr>
<th>Encabezado 1</th><th>Encabezado 2</th><th>Encabezado 3</th><th>Encabezado 4</th><th>Encabezado 5</th>
</tr>
<tr>
<td>fila 1</td><td>fila 1</td><td>fila 1</td><td>fila 1</td><td>fila 1</td>
</tr>
<tr>
<td>fila 2</td><td>fila 2</td><td>fila 2</td><td>fila 2</td><td>fila 2</td>
</tr>
<tr>
<td>fila 3</td><td>fila 3</td><td>fila 3</td><td>fila 3</td><td>fila 3</td>
</tr>
<tr>
<td>fila 4</td><td>fila 4</td><td>fila 4</td><td>fila 4</td><td>fila 4</td>
</tr>
<tr>
<td>fila 5</td><td>fila 5</td><td>fila 5</td><td>fila 5</td><td>fila 5</td>
</tr>
<tr>
<td>fila 6</td><td>fila 6</td><td>fila 6</td><td>fila 6</td><td>fila 6</td>
</tr>
</table>
<hr/>
<table id="tabla3">
<caption>Tabla 3</caption>
<tr>
<th>Encabezado 1</th><th>Encabezado 2</th><th>Encabezado 3</th><th>Encabezado 4</th><th>Encabezado 5</th>
</tr>
<tr>
<td>fila 1</td><td>fila 1</td><td>fila 1</td><td>fila 1</td><td>fila 1</td>
</tr>
<tr>
<td>fila 2</td><td>fila 2</td><td>fila 2</td><td>fila 2</td><td>fila 2</td>
</tr>
<tr>
<td>fila 3</td><td>fila 3</td><td>fila 3</td><td>fila 3</td><td>fila 3</td>
</tr>
<tr>
<td>fila 4</td><td>fila 4</td><td>fila 4</td><td>fila 4</td><td>fila 4</td>
</tr>
<tr>
<td>fila 5</td><td>fila 5</td><td>fila 5</td><td>fila 5</td><td>fila 5</td>
</tr>
<tr>
<td>fila 6</td><td>fila 6</td><td>fila 6</td><td>fila 6</td><td>fila 6</td>
</tr>
</table>
</body>
</html>
Saludos!