
Bordes de las Tablas
- Tabla de Ancho Completo
- Bordes Dobles
- Colapso de Bordes
- Estilos de Bordes en Tablas
- Bordes de Tablas con Colores Personalizados
- Bordes Redondeados en Tablas
- Bordes con Sombras en Tablas
- Espaciado entre Celdas y Bordes
- Bordes Ocultos o Invisibles
- Bordes de Tabla en Tablas Responsivas
- Estilo de Bordes en Tablas con Bootstrap
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
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 |
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 |
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias