30-Bordes de una tabla

Jorge Catalao noviembre 10, 2024
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

Durante el decorrer de los años y ya desde niño mis gustos preferidos, fue siempre la electrónica y la programación, eso que llevo a que me formase en varias escuelas profesionales, en temas tales como: electrónica Electricidad programación Técnicas de refrigeración etc. Tengo varias carreras profesionales relacionadas a los temas anteriormente descritos, precisamente por ese motivo, me he entusiasmado a crear un blog donde los temas serán los mencionados anteriormente. Espero que a mis visitantes les guste, y se aprovechen de los conocimientos que llevo años recopilando. Si eres estudiante de electricidad, electrónica o programación, aquí vas adquirir los conocimientos básicos, tanto para que continúes tus estudios, como para tu formación profesional. Cursos completos desde cero, los iré recopilando poco a poco, los cuales servirán para consulta tanto de estudiantes como electricistas profesionales, será como un manual o mas bien dicho un resumen donde podremos encontrar lo que necesitamos. Bueno espero que vos guste y me seguis, ya que los temas los ire duplicar tanto nel blog, como en mi canal de youtube.

Publicar un comentario

0 Comentarios

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