30-Bordes de una Tabla en CSS: Resalta tus Datos 馃搵

Jorge Catalao agosto 13, 2025
HTML




Tabla de Ancho Completo

La tabla de ancho completo utiliza la propiedad CSS width: 100% para hacer que la tabla ocupe todo el ancho disponible de su contenedor. De esta manera, la tabla se adapta autom谩ticamente a diferentes tama帽os de pantalla. 

<table style="width: 100%; border-collapse: collapse;">
    <thead>
        <tr>
            <th style="border: 1px solid #333; padding: 8px;">Encabezado 1</th>
            <th style="border: 1px solid #333; padding: 8px;">Encabezado 2</th>
            <th style="border: 1px solid #333; padding: 8px;">Encabezado 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="border: 1px solid #333; padding: 8px;">Dato 1</td>
            <td style="border: 1px solid #333; padding: 8px;">Dato 2</td>
            <td style="border: 1px solid #333; padding: 8px;">Dato 3</td>
        </tr>
        <tr>
            <td style="border: 1px solid #333; padding: 8px;">Dato 4</td>
            <td style="border: 1px solid #333; padding: 8px;">Dato 5</td>
            <td style="border: 1px solid #333; padding: 8px;">Dato 6</td>
        </tr>
        <tr>
            <td style="border: 1px solid #333; padding: 8px;">Dato 7</td>
            <td style="border: 1px solid #333; padding: 8px;">Dato 8</td>
            <td style="border: 1px solid #333; padding: 8px;">Dato 9</td>
        </tr>
    </tbody>
</table>

Ejemplo Visual

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


Bordes Dobles

Los bordes dobles se pueden aplicar usando la propiedad CSS border-style: double;. Esto crea dos l铆neas visibles alrededor de cada celda de la tabla, brindando un efecto distintivo y resaltando el contenido de la tabla. 

<table style="border-collapse: collapse; width: 100%;">
    <thead>
        <tr>
            <th style="border: 3px double #333; padding: 8px;">Encabezado 1</th>
            <th style="border: 3px double #333; padding: 8px;">Encabezado 2</th>
            <th style="border: 3px double #333; padding: 8px;">Encabezado 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="border: 3px double #333; padding: 8px;">Dato 1</td>
            <td style="border: 3px double #333; padding: 8px;">Dato 2</td>
            <td style="border: 3px double #333; padding: 8px;">Dato 3</td>
        </tr>
        <tr>
            <td style="border: 3px double #333; padding: 8px;">Dato 4</td>
            <td style="border: 3px double #333; padding: 8px;">Dato 5</td>
            <td style="border: 3px double #333; padding: 8px;">Dato 6</td>
        </tr>
        <tr>
            <td style="border: 3px double #333; padding: 8px;">Dato 7</td>
            <td style="border: 3px double #333; padding: 8px;">Dato 8</td>
            <td style="border: 3px double #333; padding: 8px;">Dato 9</td>
        </tr>
    </tbody>
</table>

Ejemplo Visual

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


Colapso de Bordes

El colapso de bordes se refiere a la propiedad CSS border-collapse: collapse;, que hace que los bordes de las celdas de la tabla se fusionen en uno solo. Esto elimina el espacio entre los bordes de las celdas, creando una apariencia m谩s unificada y compacta. 

<table style="border-collapse: collapse; width: 100%;">
    <thead>
        <tr>
            <th style="border: 1px solid #333; padding: 8px;">Encabezado 1</th>
            <th style="border: 1px solid #333; padding: 8px;">Encabezado 2</th>
            <th style="border: 1px solid #333; padding: 8px;">Encabezado 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="border: 1px solid #333; padding: 8px;">Dato 1</td>
            <td style="border: 1px solid #333; padding: 8px;">Dato 2</td>
            <td style="border: 1px solid #333; padding: 8px;">Dato 3</td>
        </tr>
        <tr>
            <td style="border: 1px solid #333; padding: 8px;">Dato 4</td>
            <td style="border: 1px solid #333; padding: 8px;">Dato 5</td>
            <td style="border: 1px solid #333; padding: 8px;">Dato 6</td>
        </tr>
    </tbody>
</table>

Ejemplo Visual

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


Estilos de Bordes en Tablas

En las tablas, puedes aplicar diferentes estilos de bordes como solid, dotted y dashed mediante la propiedad border-style. Esto permite personalizar la apariencia de los bordes seg煤n el dise帽o que desees. 

<table style="width: 100%; border-collapse: collapse;">
    <thead>
        <tr>
            <th style="border: 2px solid #333; padding: 8px;">S贸lido</th>
            <th style="border: 2px dotted #333; padding: 8px;">Punteado</th>
            <th style="border: 2px dashed #333; padding: 8px;">Guiones</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="border: 2px solid #333; padding: 8px;">Dato 1</td>
            <td style="border: 2px dotted #333; padding: 8px;">Dato 2</td>
            <td style="border: 2px dashed #333; padding: 8px;">Dato 3</td>
        </tr>
    </tbody>
</table>

Ejemplo Visual

S贸lido Punteado Guiones
Dato 1 Dato 2 Dato 3


Bordes de Tablas con Colores Personalizados

Puedes personalizar los bordes de las tablas utilizando la propiedad border-color en CSS, la cual permite asignar un color espec铆fico a cada borde de la tabla. Esto es 煤til para darle un estilo 煤nico a la tabla y hacer que los datos se destaquen. 

<table style="width: 100%; border-collapse: collapse;">
    <thead>
        <tr>
            <th style="border: 2px solid red; padding: 8px;">Encabezado 1</th>
            <th style="border: 2px solid green; padding: 8px;">Encabezado 2</th>
            <th style="border: 2px solid blue; padding: 8px;">Encabezado 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="border: 2px solid red; padding: 8px;">Dato 1</td>
            <td style="border: 2px solid green; padding: 8px;">Dato 2</td>
            <td style="border: 2px solid blue; padding: 8px;">Dato 3</td>
        </tr>
    </tbody>
</table>

Ejemplo Visual

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


Bordes Redondeados en Tablas

Para redondear los bordes de las tablas y darles un aspecto m谩s suave, se utiliza la propiedad border-radius en CSS. Este estilo se aplica generalmente al elemento <table> y es ideal para dise帽os modernos. 

<table style="width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 10px; overflow: hidden;">
    <thead>
        <tr>
            <th style="border: 1px solid #333; padding: 8px;">Encabezado 1</th>
            <th style="border: 1px solid #333; padding: 8px;">Encabezado 2</th>
            <th style="border: 1px solid #333; padding: 8px;">Encabezado 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="border: 1px solid #333; padding: 8px;">Dato 1</td>
            <td style="border: 1px solid #333; padding: 8px;">Dato 2</td>
            <td style="border: 1px solid #333; padding: 8px;">Dato 3</td>
        </tr>
    </tbody>
</table>

Ejemplo Visual

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


Bordes con Sombras en Tablas

Para a帽adir un efecto de profundidad en las tablas, se puede aplicar la propiedad CSS box-shadow. Esta propiedad permite crear una sombra alrededor del borde de la tabla, haciendo que parezca elevada respecto al fondo. 

<table style="width: 100%; border-collapse: collapse; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);">
    <thead>
        <tr>
            <th style="border: 1px solid #333; padding: 8px;">Encabezado 1</th>
            <th style="border: 1px solid #333; padding: 8px;">Encabezado 2</th>
            <th style="border: 1px solid #333; padding: 8px;">Encabezado 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="border: 1px solid #333; padding: 8px;">Dato 1</td>
            <td style="border: 1px solid #333; padding: 8px;">Dato 2</td>
            <td style="border: 1px solid #333; padding: 8px;">Dato 3</td>
        </tr>
    </tbody>
</table>

Ejemplo Visual

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


Espaciado entre Celdas y Bordes

En CSS, el espacio interior de cada celda se ajusta con la propiedad padding aplicada en los elementos <td> o <th>, mientras que el espacio entre los bordes de las celdas se controla con la propiedad border-spacing en el elemento <table>. 

<table style="border-collapse: separate; border-spacing: 10px; width: 100%;">
    <thead>
        <tr>
            <th style="padding: 12px; border: 1px solid #333;">Encabezado 1</th>
            <th style="padding: 12px; border: 1px solid #333;">Encabezado 2</th>
            <th style="padding: 12px; border: 1px solid #333;">Encabezado 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="padding: 12px; border: 1px solid #333;">Dato 1</td>
            <td style="padding: 12px; border: 1px solid #333;">Dato 2</td>
            <td style="padding: 12px; border: 1px solid #333;">Dato 3</td>
        </tr>
    </tbody>
</table>

Ejemplo Visual

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


Bordes Ocultos o Invisibles

Para hacer que los bordes de una tabla o de celdas individuales se vuelvan invisibles, se puede aplicar la propiedad border: none;. Esto permite ocultar los bordes sin eliminar la estructura de la tabla. 

<table style="width: 100%;">
    <thead>
        <tr>
            <th style="border: none; padding: 8px;">Encabezado 1</th>
            <th style="border: none; padding: 8px;">Encabezado 2</th>
            <th style="border: none; padding: 8px;">Encabezado 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="border: none; padding: 8px;">Dato 1</td>
            <td style="border: none; padding: 8px;">Dato 2</td>
            <td style="border: none; padding: 8px;">Dato 3</td>
        </tr>
    </tbody>
</table>

Ejemplo Visual

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


Bordes de Tabla en Tablas Responsivas

Para que las tablas sean responsivas y se adapten correctamente a diferentes tama帽os de pantalla, se pueden utilizar propiedades de CSS como max-width y media queries. Adem谩s, las tablas pueden tener bordes que se ajustan din谩micamente a las dimensiones de la pantalla para garantizar que no se desborden en pantallas m谩s peque帽as. A continuaci贸n, se muestra c贸mo implementar tablas con bordes que se ajustan a pantallas responsivas. 

<style>
/* Media query para pantallas peque帽as */
@media screen and (max-width: 600px) {
    table {
        width: 100%;
        border: 1px solid #333;
        border-collapse: collapse;
    }

    table th, table td {
        padding: 10px;
        border: 1px solid #333;
    }
}
</style>

<table>
    <thead>
        <tr>
            <th>Encabezado 1</th>
            <th>Encabezado 2</th>
            <th>Encabezado 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Dato 1</td>
            <td>Dato 2</td>
            <td>Dato 3</td>
        </tr>
    </tbody>
</table>

Ejemplo Visual

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


Estilo de Bordes en Tablas con Bootstrap

Bootstrap proporciona clases predise帽adas para aplicar bordes a las tablas de manera r谩pida y sencilla. Por ejemplo, la clase .table-bordered agrega bordes a todas las celdas de la tabla. Esta clase es 煤til cuando se desea aplicar bordes de manera uniforme sin escribir mucho c贸digo CSS. 

<table class="table table-bordered">
    <thead>
        <tr>
            <th>Encabezado 1</th>
            <th>Encabezado 2</th>
            <th>Encabezado 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Dato 1</td>
            <td>Dato 2</td>
            <td>Dato 3</td>
        </tr>
    </tbody>
</table>

Ejemplo Visual

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




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