Autor Tema: HTML y CSS cómo dar estilo a tablas, border-collapse, borde único CU01051D (Leído 2833 veces)

EnigmaticNerd · « **en:** 24 de Septiembre 2017, 00:13 »

Buenas tardes. Este es el enunciado del ejercicio CU01051D del curso básico de desarrollo web con CSS:

Citar

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.

Acá el código:

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
    <head>
        <title>
            CU01051D
        </title>
        <meta name="author" content="EnigmaticNerd"/>
        <meta name="description" content="Estilos y herencia CSS en tablas - aprenderaprogramar.com"/>
        <meta name="keywords" content="css, cursos, diseño, tablas, font-size, border-collapse, aprenderaprogramar.com"/>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="estilos/CU01051.css"/>
    </head>
    <body>
        <table>
            <caption>Tabla 1</caption>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
        </table>

        <hr/>

        <table>
            <caption>Tabla 2</caption>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
            <tr>
               <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
        </table>

        <hr/>

        <table>
            <caption>Tabla 3</caption>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
            <tr>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
                <td>Aprender</td>
            </tr>
        </table>
    </body>
</html>

Acá la hoja de estilos css:

Código: [Seleccionar]

/*Estilos para el ejercicio CU01051D*/

hr{
    color:blue;
    height:3px;
    background-color:green;
}
table:first-child{
    width:600px;
    margin:0 auto;
}
table:first-child td{
border-collapse:collapse;
width:20%;
border:#CCC solid 8px;
text-align:center;
}

table:nth-child(3){
    margin:20px 0 30px 0px;

    width:100%;
}

table:nth-child(3) td{
    border-collapse:separate;
    width:20%;
    border:brown solid 2px;
    text-align:center;
}

table:last-child{
    
    width:500px;
    margin:20px auto;
}

table:last-child td{
    width:100px;
    border-collapse:collapse;
    border-bottom:#00F solid 6px;
    text-align:center;
}

Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.

Alex Rodríguez · « **Respuesta #1 en:** 06 de Noviembre 2017, 18:08 »

Hola, ejercicio bien resuelto

Como ya se ha comentado en otros hilos, posiblemente sea preferible identificar los elementos (las tablas en este caso) por id en lugar de con selectores del tipo table:last-child ya que si se introducen más elementos, estos selectores podrían fallar.

Saludos

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: