HTML y CSS. Tablas en css, diseño. Cómo interpretar código Ejercicio CU01052D

[Chompy129]

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"

[pedro,,]

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.

[Chompy129]

Bueno si, pude hacerlo... 
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.

También te envió saludos.