Taller > CSS
Tables en CSS
También se pueden utilizar pseudoclases como: “hover” para cambiar el estilo de una fila o celda cuando el usuario pasa el cursor sobre ella.
A continuación te doy un ejemplo de cómo se podría aplicar estilos a una tabla con CSS:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
Con este código se está aplicando un ancho del 100% a la tabla, un borde sólido de 1px y un padding de 8px a las celdas, y un alineado a la izquierda a los textos de la celda, además se está cambiando el color de fondo de las filas pares a un tono gris.
Bordes de la tabla
Para aplicar bordes a una tabla, se puede usar la propiedad border en el selector de la tabla. Por ejemplo, para aplicar un borde sólido de 2px de color rojo a la tabla se podría utilizar el siguiente código:
table {
border: 2px solid red;
}
También se pueden aplicar bordes individuales a las filas y celdas de la tabla utilizando las propiedades border-top, border-right, border-bottom y border-left. Por ejemplo, para aplicar un borde sólido de 1px de color azul solo en la parte superior de las celdas se podría utilizar el siguiente código:
td {
border-top: 1px solid blue;
}
Además, es posible aplicar un borde sólido a cada celda de la tabla usando la propiedad border en el selector de la celda. Por ejemplo, para aplicar un borde sólido de 1px de color negro a cada celda se podría utilizar el siguiente código:
td { border: 1px solid black; }
También se puede aplicar bordes redondeados a las celdas o a la tabla utilizando la propiedad border-radius, por ejemplo:
table {
border-radius: 10px;
}
En estas opciones se están aplicando bordes sólidos, pero también se pueden utilizar bordes con diseños más elaborados como dotted, dashed, double, groove, ridge, inset y outset.
Además, existen varias formas de personalizar los bordes de una tabla en CSS. Una de las formas es empleando las propiedades border-collapse y border-spacing.
La propiedad border-collapse permite especificar si los bordes de las celdas deben estar separados o fusionados. El valor separate (valor predeterminado) mantiene los bordes de las celdas separados, mientras que el valor collapse los fusiona.
La propiedad border-spacing permite especificar el espacio entre los bordes de las celdas. El valor predeterminado es 0, pero se puede aumentar o disminuir según el diseño deseado.
Por ejemplo, el siguiente código aplica un borde sólido de 1px a las celdas, los bordes de las celdas están fusionados y el espacio entre los bordes es de 5px:
table {
border-collapse: collapse;
border-spacing: 5px;
}
td {
border: 1px solid black;
}
Otra forma de personalizar los bordes es mediante el uso de imágenes de fondo. Se puede utilizar la propiedad border-image para aplicar una imagen en lugar de un borde sólido.
Esta propiedad toma varios valores, como la URL de la imagen, el número de repeticiones y el tamaño del borde. Por ejemplo, el siguiente código aplica una imagen de fondo como borde de la tabla:
table {
border-image: url(border-image.png) 30 30 round;
}
Tamaño de la tabla
Es posible controlar el tamaño de una tabla en HTML usando CSS.
Para establecer el ancho de una tabla, se puede emplear la propiedad width en el selector de la tabla. Por ejemplo, para establecer el ancho de una tabla en 600px se podría utilizar el siguiente código:
table {
width: 600px;
}
Además de establecer el ancho fijo, también se puede utilizar un porcentaje para hacer que la tabla se ajuste automáticamente al ancho del contenedor.
Por ejemplo, para hacer que la tabla ocupe el 100% del ancho del contenedor se podría utilizar el siguiente código:
table {
width: 100%;
}
Para establecer la altura de una tabla se puede utilizar la propiedad height en el selector de la tabla. Por ejemplo, para establecer la altura de una tabla en 400px se podría utilizar el siguiente código:
table {
height: 400px;
}
También se pueden establecer las dimensiones de las celdas de la tabla, utilizando las propiedades width y height en el selector de la celda. Por ejemplo, para establecer la altura de las celdas en 50px se podría utilizar el siguiente código:
td {
height: 50px;
}
Además de establecer el tamaño fijo, también se pueden establecer tamaños relativos en función del tamaño de la pantalla, utilizando medidas como vw (porcentaje del ancho de la ventana) o vh (porcentaje de la altura de la ventana).
Es importante tener en cuenta que el tamaño de una tabla puede ser afectado por las propiedades de los elementos contenidos en ella, como los bordes y los márgenes, y es necesario tener en cuenta estos valores para establecer el tamaño correcto de la tabla.
Alineación de tablas
La alineación de tablas en CSS se refiere a la posición en la que se ubica una tabla en relación con su contenedor.
Se puede utilizar varias propiedades de CSS para alinear una tabla horizontalmente, verticalmente o en ambos ejes.
Alineación horizontal
La alineación horizontal de una tabla en CSS se refiere a la posición en la que se ubica una tabla en relación a su contenedor en el eje horizontal. Se pueden utilizar varias propiedades de CSS para alinear una tabla horizontalmente.
La propiedad margin se utiliza para alinear una tabla horizontalmente. Utilizando margin: 0 auto se puede alinear la tabla en el centro del contenedor, mientras que utilizando margin-left: auto se puede alinear la tabla a la derecha.
La propiedad text-align se utiliza para alinear el contenido de las celdas horizontalmente dentro de la tabla, pudiendo establecer valores como left, center o right.
La propiedad justify-content es utilizada para alinear el contenido de una tabla en relación con su contenedor, es utilizada con flexbox.
La propiedad float se utiliza para alinear un elemento a la izquierda o a la derecha en relación con su contenedor.
La propiedad display se utiliza para establecer el comportamiento de un elemento en relación con su contenedor.
Ejemplos
Aquí te proporciono algunos ejemplos de cada propiedad de alineación horizontal de tablas en CSS:
Utilizando la propiedad margin:
table {
margin: 0 auto;
/* esto alineará la tabla en el centro del contenedor */
}
Utilizando la propiedad text-align:
td {
text-align: right;
/* esto alineará el contenido de las celdas a la derecha */
}
Utilizando la propiedad justify-content:
table {
display: flex;
/* habilitar flexbox */
justify-content: flex-end;
/* esto alineará el contenido de la tabla al final del contenedor */
}
Utilizando la propiedad float:
table {
float: right;
/* esto hará que la tabla flote a la derecha del contenedor */
}
Utilizando la propiedad display:
table {
display: inline-block;
/* esto hará que la tabla se comporte como un bloque inline */
}
Es importante tener en cuenta que algunas de estas propiedades pueden tener efectos colaterales en el diseño de la página, y que debes considerar cuidadosamente su uso en función del diseño deseado.
Alineamiento vertical
La alineación vertical de una tabla en CSS se refiere a la posición en la que se ubica una tabla en relación a su contenedor en el eje vertical. Se pueden utilizar varias propiedades de CSS para alinear una tabla verticalmente.
La propiedad vertical-align se utiliza para alinear el contenido de las celdas verticalmente dentro de la tabla, pudiendo establecer valores como top, middle o bottom.
La propiedad align-items es utilizada para alinear el contenido de una tabla en relación a su contenedor, es utilizada con flexbox.
Además, se puede establecer la altura de una tabla con la propiedad height en el selector de la tabla.
También se pueden establecer las dimensiones de las celdas de la tabla, utilizando las propiedades width y height en el selector de la celda.
Ejemplos:
Aquí te presento algunos ejemplos de cómo utilizar las diferentes propiedades de CSS mencionadas para alinear verticalmente una tabla:
Utilizando la propiedad vertical-align:
td {
vertical-align: middle;
/* esto alineará el contenido de las celdas en el medio de la celda */
}
Utilizando la propiedad align-items:
table {
display: flex;
/* habilitar flexbox */
align-items: flex-start;
/* esto alineará el contenido de la tabla al inicio del contenedor */
}
Utilizando la propiedad height:
table {
height: 400px;
/* esto establecerá la altura de la tabla en 400px */
}
Utilizando la propiedad width y height en el selector de la celda:
td {
width: 100px;
/* esto establecerá la anchura de las celdas en 100px */
height: 50px;
/* esto establecerá la altura de las celdas en 50px */
}
Estilo de la tabla
El estilo de una tabla en CSS se refiere a su aspecto visual, como los colores, bordes, rellenos y tipografías usadas. Se pueden emplear varias propiedades de CSS para estilizar una tabla.
El relleno de una tabla en CSS se refiere al espacio vacío entre el contenido de las celdas y los bordes de las celdas. Se puede utilizar la propiedad padding para establecer el relleno de una tabla.
La propiedad padding se utiliza para establecer el espacio entre el contenido de las celdas y los bordes de las celdas. El valor de padding puede ser especificado utilizando unidades de medida como pixels (px) o ems (em). Por ejemplo:
td {
padding: 10px;
/* esto establecerá un relleno de 10px en las celdas */
}
También es posible establecer diferentes rellenos para los cuatro lados de la celda utilizando la sintaxis de cuatro valores padding: top right bottom left;
td {
padding: 10px 15px 20px 25px;
/* esto establecerá un relleno de 10px en la parte superior, 15px en la derecha, 20px en la parte inferior y 25px en la izquierda de las celdas */
}
Es posible también establecer el relleno de una tabla en su conjunto utilizando el selector de la tabla y aplicando la propiedad padding sobre ella.
table {
padding: 10px;
/* esto establecerá un relleno de 10px alrededor de toda la tabla */
}
Divisores horizontales de ta tabla
Los divisores horizontales de una tabla en CSS son las líneas que separan las filas de una tabla. Se pueden utilizar las propiedades border-top y border-bottom para establecer los divisores horizontales de una tabla.
La propiedad border-top se utiliza para establecer el estilo, el ancho y el color de la línea superior de las celdas de una tabla. Por ejemplo:
td {
border-top: 1px solid #ddd;
/* esto establecerá una línea superior gris claro de 1px en las celdas */
}
La propiedad border-bottom se utiliza para establecer el estilo, el ancho y el color de la línea inferior de las celdas de una tabla. Por ejemplo:
td {
border-bottom: 1px solid #ddd;
/* esto establecerá una línea inferior gris claro de 1px en las celdas */
}
Tabla Hoverable
Una tabla “hoverable” es una tabla en la cual las filas o las celdas cambian de aspecto visual cuando el cursor del ratón se posa sobre ellas. Esto se puede lograr utilizando la pseudo-clase :hover de CSS.
Para hacer que las filas de una tabla cambien de aspecto visual al pasar el cursor del ratón sobre ellas, se puede utilizar el siguiente código:
tr:hover {
background-color: #f5f5f5;
/* esto cambiará el color de fondo de la fila al pasar el cursor del ratón sobre ella */
}
Para hacer que las celdas de una tabla cambien de aspecto visual al pasar el cursor del ratón sobre ellas, se puede utilizar el siguiente código:
td:hover {
background-color: #f5f5f5;
/* esto cambiará el color de fondo de la celda al pasar el cursor del ratón sobre ella */
}
Tabla a rayas
Una tabla a rayas en CSS es una tabla que tiene filas con diferentes colores de fondo para facilitar la lectura y la comprensión del contenido.
Se logra utilizando la propiedad background-color y las pseudo-clases :nth-child(odd) y :nth-child(even) en el selector de la fila.
Para crear una tabla a rayas en la que las filas impares tengan un color de fondo y las filas pares tengan otro color de fondo se puede utilizar el siguiente código:
tr:nth-child(odd) {
background-color: #f5f5f5;
/* esto establecerá el color de fondo de las filas impares */
}
tr:nth-child(even) {
background-color: #fff;
/* esto establecerá el color de fondo de las filas pares */
}
También es posible aplicar diferentes estilos a las celdas de las filas impares o pares utilizando el mismo patrón
td:nth-child(odd) {
background-color: #f5f5f5;
/* esto establecerá el color de fondo de las celdas de las filas impares */
}
td:nth-child(even) {
background-color: #fff;
/* esto establecerá el color de fondo de las celdas de las filas pares */
}
Color de tablas
El color de una tabla en CSS se refiere al color de los bordes, el fondo y el texto de las celdas de una tabla. Se pueden utilizar varias propiedades de CSS para establecer el color de una tabla.
La propiedad color se utiliza para establecer el color del texto de las celdas de una tabla. Por ejemplo:
td {
color: #333;
/* esto establecerá el color del texto en gris oscuro */
}
La propiedad background-color se utiliza para establecer el color de fondo de las celdas de una tabla. Por ejemplo:
td {
background-color: #f5f5f5;
/* esto establecerá el color de fondo en gris claro */
}
La propiedad border-color se utiliza para establecer el color de los bordes de las celdas de una tabla. Por ejemplo:
td {
border-color: #ddd;
/* esto establecerá el color de los bordes en gris claro */
}
También se pueden utilizar las propiedades border-top-color, border-right-color, border-bottom-color y border-left-color para establecer el color de los bordes superior, derecho, inferior e izquierdo de las celdas de una tabla respectivamente.
Por ejemplo:
td {
border-top-color: #ddd;
/* esto establecerá el color del borde superior en gris claro */
border-right-color: #ddd;
/* esto establecerá el color del borde derecho en gris claro */
border-bottom-color: #ddd;
/* esto establecerá el color del borde inferior en gris claro */
border-left-color: #ddd;
/* esto establecerá el color del borde izquierdo en gris claro */
}
Tabla responsive
Una tabla responsive en CSS es una tabla que se adapta automáticamente al tamaño de la pantalla del dispositivo en el que se visualiza. Esto se logra utilizando media queries y otras técnicas de diseño adaptativo en el código CSS.
Una forma de hacer una tabla responsive es utilizando las media queries para aplicar estilos diferentes a la tabla en función del ancho de la pantalla.
Por ejemplo, se pueden utilizar media queries para ocultar columnas en pantallas pequeñas, o para hacer que las celdas de la tabla sean más pequeñas en pantallas más estrechas.
@media screen and (max-width: 600px) {
/* estilos para pantallas pequeñas */
table {
width: 100%;
/* hace que la tabla ocupe todo el ancho de la pantalla */
}
thead {
display: none;
/* oculta el encabezado de la tabla */
}
tr {
margin-bottom: 10px;
/* aumenta el espacio entre las filas */
}
td {
display: block;
/* hace que las celdas se muestren una debajo de la otra */
text-align: right;
/* alinea el texto a la derecha */
font-size: 12px;
/* reduce el tamaño de la fuente */
}
}
Otra forma de hacer una tabla responsive es usando la propiedad overflow-x: auto para crear una barra de desplazamiento horizontal en las tablas que no caben en la pantalla.
table { overflow-x: auto; /* crea una barra de desplazamiento horizontal */ }
