29-Tablas en CSS: Da Forma a tus Datos 馃搳

Jorge Catalao agosto 13, 2025
HTML




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




Tags:
Jorge Catalao

Posted by: Jorge Catalao

Bienvenido a mi blog de cocina, un espacio donde comparto recetas sencillas que celebran tanto los sabores de hoy como los de ayer. Aqu铆 encontrar谩s platos f谩ciles de preparar, con ingredientes accesibles y explicaciones paso a paso, pensadas para quienes disfrutan cocinar sin complicarse. Me inspiro en la cocina tradicional, esos sabores que nos conectan con la infancia y la memoria, pero tambi茅n en recetas modernas, r谩pidas y pr谩cticas para el ritmo actual. Desde guisos caseros hasta ideas frescas para todos los d铆as, este blog es para quienes aman el sabor aut茅ntico, sin importar el nivel de experiencia en la cocina. ¡Cocinar puede ser simple, delicioso y hasta divertido! Gracias por estar ac谩 y compartir conmigo esta pasi贸n por la buena comida.

Publicar un comentario

0 Comentarios

Si desea contactar comigo, lo puede hacer atravez deste formulario gracias