Listas y tablas CSS

CSS permite personalizar completamente la apariencia de listas y tablas. Esto incluye el estilo de viñetas, tipos de numeración, así como bordes, colores y tamaños en tablas.

Formato de listas

Con la propiedad <list-style-type> definimos el tipo de viñeta, como círculo, cuadrado, números romanos o letras. Las listas ordenadas y desordenadas pueden tener distintos estilos.

Los siguientes ejemplos muestran cómo cambian las listas con distintos estilos de viñetas o numeración.

Formato de tablas

Al dar estilo a tablas se usan propiedades como border, padding y background. Con <border-collapse> podemos hacer que los bordes de celdas adyacentes se fusionen.

Este código muestra una tabla simple con encabezado y dos filas de datos, con formato CSS básico.

Consejos para listas y tablas

Las listas y tablas hacen el contenido más claro y legible, pero un exceso de estilos puede ser confuso.

• Cuida siempre la legibilidad; en tablas puede ser útil resaltar filas.
• No uses demasiados estilos de lista en una sola página, puede ser caótico visualmente.
• En diseño responsivo, permite que las tablas sean desplazables en pantallas pequeñas.