29-Tablas en CSS

---

Tablas en CSS

• Tablas en CSS
• Bordes de las Tablas
• Doble Borde
• Colapso de los Bordes
• Tamaños de las Tablas
• Alineamiento Horizontal de una Tabla
• Alineamiento Vertical de una Tabla
• Padding en una Tabla
• bordes-horizontales
• Tabla pasando el ratón (:hover)
• Tabla Striped
• Tablas Coloridas
• Tablas Responsivas

---

Tablas en CSS

Las tablas en CSS permiten organizar los datos de una forma estructurada y clara. El siguiente ejemplo muestra cómo crear una tabla básica con CSS, controlando el estilo de bordes, espaciado y alineación.

Para empezar, se utiliza la etiqueta <table> para definir la tabla, luego se utilizan las etiquetas <tr> para las filas, <th> para las celdas de encabezado y <td> para las celdas de datos. Podemos personalizar las tablas usando propiedades de CSS como border, padding, text-align, etc.

El siguiente ejemplo muestra cómo crear una tabla básica en HTML y CSS:

    <table style="width: 100%; border-collapse: collapse; border: 1px solid #000;">
        <tr style="background-color: #f2f2f2;">
            <th style="padding: 8px; text-align: left; border: 1px solid #ddd;">Encabezado 1</th>
            <th style="padding: 8px; text-align: left; border: 1px solid #ddd;">Encabezado 2</th>
            <th style="padding: 8px; text-align: left; border: 1px solid #ddd;">Encabezado 3</th>
        </tr>
        <tr>
            <td style="padding: 8px; text-align: left; border: 1px solid #ddd;">Dato 1</td>
            <td style="padding: 8px; text-align: left; border: 1px solid #ddd;">Dato 2</td>
            <td style="padding: 8px; text-align: left; border: 1px solid #ddd;">Dato 3</td>
        </tr>
        <tr style="background-color: #f2f2f2;">
            <td style="padding: 8px; text-align: left; border: 1px solid #ddd;">Dato 4</td>
            <td style="padding: 8px; text-align: left; border: 1px solid #ddd;">Dato 5</td>
            <td style="padding: 8px; text-align: left; border: 1px solid #ddd;">Dato 6</td>
        </tr>
    </table>
                    

Ejemplos Visuales

Ejemplo de Tabla Básica en CSS

Este es un ejemplo de una tabla básica con bordes, espaciado y alineación utilizando solo HTML y CSS:

Encabezado 1	Encabezado 2	Encabezado 3
Dato 1	Dato 2	Dato 3
Dato 4	Dato 5	Dato 6

Este ejemplo muestra una tabla con tres columnas y dos filas de datos. El borde de la tabla es visible y las celdas tienen un espaciado interno (padding) para mejorar la legibilidad.

---

...

Bordes de las Tablas

En este tema, aprenderás a agregar bordes a las tablas con CSS y cómo personalizarlos.

Podemos aplicar bordes a toda la tabla o a las celdas individuales. Para aplicar bordes a las celdas, usamos la propiedad border y la propiedad border-collapse para fusionar los bordes de las celdas adyacentes.

El siguiente ejemplo muestra cómo se aplican los bordes a las celdas de una tabla:

<table style="width: 100%; border-collapse: collapse; border: 2px solid black;">
    <tr>
        <th style="border: 2px solid black; padding: 8px;">Encabezado 1</th>
        <th style="border: 2px solid black; padding: 8px;">Encabezado 2</th>
    </tr>
    <tr>
        <td style="border: 2px solid black; padding: 8px;">Dato 1</td>
        <td style="border: 2px solid black; padding: 8px;">Dato 2</td>
    </tr>
</table>
        

---

Ejemplos Visuales

Ejemplo de Bordes de las Tablas

Este es un ejemplo de una tabla con bordes aplicados a las celdas. Cada celda tiene un borde de 2px de grosor y de color negro:

border-collapse: collapse;border: 2px solid black;">

Encabezado 1	Encabezado 2
Dato 1	Dato 2

En este ejemplo, el borde es de 2px de grosor y se aplica tanto a las celdas como a la tabla. Usamos border-collapse: collapse; para asegurarnos de que los bordes entre celdas adyacentes se fusionen.

---

Doble Borde

Aprende cómo aplicar un doble borde a una tabla utilizando CSS para mejorar su estilo.

Para lograr un efecto de doble borde, se aplican dos bordes distintos a la tabla: uno para el contorno y otro para las celdas.

El siguiente ejemplo muestra cómo aplicar un doble borde:

table, th, td {
    border: 3px double #007bff; /* Doble borde azul */
    padding: 8px;
}
        

---

Ejemplos Visuales

Ejemplo de Doble Borde en la Tabla

Este es un ejemplo de una tabla con doble borde aplicado tanto a la tabla como a las celdas:

Encabezado 1	Encabezado 2	Encabezado 3
Dato 1	Dato 2	Dato 3

En este ejemplo, el doble borde se aplica tanto a la tabla como a las celdas usando la propiedad border con un valor double.

---

Colapso de los Bordes

Este tema trata sobre el colapso de los bordes de las tablas, una característica importante para crear tablas con bordes que se fusionan en lugar de ser independientes. Cuando aplicamos la propiedad border-collapse: collapse;, los bordes de las celdas adyacentes se combinan en un solo borde. Esto es útil para tablas con bordes más limpios y compactos.

Por defecto, las tablas en CSS tienen bordes separados, pero al utilizar la propiedad border-collapse con el valor collapse, los bordes de las celdas se fusionan, lo que elimina los espacios entre ellos.

El siguiente ejemplo muestra cómo aplicar el colapso de los bordes a una tabla:

table {
    border-collapse: collapse; /* Colapsa los bordes */
}
th, td {
    border: 1px solid black; /* Borde de las celdas */
    padding: 8px;
}
        

Ejemplos Visuales

Ejemplo de Colapso de Bordes en la Tabla

Este es un ejemplo de una tabla con los bordes colapsados. Los bordes entre las celdas se fusionan en un solo borde:

Encabezado 1	Encabezado 2	Encabezado 3
Dato 1	Dato 2	Dato 3

En este ejemplo, la propiedad border-collapse: collapse; asegura que los bordes de las celdas adyacentes se fusionen, eliminando los espacios entre ellas.

---

Tamaños de las Tablas

Descubre cómo ajustar los tamaños de las tablas y sus celdas con propiedades CSS como width y height. La propiedad width se usa para definir el ancho de la tabla o de las celdas, y height se utiliza para definir la altura de las celdas.

También puedes controlar el tamaño total de la tabla mediante la propiedad table-layout. El valor fixed puede hacer que las celdas tengan un tamaño uniforme.

El siguiente ejemplo muestra cómo ajustar el tamaño de una tabla y sus celdas:

table {
    width: 80%; /* Ancho de la tabla */
    table-layout: fixed; /* Establece un tamaño fijo para las celdas */
}
th, td {
    border: 1px solid black;
    padding: 8px;
    height: 50px; /* Altura de las celdas */
}
        

Ejemplos Visuales

Ejemplo de Tamaños de Tablas

Este es un ejemplo de una tabla con tamaños de celdas definidos:

Encabezado 1	Encabezado 2	Encabezado 3
Dato 1	Dato 2	Dato 3

En este ejemplo, hemos ajustado el ancho de la tabla al 80% del contenedor y hemos dado un tamaño fijo a las celdas con la propiedad table-layout: fixed;. También hemos especificado la altura de las celdas a 50px.

---

Alineamiento Horizontal de una Tabla

Aquí aprenderás cómo alinear una tabla horizontalmente en su contenedor usando las propiedades de CSS adecuadas, como margin y text-align.

Para alinear una tabla en su contenedor, puedes usar la propiedad margin con los valores auto para centrar la tabla. La propiedad text-align se usa para alinear el contenido de las celdas dentro de la tabla.

El siguiente ejemplo muestra cómo alinear una tabla horizontalmente en su contenedor:

table {
    width: 60%; /* Ancho de la tabla */
    margin: 0 auto; /* Alineación horizontal centrada */
}
th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: center; /* Alineación del contenido de las celdas */
}
        

Ejemplos Visuales

Ejemplo de Alineamiento Horizontal de la Tabla

Este es un ejemplo de cómo alinear una tabla horizontalmente en su contenedor usando CSS:

Encabezado 1	Encabezado 2
Dato 1	Dato 2

En este ejemplo, hemos utilizado margin: 0 auto para centrar la tabla en el contenedor, y text-align: center para centrar el contenido dentro de las celdas.

---

Alineamiento Vertical de una Tabla

En este tema se explica cómo alinear el contenido de las celdas de una tabla de forma vertical utilizando CSS.

Para alinear el contenido verticalmente dentro de las celdas de una tabla, se pueden usar propiedades como vertical-align en las celdas de la tabla (td y th).

En el siguiente ejemplo, se muestra cómo alinear el contenido de las celdas en la parte superior, en el centro y en la parte inferior:

td {
    height: 100px; /* Establece una altura para ver el alineamiento vertical */
}
.top {
    vertical-align: top; /* Alinea el contenido en la parte superior */
}
.middle {
    vertical-align: middle; /* Alinea el contenido al centro */
}
.bottom {
    vertical-align: bottom; /* Alinea el contenido en la parte inferior */
}
        

Ejemplos Visuales

Ejemplo de Alineamiento Vertical de las Celdas

Este es un ejemplo de cómo alinear el contenido de las celdas verticalmente dentro de una tabla:

Encabezado 1	Encabezado 2
Alineación Superior	Alineación Media
Alineación Inferior	Alineación Inferior

En este ejemplo, hemos utilizado la propiedad vertical-align para alinear el contenido de las celdas. Los valores utilizados son:

• top: Alineación en la parte superior de la celda.
• middle: Alineación al centro de la celda.
• bottom: Alineación en la parte inferior de la celda.

---

Padding en una Tabla

Aprende cómo aplicar el padding a las celdas de una tabla para mejorar su espaciamiento y legibilidad.

El padding se utiliza para agregar espacio dentro de las celdas de la tabla, separando el contenido de las celdas de sus bordes. Esto hace que el contenido sea más legible y estéticamente agradable.

En el siguiente ejemplo, se utiliza padding en las celdas de la tabla para agregar espacio alrededor del contenido:

table, th, td {
    border: 1px solid black;
    padding: 15px; /* Aplica padding de 15px a todas las celdas de la tabla */
}
        

---

Ejemplos Visuales

Ejemplo de Padding en las Celdas de una Tabla

Este es un ejemplo de cómo se ve el efecto del padding en las celdas de una tabla:

Encabezado 1	Encabezado 2
Contenido de la celda 1	Contenido de la celda 2
Contenido de la celda 3	Contenido de la celda 4

En este ejemplo, hemos agregado un padding de 15px a todas las celdas de la tabla (incluidos los encabezados th y las celdas de datos td) para crear un espacio uniforme alrededor del contenido.

---

Bordes Horizontales

En este tema aprenderás cómo aplicar bordes solamente en las filas de una tabla, creando divisores horizontales sin bordes verticales. Esto se logra utilizando la propiedad border-bottom o border-top en las filas de la tabla <tr>, y dejando las celdas <td> o <th> sin bordes laterales.

Este estilo es útil cuando deseas una tabla más limpia y ordenada, con solo divisores horizontales entre las filas.

            
<table style="width: 100%; border-collapse: collapse;">
    <tr style="border-bottom: 2px solid black;">
        <th>Encabezado 1</th>
        <th>Encabezado 2</th>
    </tr>
    <tr style="border-bottom: 2px solid black;">
        <td>Dato 1</td>
        <td>Dato 2</td>
    </tr>
    <tr style="border-bottom: 2px solid black;">
        <td>Dato 3</td>
        <td>Dato 4</td>
    </tr>
</table>
            
        

Ejemplos Visuales

Ejemplo de Bordes Horizontales en una Tabla

En el siguiente ejemplo, puedes ver cómo se aplican bordes solo en las filas de la tabla:

Encabezado 1	Encabezado 2
Dato 1	Dato 2
Dato 3	Dato 4

En este ejemplo, hemos utilizado la propiedad border-bottom para aplicar un borde solo en la parte inferior de cada fila. Las celdas no tienen bordes verticales, lo que crea un diseño más limpio con solo líneas horizontales entre las filas.

---

Tabla pasando el ratón (:hover)

En este tema aprenderás a usar el selector :hover para cambiar el estilo de las filas de una tabla cuando el ratón pasa sobre ellas. Esto se logra añadiendo una regla CSS que cambia las propiedades de estilo de las filas de la tabla, como el color de fondo, cuando el usuario interactúa con ellas.

El efecto de :hover mejora la interacción del usuario al hacer la tabla más dinámica y visualmente atractiva.

            
 <!-- Tabla con efecto :hover para cambio de color de fondo -->
 <table style="width: 100%; border-collapse: collapse; border: 1px solid #ccc;">
     <tr style="background-color: #f2f2f2; border: 1px solid #ccc;">
         <th style="border: 1px solid #ccc; padding: 8px;">Encabezado 1</th>
         <th style="border: 1px solid #ccc; padding: 8px;">Encabezado 2</th>
     </tr>
     <tr style="background-color: #ffffff;" onmouseover="this.style.backgroundColor='orange'" 
         onmouseout="this.style.backgroundColor='#ffffff'" style="border: 1px solid #ccc;">
         <td style="border: 1px solid #ccc; padding: 8px;">Dato 1</td>
         <td style="border: 1px solid #ccc; padding: 8px;">Dato 2</td>
     </tr>
     <tr style="background-color: #ffffff;" onmouseover="this.style.backgroundColor='orange'" 
         onmouseout="this.style.backgroundColor='#ffffff'" style="border: 1px solid #ccc;">
         <td style="border: 1px solid #ccc; padding: 8px;">Dato 3</td>
         <td style="border: 1px solid #ccc; padding: 8px;">Dato 4</td>
     </tr>
     <tr style="background-color: #ffffff;" onmouseover="this.style.backgroundColor='orange'" 
         onmouseout="this.style.backgroundColor='#ffffff'" style="border: 1px solid #ccc;">
         <td style="border: 1px solid #ccc; padding: 8px;">Dato 5</td>
         <td style="border: 1px solid #ccc; padding: 8px;">Dato 6</td>
     </tr>
     <tr style="background-color: #ffffff;" onmouseover="this.style.backgroundColor='orange'" 
         onmouseout="this.style.backgroundColor='#ffffff'" style="border: 1px solid #ccc;">
         <td style="border: 1px solid #ccc; padding: 8px;">Dato 7</td>
         <td style="border: 1px solid #ccc; padding: 8px;">Dato 8</td>
     </tr>
     <tr style="background-color: #ffffff;" onmouseover="this.style.backgroundColor='orange'" 
         onmouseout="this.style.backgroundColor='#ffffff'" style="border: 1px solid #ccc;">
         <td style="border: 1px solid #ccc; padding: 8px;">Dato 9</td>
         <td style="border: 1px solid #ccc; padding: 8px;">Dato 10</td>
     </tr>
 </table>
            
        

Ejemplo Visual

Encabezado 1	Encabezado 2
Dato 1	Dato 2
Dato 3	Dato 4
Dato 5	Dato 6
Dato 7	Dato 8
Dato 9	Dato 10

---

Tabla Striped

El estilo "striped" se utiliza para mejorar la legibilidad de las tablas mediante la alternancia de colores entre las filas. Esta técnica es útil cuando se manejan grandes cantidades de datos, ya que facilita la visualización y comparación de la información de cada fila. Para lograr este efecto, se puede usar CSS para aplicar colores alternados en las filas de una tabla.

En la siguiente sección, verás cómo aplicar este estilo utilizando la propiedad :nth-child de CSS.

                
    <!-- Tabla Striped con CSS personalizado -->
    <table style="width: 100%; border-collapse: collapse; border: 1px solid black;">
        <tr style="background-color: #f2f2f2; border: 1px solid black;">
            <th style="border: 1px solid black;">Encabezado 1</th>
            <th style="border: 1px solid black;">Encabezado 2</th>
        </tr>
        <tr style="background-color: #ffffff; border: 1px solid black;">
            <td style="border: 1px solid black;">Dato 1</td>
            <td style="border: 1px solid black;">Dato 2</td>
        </tr>
        <tr style="background-color: #f9f9f9; border: 1px solid black;">
            <td style="border: 1px solid black;">Dato 3</td>
            <td style="border: 1px solid black;">Dato 4</td>
        </tr>
        <tr style="background-color: #ffffff; border: 1px solid black;">
            <td style="border: 1px solid black;">Dato 5</td>
            <td style="border: 1px solid black;">Dato 6</td>
        </tr>
        <tr style="background-color: #f9f9f9; border: 1px solid black;">
            <td style="border: 1px solid black;">Dato 7</td>
            <td style="border: 1px solid black;">Dato 8</td>
        </tr>
        <tr style="background-color: #ffffff; border: 1px solid black;">
            <td style="border: 1px solid black;">Dato 9</td>
            <td style="border: 1px solid black;">Dato 10</td>
        </tr>
    </table>
                
            

Ejemplo Visual

Encabezado 1	Encabezado 2
Dato 1	Dato 2
Dato 3	Dato 4
Dato 5	Dato 6
Dato 7	Dato 8
Dato 9	Dato 10

---

Tablas Coloridas con Bootstrap

Las tablas coloridas pueden ser una forma efectiva de mejorar la apariencia de los datos que presentas. Con Bootstrap, podemos usar clases como table, table-success, table-danger, y table-primary para agregar color a las tablas de manera sencilla.

Por ejemplo, table-success aplica un fondo verde claro, table-danger un fondo rojo, y table-primary un fondo azul.

            
                <!-- Tabla Amarilla -->
                <table class="table table-warning table-striped">
                    <thead>
                        <tr>
                            <th>Encabezado 1</th>
                            <th>Encabezado 2</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Dato 1</td>
                            <td>Dato 2</td>
                        </tr>
                        <tr>
                            <td>Dato 3</td>
                            <td>Dato 4</td>
                        </tr>
                    </tbody>
                </table>

                <!-- Tabla Roja -->
                <table class="table table-danger table-striped">
                    <thead>
                        <tr>
                            <th>Encabezado 1</th>
                            <th>Encabezado 2</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Dato 1</td>
                            <td>Dato 2</td>
                        </tr>
                        <tr>
                            <td>Dato 3</td>
                            <td>Dato 4</td>
                        </tr>
                    </tbody>
                </table>

                <!-- Tabla Azul -->
                <table class="table table-primary table-striped">
                    <thead>
                        <tr>
                            <th>Encabezado 1</th>
                            <th>Encabezado 2</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Dato 1</td>
                            <td>Dato 2</td>
                        </tr>
                        <tr>
                            <td>Dato 3</td>
                            <td>Dato 4</td>
                        </tr>
                    </tbody>
                </table>
            
        

Ejemplo Visual

Tabla Amarilla

Encabezado 1	Encabezado 2
Dato 1	Dato 2
Dato 3	Dato 4

Tabla Roja

Encabezado 1	Encabezado 2
Dato 1	Dato 2
Dato 3	Dato 4

Tabla Azul

Encabezado 1	Encabezado 2
Dato 1	Dato 2
Dato 3	Dato 4

---

Tablas Responsivas

Las tablas responsivas son aquellas que se adaptan al tamaño de la pantalla en la que se visualizan, lo que permite una mejor experiencia en dispositivos móviles o pantallas más pequeñas. Para hacer que una tabla sea responsiva, se puede utilizar la propiedad overflow-x junto con un contenedor que permita desplazamiento horizontal cuando la tabla sea más ancha que el área visible en la pantalla.

En este tema, aprenderás cómo implementar una tabla responsiva usando clases de Bootstrap que ayudan a gestionar este comportamiento en pantallas pequeñas.

El código básico para una tabla responsiva es el siguiente:

                        
    <div style="overflow-x:auto;">
        <table>
            ... table content ...
        </table>
    </div>
                        
                    

Ejemplo Visual

Encabezado 1	Encabezado 2	Encabezado 3	Encabezado 4	Encabezado 5
Dato 1	Dato 2	Dato 3	Dato 4	Dato 5
Dato 6	Dato 7	Dato 8	Dato 9	Dato 10
Dato 11	Dato 12	Dato 13	Dato 14	Dato 15
Dato 16	Dato 17	Dato 18	Dato 19	Dato 20

---

Ir al índice

---

---