Autor Tema: HTML y CSS. Tablas en css, diseño. Cómo interpretar código Ejercicio CU01052D  (Leído 2172 veces)

Chompy129

  • Intermedio
  • ***
  • Mensajes: 130
  • Programar es divertido. :)
    • Ver Perfil
Diseño tablas CSS. border-spacing, caption-side, empty-cells. Colores de filas intercalados alternos (CU01052D)

Aquí esta el código CSS ejercicio resuelto CU01052D del tutorial de bases de la programación web:

Código: [Seleccionar]
/* Curso CSS aprenderaprogramar.com */
table {  color: #333; font-family: Helvetica, Arial, sans-serif; width: 640px; border-collapse: collapse;}
td, th { border: 1px solid transparent; height: 30px; }
th { background: #D3D3D3; font-weight: bold; }
td { background: #FAFAFA; text-align: center; }
tr:nth-child(even) td { background: #F1F1F1; } 
tr:nth-child(odd) td { background: #FEFEFE; }
tr td:hover { background: #666; color: #FFF; }

RESOLVER

a) Describe cuál es el efecto que genera cada una de las especificaciones que hemos incluido en el código CSS (Ejemplo: color: #333 da lugar a que se muestren todos los textos dentro del elemento table con color #333333, que es un color gris oscuro. Font-family: Helvetica, Arial, sans-serif; da lugar a que …).
   R=

TABLE
Color: #333; Hace que toda la fuente cambie a color #333.
font-family: Helvetica, Arial, sans-serif; Hace que la fuente de la letra sea en Helvetica; si este no es aceptado se usara arial y si este tampoco es aceptado se usara sans-serif(Una fuente derivativa).
width: 640px; Hace que su ancho sea de 640px.
border-collapse: collapse; Hace que todos los bordes se fusionen.

TD, TH (Los siguientes afectan a ambos)
border: 1px solid transparent; Crea un borde transparente a su alrededor, solido, de un píxel de grosor.
height: 30px; Hace que su altura sea de 30px.

TH
background: #D3D3D3; Hace que su color de fondo sea #D3D3D3.
font-weight: bold; Hace que la fuente tenga mas grosor.

TD
background: #FAFAFA; Hace que su color de fondo sea #FAFAFA.
text-align: center; Hace que el texto se alinee al centro.

tr:nth-child(even) td
background: #F1F1F1; Hace que sus colores de fondo sean #F1F1F1.

tr:nth-child(odd) td
background: #FEFEFE; Hace que sus colores de fondo sean #FEFEFE.

tr td:hover (Pasar el mouse encima)
background: #666; Hace que su color de fondo cambie a #666.
color: #FFF; Hace que el color de la fuente cambie a blanco.


b) Indica qué modificación habría que hacer en el código para que se muestren bordes dobles con grosor 2 píxeles.
   R=
  En esta linea "td, th { border: 1px solid transparent; height: 30px; }" cambiar el 1px por 2px y cambiar transparent por black o #000.

Luego en esta linea "table {  color: #333; font-family: Helvetica, Arial, sans-serif; width: 640px; border-collapse: collapse;}" cambiar border-collapse: collapse por "separate".

c) Indica qué modificación habría que hacer en el código para que se muestren bordes simples de color naranja de grosor 3 píxeles.
   R=
  Es parecido a la respuesta de la pregunta b, solo que hay que cambiar "border: 1px solid transparent" por "border: 3px solid orange o #FFA500"; y mantener "border-collapse: collapse"
« Última modificación: 01 de Octubre 2016, 12:14 por Alex Rodríguez »

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:HTML y CSS. Tablas en css, diseño. Ejercicio CU01052D
« Respuesta #1 en: 26 de Septiembre 2016, 00:39 »
Buenas Chompy129.


En el apartado a están bien tus respuestas, aunque podrían aportar más datos de lo que realiza el código, como por ejemplo decir que "tr:nth-child(even) td" hace referencia a todas la celdas que estén en una fila par y "tr:nth-child(odd) td" a las filas impares. Sobre todo por que muchas veces es más complicado a donde apunta el selector CSS que las propiedades que contiene.

b y c todo bien.

Saludos. ;D

Chompy129

  • Intermedio
  • ***
  • Mensajes: 130
  • Programar es divertido. :)
    • Ver Perfil
Re:HTML y CSS. Tablas en css, diseño. Ejercicio CU01052D
« Respuesta #2 en: 26 de Septiembre 2016, 03:52 »
Bueno si, pude hacerlo...  :P
Pero bueno, creo que lo importante del ejercicio es que haya comprendido todo en el código; de todas formas como siempre Pedro por revisar la actividad. ;D

También te envió saludos. :)

 

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