Autor Tema: HTML y diseño tablas CSS descargar estilos o aplicar estilos existentes CU01052D  (Leído 2207 veces)

alefaletti

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 48
    • Ver Perfil
Buen día! Ejercicio CU01052D del tutorial de programación web con CSS como si estuviera en primero, aguardo sus correcciones / mejoras.

HTML:

Código: [Seleccionar]
<html>
<head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="CSS52estilostablas.css">
</head>

    <body>
        <table>
            <caption>Contenido nutricional por cada 100 g de alimento.</caption>
            <tr>
                <th>Alimento</th>
                <th>Calorías (kCal)</th>
                <th>Grasas (g)</th>
                <th>Proteína (g)</th>
                <th>Carbohidratos (g)</th>
            </tr>

            <tr>
                <td>Arándano</td>
                <td>49</td>
                <td>0.2</td>
                <td>0.4</td>
                <td>12.7</td>
            </tr>

            <tr>
                <td>Plátano</td>
                <td>90</td>
                <td>0.3</td>
                <td>1.0</td>
                <td>23.5</td>
            </tr>
           
            <tr>
                <td>Cereza</td>
                <td>46</td>
                <td>0.4</td>
                <td>0.9</td>
                <td>10.9</td>
            </tr>

            <tr>
                <td>Fresa</td>
                <td>37</td>
                <td>0.5</td>
                <td>0.8</td>
                <td>8.3</td>
            </tr>
</table>
</body>
</html>


CSS - Punto A:

Código: [Seleccionar]

table {color: #333; font-family: Helvetica, Arial, sans-serif; width: 640px; border-collapse: collapse;}
/* Definde el color de texto #333 (gris oscuro), la familia tipografica; en primera instancia Helvetica, si el usuario no tiene dicha fuente, se mostrará, Arial y si tampoco la tiene se visualizara cualquier familia que tenga siempre siendo "sans-serif". El largo de la tabla sera de 640px y los bordes colapsados.*/
td, th { border: 1px solid transparent; height: 30px;}
/* El borde de las columnas y filas sera de 1px, solida y transparente. La altura de 30px.*/
th { background: #D3D3D3; font-weight:bold; }
/*El fondo del titulo de cada columna con el color #d3d3d3 (tono gris) y el ancho de tipografia "bold" (negrita)*/
td { background: #FAFAFA; text-align: center;}
/*Color de fondo de cada celda (tono de gris claro) y el texto alineado en cada una de las mismas*/
tr:nth-child(even) td { background: #F1F1F1; }
/* Represanta las filas pares de la tabla  con color de tono gris claro*/
tr:nth-child(odd) td { background: #FEFEFE; }
/* Represanta las filas impares de la tabla  con color de tono gris levemente mas fuerte que el anterior*/
tr td:hover { background: #666; color: #FFF; }
/*Al pasar el mouse por cada una de las celdas, el color de fondo se hace gris oscuro y cada palabra de color blanco*/


CSS - Punto B:

Código: [Seleccionar]

table {color: #333; font-family: Helvetica, Arial, sans-serif; width: 640px; border: double 2px;}
td, th { border: 2px double; 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; }


/* b) Indica qué modificación habría que hacer en el código para que se muestren bordes dobles con grosor 2 píxeles.


CSS - Punto C:

Código: [Seleccionar]


table {color: #333; font-family: Helvetica, Arial, sans-serif; width: 640px; border: solid 3px orange; border-collapse: collapse;}
td, th { border: 3px solid orange; 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; }

« Última modificación: 18 de Junio 2017, 12:01 por Alex Rodríguez »

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:Ejercicio final - Diseño tablas CSS - (CU01052D)
« Respuesta #1 en: 26 de Abril 2017, 19:37 »
Hola. En el apartado a hablas de largo de la tabla, para ser exacto, lo que describe width es el ancho.

Por lo demás, todo correcto.

Saludos. ;D
« Última modificación: 18 de Junio 2017, 12:02 por Alex Rodríguez »

 

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