En los primeros días del desarrollo web, las tablas HTML eran muy simples y carecían de amplias opciones de estilo. Sin embargo, hoy en día, la mayoría de las tablas están diseñadas para crear una experiencia más estética y funcional para los usuarios.
CSS proporciona un conjunto de atributos de estilo de tabla. Estos atributos le permiten, entre otras cosas, separar las celdas de la tabla, especificar los bordes de la tabla y especificar el ancho y el alto de la tabla.
Este tutorial explicará, con ejemplos, cómo diseñar una tabla usando CSS . Al final de este tutorial, serás un experto.
Tablas HTML
El código HTML define la estructura de las tablas. Use la etiqueta
para definir una tabla. Las etiquetas
,
y
especifican respectivamente filas, encabezados de tabla y celdas de contenido.
Veamos un ejemplo de tabla HTML. En el siguiente ejemplo, tenemos una tabla que enumera los cinco libros principales en la lista de libros más vendidos del New York Times para la semana del 23 de marzo de 2020:
El código de nuestra tabla es el siguiente:
Esta tabla tiene tres columnas y seis filas, incluida una fila de `on tu mente.
Tablas CSS
CSS se usa para diseñar tablas. Aunque la tabla anterior muestra los datos de manera organizada, está escrita en HTML simple (no hay estilos). Al usar CSS, puede hacer que las tablas se vean mejor.
Hay muchas funciones de CSS que puede usar para diseñar una mesa. Con CSS puede:
agregar bordes
comprimir bordes
ajustar el espaciado de los bordes
ajustar el ancho y el alto de un tabla
agregar relleno
alinear texto horizontalmente
alinear texto verticalmente
agregar función jog mouse (hover)
establecer colores de celda
establecer cómo se mostrarán las celdas vacías
Cubriremos todos estos temas en la discusión a continuación.
Bordes
Supongamos que queremos agregar bordes alrededor de la matriz o alrededor de los elementos que contiene.
Para agregar bordes, podemos usar la propiedad border. Aquí hay un ejemplo que usa la propiedad border para agregar bordes a una tabla y sus celdas, incluidas las celdas de encabezado:
En nuestro código, definimos un borde negro sólido de 1 píxel de ancho. Aquí está el resultado de nuestro código:
Tenga en cuenta que nuestra tabla contiene doble borders Esto se debe a que aplicamos un borde a la tabla en sí (
), sus encabezados (
) y sus celdas (
). Bordes dobles a bordes simples, podemos usar la propiedad border-collapse.
La propiedad border-collapse convierte los bordes dobles de una tabla en bordes simples. El valor predeterminado de la propiedad border-collapse se contrae. Si la propiedad border-collapse recibe el valor colapso , los bordes alrededor de una matriz se colapsarán.
Este es un ejemplo de la propiedad b command-collapse en acción:
Nuestro código devuelve:
Nuestra tabla y su contenido ahora tienen un solo borde.
Border Spac spa
Puede utilizar la propiedad border-spacing para definir el espacio entre las celdas de una tabla. La propiedad border-spacing define el espacio horizontal y vertical entre celdas - y lo hace en ese orden.
Aquí hay un ejemplo usando la propiedad border-spacing en nuestra tabla inicial (la que no tiene bordes colapsados):
Nuestro código devuelve:
Cada una de nuestras celdas tiene un espacio de 10px en la horizontal y bordes verticales.
Ancho y alto
Puede especificar el ancho y el alto de una tabla y sus propiedades usando los atributos de ancho y alto .
Supongamos que queremos que el ancho de nuestra tabla de arriba (la que tiene los bordes colapsados) sea el ancho de la página web en sí, y supongamos que queremos que la altura de cada encabezado de tabla sea de 30 píxeles de alto. Podemos hacer esto. usando el siguiente código CSS:
Nuestro código devuelve:
Como puede ver, nuestra tabla ahora tiene el ancho de la página web. Además, los encabezados de las columnas en nuestra tabla tienen 30 píxeles de alto.
Relleno
Puede usar la propiedad de relleno para añadir algo de espacio entre los bordes de celdas en una tabla y el contenido de esas celdas. La propiedad de relleno se puede usar en las etiquetas
y
.
Supongamos que queremos agregar un relleno de 10 píxeles alrededor de la celda contenido de nuestra tabla, incluidas las celdas de encabezado. Podemos hacerlo usando este código:
Nuestro código devuelve:
El contenido de cada una de las líneas y nuestra tabla de encabezados ahora tener un relleno de 10 píxeles en todos los bordes.
Alineación de texto horizontal
Puede usar la propiedad text-align para alinear el texto almacenado en una o
en una matriz. De forma predeterminada, los elementos
están alineados al centro y los elementos
están alineados a la izquierda.
Los valores más utilizados ‚Äã‚Äãodel atributo de alineación de texto son:< br>
izquierda, centro, derecha (compatible con todos los navegadores excepto Microsoft Edge e Internet Explorer)
inicio y final (compatible con todos los navegadores excepto Microsoft Edge e Internet Explorer) )
Supongamos que queremos centrar los elementos
en nuestra matriz y alinear los elementos
a la izquierda de cada celda. Podemos hacerlo usando este código:
Nuestro código devuelve:
En este ejemplo, hemos centrado el texto fuera de la celda. La celda d `el encabezado y el texto de la celda del encabezado están alineados a la izquierda.
Alineación vertical del texto
CSS La propiedad vertical-align se usa para especificar la alineación vertical del contenido en el
o
. De forma predeterminada, el valor de la propiedad de alineación vertical se establece en medio , lo que significa que el contenido se alinea verticalmente en el centro de la celda.
Supongamos que queremos alinear el texto en nuestras celdas
con la parte inferior de las celdas. Pos lo hacemos usando este código:
