4. Listas y tablas

Estilización de listas y tablas

Esta sección cubre todas las propiedades CSS para personalizar listas y crear tablas atractivas y responsive. Desde viñetas personalizadas hasta tablas que se adaptan a cualquier dispositivo.

LISTAS CSS

4.1 list-style-type

La propiedad list-style-type controla el tipo de marcador (viñeta o número) que aparece junto a cada elemento de lista.

Valores para listas no ordenadas (ul):

• disc: círculo relleno (predeterminado para ul)
• circle: círculo vacío
• square: cuadrado relleno
• none: sin marcador

Valores para listas ordenadas (ol):

• decimal: números decimales (1, 2, 3...)
• decimal-leading-zero: números con cero inicial (01, 02, 03...)
• lower-roman: números romanos minúsculas (i, ii, iii...)
• upper-roman: números romanos mayúsculas (I, II, III...)
• lower-alpha/lower-latin: letras minúsculas (a, b, c...)
• upper-alpha/upper-latin: letras mayúsculas (A, B, C...)

Ejemplo interactivo — experimenta con diferentes marcadores:

HTML:

<ul class="lista-demo">
  <li>Primer elemento</li>
  <li>Segundo elemento</li>
  <li>Tercer elemento</li>
</ul>

CSS:

.lista-demo {
  list-style-type: square; /* Prueba: disc, circle, none, decimal, upper-roman */
  background: #f8f9fa;
  padding: 20px;
  border-left: 4px solid #007bff;
}

4.2 list-style-position

La propiedad list-style-position controla la posición del marcador respecto al contenido del elemento de lista.

Valores de list-style-position:

• outside: marcador fuera del área de contenido (predeterminado)
• inside: marcador dentro del área de contenido

Ejemplo interactivo — compara las posiciones:

HTML:

<ul class="posicion-demo">
  <li>Este es un texto largo que se extiende por varias líneas para mostrar la diferencia entre inside y outside</li>
  <li>Otro elemento de lista largo</li>
</ul>

CSS:

.posicion-demo {
  list-style-position: inside; /* Prueba: outside, inside */
  background: #e8f5e8;
  padding: 15px;
  border: 2px solid #28a745;
  width: 300px;
}

4.3 list-style-image

La propiedad list-style-image permite usar una imagen personalizada como marcador de lista.

Valores de list-style-image:

• none: sin imagen personalizada (predeterminado)
• url("ruta/imagen.png"): imagen personalizada

Nota: Si la imagen no se puede cargar, se usará list-style-type como respaldo.

Ejemplo interactivo — imagen personalizada como viñeta:

HTML:

<ul class="imagen-demo">
  <li>Elemento con imagen personalizada</li>
  <li>Otro elemento de lista</li>
  <li>Tercer elemento</li>
</ul>

CSS:

.imagen-demo {
  list-style-image: url("../../images/bullet.png"); /* Cambia por tu imagen */
  list-style-type: disc; /* Respaldo si no carga la imagen */
  background: #fff3cd;
  padding: 20px;
  border: 2px solid #ffc107;
}

4.4 list-style (atajo)

La propiedad list-style es un atajo que combina type, position e image en una sola declaración.

Sintaxis: list-style: [type] [position] [image];

Ejemplo interactivo — atajo completo:

HTML:

<ol class="atajo-demo">
  <li>Primer paso del proceso</li>
  <li>Segundo paso importante</li>
  <li>Último paso</li>
</ol>

CSS:

.atajo-demo {
  list-style: upper-roman inside; /* Prueba: decimal outside, none */
  background: #f0f8ff;
  padding: 20px;
  border-left: 5px solid #007acc;
  font-weight: 500;
}

TABLAS CSS

4.5 border-collapse

La propiedad border-collapse controla cómo se manejan los bordes entre las celdas de una tabla.

Valores de border-collapse:

• separate: bordes separados (predeterminado) - cada celda tiene su propio borde
• collapse: bordes colapsados - los bordes adyacentes se combinan en uno

Ejemplo interactivo — compara bordes separados vs colapsados:

HTML:

<table class="tabla-bordes">
  <tr>
    <th>Nombre</th>
    <th>Edad</th>
  </tr>
  <tr>
    <td>Ana</td>
    <td>25</td>
  </tr>
</table>

CSS:

.tabla-bordes {
  border-collapse: collapse; /* Prueba: separate, collapse */
  border: 2px solid #333;
  width: 100%;
}

.tabla-bordes th, .tabla-bordes td {
  border: 1px solid #666;
  padding: 10px;
  text-align: left;
}

4.6 border-spacing

La propiedad border-spacing define el espacio entre bordes de celdas cuando border-collapse es separate.

Valores de border-spacing:

• Una longitud: 5px (mismo espaciado horizontal y vertical)
• Dos longitudes: 10px 5px (horizontal vertical)

Ejemplo interactivo — ajusta el espaciado entre celdas:

HTML:

<table class="tabla-espaciado">
  <tr>
    <td>Celda 1</td>
    <td>Celda 2</td>
  </tr>
  <tr>
    <td>Celda 3</td>
    <td>Celda 4</td>
  </tr>
</table>

CSS:

.tabla-espaciado {
  border-collapse: separate;
  border-spacing: 10px 5px; /* Prueba: 0, 15px, 20px 10px */
  background: #f8f9fa;
}

.tabla-espaciado td {
  background: #e9ecef;
  padding: 15px;
  border: 1px solid #dee2e6;
}

4.7 table-layout

La propiedad table-layout controla el algoritmo usado para calcular el ancho de las columnas.

Valores de table-layout:

• auto: ancho basado en el contenido (predeterminado)
• fixed: ancho basado en la primera fila, más predecible y rápido

Ejemplo interactivo — compara algoritmos de layout:

HTML:

<table class="tabla-layout">
  <tr>
    <td style="width: 30%">30% ancho</td>
    <td>Contenido variable que puede ser muy largo</td>
  </tr>
</table>

CSS:

.tabla-layout {
  table-layout: fixed; /* Prueba: auto, fixed */
  width: 100%;
  border-collapse: collapse;
  border: 2px solid #007bff;
}

.tabla-layout td {
  border: 1px solid #6c757d;
  padding: 12px;
  overflow: hidden;
}

4.8 caption-side

La propiedad caption-side especifica la posición del elemento <caption> de una tabla.

Valores de caption-side:

• top: arriba de la tabla (predeterminado)
• bottom: debajo de la tabla

Ejemplo interactivo — posición del título:

HTML:

<table class="tabla-caption">
  <caption>Título de la tabla</caption>
  <tr>
    <th>Columna 1</th>
    <th>Columna 2</th>
  </tr>
  <tr>
    <td>Dato 1</td>
    <td>Dato 2</td>
  </tr>
</table>

CSS:

.tabla-caption {
  caption-side: bottom; /* Prueba: top, bottom */
  border-collapse: collapse;
  width: 100%;
}

.tabla-caption caption {
  font-weight: bold;
  padding: 10px;
  background: #f8f9fa;
}

.tabla-caption th, .tabla-caption td {
  border: 1px solid #dee2e6;
  padding: 10px;
}

4.9 Tablas Responsive

Para hacer tablas responsive, usamos principalmente overflow y técnicas de diseño adaptativo.

Técnicas principales:

• overflow: auto; permite scroll horizontal cuando la tabla es muy ancha
• overflow: hidden; oculta contenido que desborda
• Media queries: cambian el diseño en pantallas pequeñas
• display: block; convierte tabla en elementos de bloque para móviles

Ejemplo interactivo — tabla con scroll horizontal:

HTML:

<div class="tabla-responsive">
  <table class="tabla-ancha">
    <tr>
      <th>Nombre</th>
      <th>Apellido</th>
      <th>Email</th>
      <th>Teléfono</th>
      <th>Ciudad</th>
      <th>País</th>
    </tr>
    <tr>
      <td>Ana</td>
      <td>García</td>
      <td>ana@email.com</td>
      <td>+34 600 123 456</td>
      <td>Madrid</td>
      <td>España</td>
    </tr>
  </table>
</div>

CSS:

.tabla-responsive {
  overflow-x: auto; /* Prueba: hidden, scroll, auto */
  border: 1px solid #dee2e6;
  border-radius: 6px;
}

.tabla-ancha {
  width: 100%;
  min-width: 600px; /* Fuerza scroll en pantallas pequeñas */
  border-collapse: collapse;
}

.tabla-ancha th {
  background: #007bff;
  color: white;
  padding: 12px;
  white-space: nowrap; /* Evita que se rompa el texto */
}

.tabla-ancha td {
  padding: 12px;
  border-bottom: 1px solid #dee2e6;
  white-space: nowrap;
}