El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Estilizando Tablas

Siguiente ►
►

En este tema, aprenderemos cómo aplicar estilos a las tablas en HTML utilizando CSS. La estilización de tablas es crucial para mejorar la legibilidad y la presentación de los datos. Cubriremos conceptos básicos y avanzados para que puedas crear tablas visualmente atractivas y funcionales.

Conceptos Clave

  1. Selectores de Tablas en CSS: Cómo seleccionar elementos de tabla específicos para aplicar estilos.
  2. Propiedades de Estilo Comunes: Propiedades CSS que se utilizan frecuentemente para estilizar tablas.
  3. Estilización de Bordes: Cómo aplicar y personalizar bordes en tablas y celdas.
  4. Colores y Fondos: Aplicar colores de fondo y texto a tablas y celdas.
  5. Espaciado y Alineación: Ajustar el espaciado y la alineación del contenido dentro de las celdas.

Selectores de Tablas en CSS

Para estilizar tablas, utilizamos selectores CSS que nos permiten apuntar a elementos específicos de la tabla. Aquí hay algunos selectores comunes:

  • table: Selecciona toda la tabla.
  • th: Selecciona todas las celdas de encabezado.
  • td: Selecciona todas las celdas de datos.
  • tr: Selecciona todas las filas de la tabla.

Ejemplo Básico

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Estilizando Tablas</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
        }
        th {
            background-color: #f2f2f2;
            text-align: left;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        tr:hover {
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>Nombre</th>
            <th>Edad</th>
            <th>Ciudad</th>
        </tr>
        <tr>
            <td>Juan</td>
            <td>28</td>
            <td>Madrid</td>
        </tr>
        <tr>
            <td>Ana</td>
            <td>22</td>
            <td>Barcelona</td>
        </tr>
        <tr>
            <td>Pedro</td>
            <td>35</td>
            <td>Valencia</td>
        </tr>
    </table>
</body>
</html>

Explicación del Código

  • border-collapse: collapse;: Esta propiedad CSS se utiliza para colapsar los bordes de la tabla, eliminando el espacio entre ellos.
  • border: 1px solid #ddd;: Aplica un borde sólido de 1 píxel de ancho y color gris claro a las celdas (th y td).
  • padding: 8px;: Añade un relleno de 8 píxeles dentro de cada celda.
  • background-color: #f2f2f2;: Establece un color de fondo gris claro para las celdas de encabezado (th).
  • text-align: left;: Alinea el texto a la izquierda dentro de las celdas de encabezado.
  • tr:nth-child(even) { background-color: #f9f9f9; }: Aplica un color de fondo diferente a las filas pares para mejorar la legibilidad.
  • tr:hover { background-color: #ddd; }: Cambia el color de fondo de la fila cuando el cursor del ratón pasa sobre ella.

Propiedades de Estilo Comunes

Bordes

Puedes personalizar los bordes de las tablas y celdas utilizando las propiedades border, border-width, border-style, y border-color.

table, th, td {
    border: 2px solid black;
}

Colores y Fondos

Puedes aplicar colores de fondo y texto a las tablas y celdas utilizando background-color y color.

th {
    background-color: #4CAF50;
    color: white;
}

Espaciado y Alineación

Ajusta el espaciado y la alineación del contenido dentro de las celdas utilizando padding, text-align, y vertical-align.

td {
    padding: 10px;
    text-align: center;
    vertical-align: middle;
}

Ejercicio Práctico

Ejercicio 1: Estilizar una Tabla de Productos

Crea una tabla que muestre una lista de productos con las siguientes columnas: Nombre del Producto, Precio, y Disponibilidad. Aplica los siguientes estilos:

  1. Bordes de 1 píxel de ancho y color gris claro.
  2. Color de fondo azul claro para las celdas de encabezado.
  3. Color de texto blanco para las celdas de encabezado.
  4. Relleno de 10 píxeles para todas las celdas.
  5. Color de fondo alternado para las filas.
  6. Color de fondo gris claro cuando el cursor del ratón pasa sobre una fila.

Solución

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabla de Productos</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 10px;
        }
        th {
            background-color: #4CAF50;
            color: white;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        tr:hover {
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>Nombre del Producto</th>
            <th>Precio</th>
            <th>Disponibilidad</th>
        </tr>
        <tr>
            <td>Producto A</td>
            <td>$10.00</td>
            <td>En stock</td>
        </tr>
        <tr>
            <td>Producto B</td>
            <td>$15.00</td>
            <td>Agotado</td>
        </tr>
        <tr>
            <td>Producto C</td>
            <td>$20.00</td>
            <td>En stock</td>
        </tr>
    </table>
</body>
</html>

Conclusión

En esta lección, hemos aprendido cómo aplicar estilos a las tablas en HTML utilizando CSS. Hemos cubierto selectores de tablas, propiedades de estilo comunes, y cómo personalizar bordes, colores, fondos, espaciado y alineación. Con estos conocimientos, puedes crear tablas visualmente atractivas y fáciles de leer.

En el próximo módulo, exploraremos cómo crear y manejar formularios en HTML, una herramienta esencial para la interacción del usuario en la web.

◄ Anterior
◄
Siguiente ►
►

Curso de HTML

Módulo 1: Introducción a HTML

Módulo 2: Formateo de Texto en HTML

Módulo 3: Enlaces y Medios en HTML

Módulo 4: Tablas en HTML

Módulo 5: Formularios en HTML

Módulo 6: Elementos Semánticos de HTML5

Módulo 7: Técnicas Avanzadas de HTML

Módulo 8: Integración de HTML y CSS

Módulo 9: Diseño Web Responsivo

Módulo 10: Mejores Prácticas y Accesibilidad

Módulo 11: Proyecto: Construyendo un Sitio Web Completo

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados