EasyCode365EasyCode365

Dar estilo a listas y tablas

Las listas y las tablas ayudan a organizar información.

Las listas son útiles para elementos agrupados, pasos, menús y conjuntos cortos de contenido relacionado. Las tablas son útiles para datos estructurados, como horarios, precios, puntuaciones o comparaciones.

Las listas y tablas en HTML simple funcionan, pero a menudo necesitan CSS para ser más fáciles de leer.

Recordatorio rápido: listas y tablas

HTML tiene dos tipos comunes de listas:

  • <ul> crea una lista desordenada, normalmente con viñetas.
  • <ol> crea una lista ordenada, normalmente con números.

Dentro de ambos tipos de lista, <li> crea cada elemento de la lista.

Solo lectura
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Las tablas usan algunas etiquetas diferentes:

  • <table> crea la tabla.
  • <tr> crea una fila de tabla.
  • <th> crea una celda de encabezado.
  • <td> crea una celda de datos normal.

Usa tablas para datos, no para el diseño de la página.

Dar estilo al espaciado de listas

Los navegadores añaden espaciado por defecto a las listas.

Puedes controlar ese espaciado con margin y padding.

Se puede editar
<ul class="lesson-list">
  <li>Lee la lección</li>
  <li>Prueba el ejemplo</li>
  <li>Practica por tu cuenta</li>
</ul>

<style>
  .lesson-list {
    padding-left: 24px;
    line-height: 1.8;
    background-color: #eff6ff;
    border-radius: 8px;
    font-family: Arial, sans-serif;
  }
</style>

padding-left crea espacio para los marcadores de la lista. line-height añade espacio cómodo entre los elementos.

Posición del marcador de lista

La propiedad list-style-position controla dónde se coloca el marcador.

  • outside: el marcador queda fuera del área del texto. Es el valor por defecto.
  • inside: el marcador pasa a formar parte de la línea de texto.
Se puede editar
<ul class="outside-list">
  <li>
    Un elemento de lista más largo que pasa a una segunda línea para que puedas ver la posición del
    marcador.
  </li>
</ul>

<ul class="inside-list">
  <li>
    Un elemento de lista más largo que pasa a una segunda línea para que puedas ver la posición del
    marcador.
  </li>
</ul>

<style>
  ul {
    width: 260px;
    font-family: Arial, sans-serif;
  }

  .outside-list {
    list-style-position: outside;
  }

  .inside-list {
    list-style-position: inside;
  }
</style>

La mayoría de listas usa outside. Usa inside solo cuando quieras que el marcador permanezca dentro de la caja de contenido.

Cambiar estilos de viñetas y números

La propiedad list-style-type cambia el marcador.

Para listas desordenadas, los valores comunes incluyen:

  • disc
  • circle
  • square

Para listas ordenadas, los valores comunes incluyen:

  • decimal
  • decimal-leading-zero
  • lower-alpha
  • upper-roman
Se puede editar
<h3>Temas</h3>
<ul class="square-list">
  <li>Selectores</li>
  <li>Colores</li>
  <li>Espaciado</li>
</ul>

<h3>Pasos</h3>
<ol class="roman-list">
  <li>Escribir HTML</li>
  <li>Añadir CSS</li>
  <li>Revisar el resultado</li>
</ol>

<style>
  .square-list {
    list-style-type: square;
  }

  .roman-list {
    list-style-type: upper-roman;
  }
</style>

Usa estilos de marcador que coincidan con el significado de la lista. Los números son mejores para pasos. Las viñetas son mejores para grupos simples.

Quitar viñetas por defecto

A veces una lista se usa por estructura, pero no quieres ver viñetas.

Un menú de navegación es un ejemplo común.

Se puede editar
<ul class="nav-list">
  <li>Inicio</li>
  <li>Lecciones</li>
  <li>Contacto</li>
</ul>

<style>
  .nav-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
  }

  .nav-list li {
    padding: 8px 0;
  }
</style>

Cuando quitas las viñetas, revisa también el margin y el padding por defecto. De lo contrario, la lista puede conservar espacio no deseado.

Crear viñetas personalizadas

Puedes crear viñetas personalizadas simples con el pseudo-elemento ::marker.

Esto permite cambiar el contenido y el color del marcador sin añadir HTML extra.

Se puede editar
<ul class="check-list">
  <li>Guarda tu archivo</li>
  <li>Actualiza el navegador</li>
  <li>Revisa el diseño</li>
</ul>

<style>
  .check-list {
    line-height: 1.8;
    font-family: Arial, sans-serif;
  }

  .check-list li::marker {
    content: "✓ ";
    color: #16a34a;
    font-weight: bold;
  }
</style>

Mantén las viñetas personalizadas simples. Un marcador claro es mejor que uno decorativo que distrae del contenido.

Nota: cambiar content dentro de ::marker necesita un navegador moderno. Los navegadores antiguos pueden mostrar la viñeta por defecto.

Dar estilo a bordes de tablas

Las tablas son más fáciles de revisar cuando las filas y celdas están separadas claramente.

Puedes añadir bordes con la propiedad border.

Se puede editar
<table class="basic-table">
  <tr>
    <th>Lenguaje</th>
    <th>Uso</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>Estructura</td>
  </tr>
  <tr>
    <td>CSS</td>
    <td>Estilo</td>
  </tr>
</table>

<style>
  .basic-table,
  .basic-table th,
  .basic-table td {
    border: 1px solid black;
  }
</style>

Esto añade un borde alrededor de la tabla y de cada celda.

Usar border-collapse

Por defecto, los bordes de las celdas de una tabla pueden mostrar pequeños espacios entre celdas.

La propiedad border-collapse corrige esto.

Se puede editar
<table class="clean-table">
  <tr>
    <th>Día</th>
    <th>Tarea</th>
  </tr>
  <tr>
    <td>Lunes</td>
    <td>Practicar CSS</td>
  </tr>
  <tr>
    <td>Martes</td>
    <td>Crear un menú</td>
  </tr>
</table>

<style>
  .clean-table {
    border-collapse: collapse;
    font-family: Arial, sans-serif;
  }

  .clean-table th,
  .clean-table td {
    border: 1px solid #9ca3af;
    padding: 10px;
  }
</style>

Usa border-collapse: collapse; cuando quieras una sola línea limpia entre celdas.

Añadir padding y alineación a tablas

El texto de una tabla no debería tocar los bordes.

Añade padding a las celdas <th> y <td>.

También puedes alinear contenido:

  • text-align controla la alineación horizontal.
  • vertical-align controla la alineación vertical.
Se puede editar
<table class="score-table">
  <tr>
    <th>Estudiante</th>
    <th>Puntuación</th>
  </tr>
  <tr>
    <td>
      Alice<br />
      Práctica extra completada
    </td>
    <td>92</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>85</td>
  </tr>
</table>

<style>
  .score-table {
    border-collapse: collapse;
    font-family: Arial, sans-serif;
  }

  .score-table th,
  .score-table td {
    border: 1px solid #d1d5db;
    padding: 12px;
    vertical-align: middle;
  }

  .score-table th {
    text-align: left;
  }

  .score-table th:last-child,
  .score-table td:last-child {
    text-align: right;
  }
</style>

El texto suele ser más fácil de leer a la izquierda. Los números suelen ser más fáciles de comparar cuando se alinean a la derecha.

Colores alternos en filas

Las tablas largas son más fáciles de leer cuando cada otra fila tiene un color de fondo diferente.

Esto suele llamarse zebra striping.

Usa :nth-child(even) para seleccionar cada fila par.

Se puede editar
<table class="striped-table">
  <thead>
    <tr>
      <th>Curso</th>
      <th>Lecciones</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>12</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>15</td>
    </tr>
    <tr>
      <td>JavaScript</td>
      <td>16</td>
    </tr>
  </tbody>
</table>

<style>
  .striped-table {
    border-collapse: collapse;
    font-family: Arial, sans-serif;
  }

  .striped-table th,
  .striped-table td {
    border: 1px solid #d1d5db;
    padding: 10px;
    text-align: left;
  }

  .striped-table tbody tr:nth-child(even) {
    background-color: #f3f4f6;
  }
</style>

Usar tbody tr:nth-child(even) mantiene el color alterno en las filas de datos, no en la fila de encabezado.

Hacer tablas más legibles

Una tabla legible tiene una estructura clara.

Buenos hábitos para estilizar tablas:

  • Haz que los encabezados destaquen de las celdas normales.
  • Usa suficiente padding dentro de las celdas.
  • Usa bordes o colores de fila para separar datos.
  • Alinea datos similares de la misma forma.
  • Evita usar tablas para el diseño de la página.
Se puede editar
<table class="readable-table">
  <thead>
    <tr>
      <th>Plan</th>
      <th>Precio</th>
      <th>Mejor para</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Básico</td>
      <td>$0</td>
      <td>Probar lecciones</td>
    </tr>
    <tr>
      <td>Plus</td>
      <td>$9</td>
      <td>Práctica diaria</td>
    </tr>
  </tbody>
</table>

<style>
  .readable-table {
    border-collapse: collapse;
    width: 100%;
    font-family: Arial, sans-serif;
  }

  .readable-table th,
  .readable-table td {
    border: 1px solid #d1d5db;
    padding: 12px;
    text-align: left;
  }

  .readable-table th {
    background-color: #1f2937;
    color: white;
  }

  .readable-table tbody tr:nth-child(even) {
    background-color: #f9fafb;
  }
</style>

La fila de encabezado es oscura, las celdas tienen padding y el color alterno de filas ayuda a seguir los datos.

Errores comunes de principiantes

  • Usar tablas para diseño de página: usa tablas para datos, no para encabezados, barras laterales o toda la estructura de una página.
  • Olvidar border-collapse: los bordes de la tabla pueden verse dobles o separados sin esta propiedad.
  • Dejar celdas apretadas: añade padding a <th> y <td> para que el texto tenga espacio.
  • Quitar marcadores pero conservar el espaciado viejo: después de list-style-type: none;, revisa margin y padding.
  • Usar marcadores demasiado decorativos: los marcadores deben ayudar a escanear la lista, no distraer.

Mini tarea de práctica

Mira esta regla CSS:

Solo lectura

¿Qué efecto visual crea en una tabla?

Revisa las respuestas del quiz cuando estés listo.

Quiz corto con respuestas

  1. ¿Qué propiedad CSS elimina el espacio entre los bordes de las celdas de una tabla?
  2. ¿Qué valor de list-style-type elimina las viñetas por completo?
  3. ¿Qué propiedad controla si el contenido de una celda se coloca arriba, en el medio o abajo?

Respuestas:

  1. border-collapse
  2. none
  3. vertical-align

Respuesta de la mini tarea: crea zebra striping al aplicar un fondo gris claro a cada fila par de datos.

Pequeño desafío

Da estilo a la lista y la tabla de abajo.

Tus objetivos:

  • Ocultar las viñetas por defecto.
  • Quitar el espaciado por defecto de la lista.
  • Añadir border-collapse a la tabla.
  • Dar a los encabezados de tabla fondo negro y texto blanco.
  • Colorear las filas pares de la tabla con gris claro.
Se puede editar
<div>
  <ul class="nav-menu">
    <li>Inicio</li>
    <li>Acerca de</li>
    <li>Contacto</li>
  </ul>

  <table class="data-table">
    <thead>
      <tr>
        <th>Nombre</th>
        <th>Edad</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alice</td>
        <td>25</td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>30</td>
      </tr>
      <tr>
        <td>Charlie</td>
        <td>35</td>
      </tr>
    </tbody>
  </table>
</div>

<style>
  .nav-menu {
    /* Oculta las viñetas */

    /* Quita el espaciado por defecto */

    font-family: Arial, sans-serif;
  }

  .data-table {
    /* Colapsa los bordes de la tabla */

    font-family: Arial, sans-serif;
  }

  .data-table th,
  .data-table td {
    border: 1px solid black;
    padding: 8px;
  }

  .data-table th {
    /* Añade fondo negro */

    /* Añade texto blanco */
  }

  .data-table tbody tr:nth-child(even) {
    /* Añade un fondo gris claro */
  }
</style>

Resumen

  • Las listas usan <ul>, <ol> y <li>.
  • Las tablas usan <table>, <tr>, <th> y <td>.
  • Usa list-style-type para cambiar o quitar marcadores de lista.
  • Usa list-style-position para controlar si los marcadores quedan fuera o dentro del área de texto.
  • Usa ::marker para viñetas personalizadas simples.
  • Usa border-collapse: collapse; para bordes de tabla limpios.
  • Usa padding para que las celdas de tabla sean más fáciles de leer.
  • Usa text-align y vertical-align para alinear contenido de tabla.
  • Usa tbody tr:nth-child(even) para crear colores alternos en filas.