informaticaPC

Tutorial de CSS

Configurar tablas

Configurar tablas con CSS

En el siguiente ejemplo te mostramos un ejemplo de cómo configurar una tabla usando algunas de las propiedades CSS que hemos visto durante el curso.

Código HTML:

<html>
    <head>
        <title>Cursos gratis</title>
        <link rel="stylesheet" type="text/css" href="estilos.css" />
    </head>

    <body>

        <table border="1">

            <tr>
                <th>Julio</th>
                <th>Agosto</th>
                <th>Septiembre</th>
                <th>Octubre</th>
                <th>Noviembre</th>
                <th>Diciembre</th>
            </tr>

            <tr class="fila_impar">
                <td>100</td>
                <td>200</td>
                <td>300</td>
                <td>400</td>
                <td>500</td>
                <td>600</td>
            </tr>

            <tr class="fila_resaltada">
                <td>101</td>
                <td>201</td>
                <td>302</td>
                <td>401</td>
                <td>501</td>
                <td>601</td>
            </tr>

            <tr class="fila_impar">
                <td>102</td>
                <td>202</td>
                <td>302</td>
                <td>402</td>
                <td>502</td>
                <td>602</td>
            </tr>

            <tr class="fila_par">
                <td>103</td>
                <td>203</td>
                <td>303</td>
                <td>403</td>
                <td>503</td>
                <td>603</td>
            </tr>

        </table>

    </body>
</html>

Código CSS:

table {
    width:500px;
    font:normal 13px Arial;
    text-align:center;
    border-collapse:collapse;
}

table th {
    font:bold 15px Arial;
    background-color:lightblue;
}

.fila_impar {
    background-color:lightgray;
}

.fila_par {
    background-color:lightgreen;
}

.fila_resaltada {
    color:yellow;
    background-color:red;
}

Descargar ejemplo

A continuación pedes ver el resultado:

tablas con CSS

Primera página Anterior Siguiente Última página
Usamos cookies para ofrecerte una experiencia mejorada, el continuar navegando supone que aceptas su uso