Saltar al contenido principal

Estilización de listas y tablas.

En este artículo, exploraremos técnicas avanzadas para la estilización de listas y tablas utilizando CSS. Aprenderás a mejorar la apariencia de estos elementos básicos para crear interfaces web más atractivas y funcionales.

Estilización de Listas​

Las listas en HTML pueden ser ordenadas (<ol>) o desordenadas (<ul>). Con CSS, podemos cambiar significativamente su apariencia. Personalización de Listas Desordenadas (<ul>)

Remover los Puntos de Lista (Bullets)​

Puedes eliminar los puntos de las listas utilizando la propiedad list-style-type:

CSS
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

Agregar Iconos a los Ítems de Lista​

Puedes usar imágenes o iconos personalizados:

CSS
ul li {
  background: url("icon.png") no-repeat left center;
  padding-left: 20px; /* Ajustar según el tamaño del icono */
}

Estilización de los Ítems de Lista​

Cambiar el color, la tipografía y agregar efectos al pasar el ratón:

CSS
ul li {
  color: #333;
  font-size: 16px;
  font-family: Arial, sans-serif;
  transition: color 0.3s;
}

ul li:hover {
  color: #007bff;
}

Personalización de Listas Ordenadas (<ol>)​

Cambiar el Tipo de Números​

Puedes cambiar los números a romanos, letras, etc.:

CSS
ol {
  list-style-type: upper-roman;
}

Estilizar los Números​

Aplicar estilos específicos a los números:

CSS
ol {
  counter-reset: list;
}

ol li {
  counter-increment: list;
  position: relative;
}

ol li::before {
  content: counter(list) ". ";
  position: absolute;
  left: -2em;
  color: #007bff;
  font-weight: bold;
}

Estilización de Tablas​

Las tablas son elementos HTML utilizados para mostrar datos tabulares. CSS nos permite transformar una tabla básica en algo mucho más atractivo y legible. Estilización Básica de Tablas

Agregar Bordes​

Añadir bordes a la tabla y sus celdas:

CSS
table,
th,
td {
  border: 1px solid #ddd;
  border-collapse: collapse;
}

th,
td {
  padding: 8px;
  text-align: left;
}

Alternar Colores de Filas​

Utiliza nth-child para alternar los colores de las filas:

CSS
tr:nth-child(even) {
  background-color: #f2f2f2;
}

Estilizar Encabezados​

Cambiar el color de fondo y la tipografía de los encabezados:

CSS
th {
  background-color: #007bff;
  color: white;
  font-weight: bold;
}

Estilización Avanzada de Tablas​

Estilizar Bordes Interiores y Exteriores Separadamente​

Aplicar estilos diferentes a los bordes interiores y exteriores:

CSS
table {
  border: 2px solid #007bff;
  border-collapse: separate;
  border-spacing: 0;
}

th,
td {
  border: 1px solid #ddd;
}

Hover Efectos en Filas​

Añadir efectos al pasar el ratón sobre las filas:

CSS
tr:hover {
  background-color: #f5f5f5;
}

Conclusión​

La estilización avanzada de listas y tablas con CSS te permite transformar elementos básicos en componentes visualmente atractivos y funcionales. Con estas técnicas, puedes mejorar significativamente la apariencia y la usabilidad de tus sitios web. ¡Practica y experimenta para descubrir todas las posibilidades que CSS tiene para ofrecer!