Estilo CSS para Tablas

Introducción

En este laboratorio, aprenderá las propiedades fundamentales de CSS utilizadas para estilizar tablas HTML. Por defecto, las tablas HTML son simples y pueden ser difíciles de leer. Con CSS, puede transformar una tabla básica en una presentación de datos bien estructurada, visualmente atractiva y fácil de entender.

Comenzaremos con una tabla HTML básica y le aplicaremos estilos progresivamente. Aprenderá a gestionar bordes, añadir espaciado, estilizar la cabecera y alinear texto dentro de las celdas.

El archivo index.html necesario ya ha sido creado para usted. Su tarea será escribir código CSS en el archivo styles.css para estilizar la tabla. Puede previsualizar sus cambios en tiempo real en la pestaña "Web 8080" de su espacio de trabajo.

Establecer border-collapse collapse en la tabla

En este paso, comenzaremos a estilizar nuestra tabla. Por defecto, las celdas de las tablas HTML tienen sus propios bordes individuales, lo que puede resultar en un aspecto de "doble borde" que parece grueso y anticuado. La propiedad border-collapse controla si los bordes de la tabla están separados o colapsados en un solo borde.

Estableceremos border-collapse en collapse para crear bordes limpios de una sola línea.

Primero, abra el archivo styles.css desde el explorador de archivos de la izquierda. Agregue la siguiente regla CSS al archivo.

table {
  border-collapse: collapse;
}

Después de agregar el código, guarde el archivo. Aunque aún no verá bordes, esta propiedad es esencial para el siguiente paso. Puede cambiar a la pestaña "Web 8080" para ver la vista previa en vivo, aunque el cambio visual será mínimo en esta etapa.

Aplicar borde 1px solid black a th y td

Ahora que hemos configurado la tabla para usar un modelo de borde colapsado, agreguemos los bordes reales a las celdas de encabezado (th) y a las celdas de datos (td). Podemos seleccionar ambos elementos a la vez utilizando un selector separado por comas.

En este paso, agregará un borde sólido negro de 1px a cada celda de la tabla.

Agregue la siguiente regla CSS a su archivo styles.css, debajo de la regla table existente.

th,
td {
  border: 1px solid black;
}

Guarde el archivo y cambie a la pestaña "Web 8080". Ahora debería ver un borde limpio de una sola línea alrededor de cada celda de la tabla.

Usar padding 8px en las celdas de la tabla

La tabla ahora tiene bordes, pero el contenido dentro de las celdas está tocando los bordes, lo que da una apariencia abarrotada. Podemos usar la propiedad padding para agregar espacio entre el contenido y el borde de la celda, mejorando la legibilidad.

En este paso, agregará 8px de padding a todas las celdas de la tabla.

Modifique la regla th, td existente en styles.css para incluir la propiedad padding.

th,
td {
  border: 1px solid black;
  padding: 8px;
}

Después de guardar el archivo, revise nuevamente la pestaña "Web 8080". Notará que las celdas son ahora más grandes y el texto tiene un espaciado cómodo a su alrededor.

Añadir background-color a la fila de encabezado de la tabla

Para que el encabezado de la tabla destaque de las filas de datos, es una práctica común darle un color de fondo diferente. Esto separa visualmente los títulos de las columnas del contenido.

En este paso, agregará un color de fondo gris claro a las celdas de encabezado (th).

Agregue una nueva regla CSS que apunte solo a los elementos th en styles.css.

th {
  background-color: #f2f2f2;
}

Guarde el archivo y vea el resultado en la pestaña "Web 8080". La fila de encabezado de su tabla ahora debería tener un color de fondo distintivo, lo que facilita su identificación.

Implementar text-align left para celdas de datos

La alineación del texto es crucial para la legibilidad de las tablas. Por defecto, las celdas de encabezado (th) están centradas, mientras que las celdas de datos (td) están alineadas a la izquierda. Si bien la alineación a la izquierda es el comportamiento predeterminado para los elementos td, establecerlo explícitamente es una buena práctica para garantizar una representación consistente en todos los navegadores.

En este paso, establecerá explícitamente la alineación del texto para las celdas de datos a la izquierda.

Agregue una nueva regla CSS para el selector td en su archivo styles.css.

td {
  text-align: left;
}

Guarde el archivo. Dado que este es el comportamiento predeterminado, es posible que no vea un cambio visual en la pestaña "Web 8080", pero su hoja de estilos ahora es más robusta y explícita sobre el diseño previsto. Esto completa el estilo básico de nuestra tabla.

Resumen

¡Felicitaciones por completar el laboratorio! Ha transformado con éxito una tabla HTML simple en una tabla con estilo y aspecto profesional utilizando propiedades CSS fundamentales.

En este laboratorio, aprendió a:

• Usar border-collapse: collapse; para crear bordes limpios y únicos para una tabla.
• Aplicar un border a las celdas de encabezado (th) y de datos (td) de la tabla.
• Agregar espaciado interno a las celdas usando la propiedad padding.
• Diferenciar el encabezado de la tabla estableciendo un background-color.
• Controlar la alineación horizontal del texto dentro de las celdas usando text-align.

Estas habilidades son esenciales para presentar datos tabulares de manera efectiva en la web.