CSS Tables

Con CSS, se pueden aplicar estilos a los elementos de la tabla como el fondo, los bordes, las celdas y las filas. Por ejemplo, se puede cambiar el color de fondo de las filas impares para diferenciarlas de las filas pares, o se pueden aplicar bordes a las celdas para resaltar ciertos datos.

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>
Lenguaje del código: HTML, XML (xml)
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}
Lenguaje del código: CSS (css)

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.

La guía definitiva de HTML5 y CSS3: (Spanish Edition)

Ver Ofertas en Amazon

La Guía de HTML5, CSS3 y JavaScript: 2ª Edición

Ver Ofertas en Amazon

Aprende HTML y CSS en un fin de semana (Spanish Edition)

Ver Ofertas en Amazon

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;
}
Lenguaje del código: CSS (css)

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;
}
Lenguaje del código: CSS (css)

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;
}
Lenguaje del código: CSS (css)

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;
}
Lenguaje del código: CSS (css)

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;
}
Lenguaje del código: CSS (css)

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;
}
Lenguaje del código: CSS (css)

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;
}
Lenguaje del código: CSS (css)

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%;
}
Lenguaje del código: CSS (css)

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;
}
Lenguaje del código: CSS (css)

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;
}
Lenguaje del código: CSS (css)

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:

  1. Utilizando la propiedad margin:
table {
  margin: 0 auto; /* esto alineará la tabla en el centro del contenedor */
}
Lenguaje del código: CSS (css)
  1. Utilizando la propiedad text-align:
td {
  text-align: right; /* esto alineará el contenido de las celdas a la derecha */
}
Lenguaje del código: CSS (css)
  1. 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 */
}
Lenguaje del código: CSS (css)
  1. Utilizando la propiedad float:
table {
  float: right; /* esto hará que la tabla flote a la derecha del contenedor */
}
Lenguaje del código: CSS (css)
  1. Utilizando la propiedad display:
table {
  display: inline-block; /* esto hará que la tabla se comporte como un bloque inline */
}
Lenguaje del código: CSS (css)

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:

  1. Utilizando la propiedad vertical-align:
td {
  vertical-align: middle; /* esto alineará el contenido de las celdas en el medio de la celda */
}
Lenguaje del código: CSS (css)
  1. 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 */
}
Lenguaje del código: CSS (css)
  1. Utilizando la propiedad height:
table {
  height: 400px; /* esto establecerá la altura de la tabla en 400px */
}Lenguaje del código: CSS (css)
  1. 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 */
}
Lenguaje del código: CSS (css)

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.

Relleno de la 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 */
}
Lenguaje del código: CSS (css)

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 */
}
Lenguaje del código: CSS (css)

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 */
}
Lenguaje del código: CSS (css)

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 */
}
Lenguaje del código: CSS (css)

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 */
}
Lenguaje del código: CSS (css)

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 */
}
Lenguaje del código: CSS (css)

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 */
}
Lenguaje del código: CSS (css)

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 */
}
Lenguaje del código: CSS (css)

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 */
}
Lenguaje del código: CSS (css)

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 */
}
Lenguaje del código: CSS (css)

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 */
}
Lenguaje del código: CSS (css)

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 */
}
Lenguaje del código: CSS (css)

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 */
}
Lenguaje del código: CSS (css)

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 */
  }
}
Lenguaje del código: CSS (css)

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 */
}
Lenguaje del código: CSS (css)