« anterior próximo »
Páginas: [1]

Autor Tema: CSS dar estilo a tablas bordes simples o dobles border-collapse, width CU01051D#  (Leído 2602 veces)

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
CSS dar estilo a tablas bordes simples o dobles border-collapse, width CU01051D#
« en: 18 de Septiembre 2015, 17:57 »
Hola, les dejo otro ejercicio CSS.

Citar
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:
Código: [Seleccionar]
<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:
Código: [Seleccionar]
/* 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.
« Última modificación: 03 de Marzo 2016, 08:13 por César Krall »
En línea

César Krall

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2078
  • No vales por lo que dices, sino por lo que haces
    • Ver Perfil
    • aprenderaprogramar.com
Re:CSS dar estilo a tablas bordes simples o dobles border-collapse, width CU01051D
« Respuesta #1 en: 21 de Septiembre 2015, 11:36 »
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:

Código: [Seleccionar]
<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!
En línea
Responsable de departamento de producción aprenderaprogramar.com
Páginas: [1]
« anterior próximo »
 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".