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:
| 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 |
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias