Curso HTML 7. Listas y tablas

Listas en HTML

Las listas son elementos fundamentales para estructurar contenido de forma clara y jerárquica. En HTML disponemos de tres tipos principales:

• Listas no ordenadas: <ul>
• Listas ordenadas: <ol>
• Listas de definición: <dl>

1. Listas no ordenadas (<ul>)

Se usan para agrupar elementos sin un orden secuencial. Cada elemento va dentro de <li>. Podemos anidar listas para indicar subniveles.

  
Frutas
    

      
Manzanas
      
Plátanos
      
Fresas
    
  
  
Lácteos
    
    

      
Queso fresco
      
Queso curado
    
  
  
Verduras

2. Listas ordenadas (<ol>)

Se utilizan cuando el orden importa: pasos de un proceso, clasificaciones, etc. HTML5 añade atributos útiles:

• start: punto inicial del contador.
• type: tipo de numeración (a, A, i, I, 1).
• reversed: invierte el orden de numeración.

  
Precalienta el horno a 180°C.
  
Mezcla harina y azúcar.
  
Agrega huevos y mantequilla.




  
Embalaje finalizado
  
Revisión de inventario
  
Solicitud de envío

3. Listas de definición (<dl>)

Ideales para pares término-descripción, como glosarios o FAQ.

  
HTML
  
Lenguaje de marcado para estructurar contenido web.
  
CSS
  
Hojas de estilo para presentación visual.
  
JavaScript
  
Lenguaje de scripting para comportamiento dinámico.

4. Anidación y mezclas

Podemos combinar tipos de listas para estructuras complejas:

  
Proyecto Web
    

      
Planificación
        

          
Objetivo
          
Definir características clave.
          
Alcance
          
Especificar módulos.
        
      
      
Diseño
      
Desarrollo
    
  

Tablas en HTML

Las tablas organizan datos en filas y columnas. Su semántica permite separar contenido de presentación y mejorar la accesibilidad.

1. Estructura básica

Los elementos más comunes son:

• <table>: contenedor general.
• <caption>: título de la tabla.
• <thead>, <tbody>, <tfoot>: secciones de cabecera, cuerpo y pie.
• <tr>: fila.
• <th>: celda de cabecera.
• <td>: celda de datos.

  
Ventas trimestrales
  

    

      
Producto
      
Q1
      
Q2
      
Q3
      
Q4
    
  
  

    

      
Zapatos
      
150
      
200
      
180
      
220
    
    

      
Camisetas
      
300
      
320
      
310
      
330
    
  

2. colspan y rowspan

Permiten fusionar celdas horizontal o verticalmente.

  

    
Nombre
    
Teléfono
  
  

    
Móvil
    
Oficina
  
  

    
Ana
    
+34 600 123 456
    
+34 91 123 456
  
  

    
Carlos
    
+34 600 654 321
    
+34 91 654 321
  

3. Agrupación de columnas y filas

Para aplicar atributos o estilos (en caso de CSS) a conjuntos:

  
    
    
    
  
  

    

      
Ítem
      
Cantidad
      
Precio
      
Total
    
  
  

    

      
Libro
      
2
      
15€
      
30€
    
    

      
Bolígrafo
      
5
      
1€
      
5€
    
  

4. Accesibilidad y asociaciones

• Usar scope='row' o scope='col' en <th> para que lectores de pantalla identifiquen cabeceras.
• Atributo headers en <td> para indicar qué cabeceras describen esa celda en tablas complejas.

  

    

      
Curso
      
Duración
      
Modalidad
    
  
  

    

      
HTML Básico
      
4 semanas
      
Presencial
    
    

      
JavaScript Avanzado
      
6 semanas
      
Online
    
  

Con estos elementos y atributos puedes crear listas y tablas semánticas, accesibles y perfectamente estructuradas, facilitando tanto la lectura humana como el procesamiento por agentes automáticos.