Curso HTML 7.4 Tablas básicas (table, tr, td, th)

Tablas básicas en HTML (table, tr, td, th)

Las tablas en HTML sirven para representar datos tabulares en filas y columnas. Se construyen mediante el elemento table como contenedor principal, dentro del cual vamos anidando filas (tr) y celdas (td o th).

1. Elemento <table>

• Es el contenedor principal de la tabla.
• Acepta atributos globales (id, class, style, title) y específicos como border, cellpadding y cellspacing (aunque estos últimos están obsoletos en HTML5 y se recomienda usar CSS).
• Puede incluir otros elementos de agrupación (caption, colgroup, thead, tbody, tfoot).

2. Filas con <tr>

• Cada fila de la tabla se define con una etiqueta <tr>.
• Dentro de una fila podemos tener celdas de encabezado (<th>) o celdas de datos (<td>).

3. Celdas de encabezado: <th>

• Se usan para indicar títulos de columna o de fila.
• Por defecto, el texto se muestra en negrita y centrado (user agent style).
• Atributo scope para mejorar la accesibilidad:
  • scope='col' indica cabecera de columna.
  • scope='row' indica cabecera de fila.

4. Celdas de datos: <td>

• Contienen el contenido propiamente dicho de cada intersección fila-columna.
• Aceptan atributos colspan y rowspan para fusionar celdas horizontal o verticalmente.

5. Atributos de fusión de celdas

• colspan='n': la celda ocupa n columnas.
• rowspan='m': la celda ocupa m filas.

6. Ejemplo básico de tabla

  

    
Nombre
   
    
Edad
    
Ciudad
  
  

    
María
 
    
28
    
Barcelona
  
  

    
Juan
    
35
    
Sevilla
  

  

7. Ejemplo con colspan y rowspan

  

    
Producto
    
Inventario
 
  
  

    
Lapicero
  
    
En stock
    
120 unidades
  
  

    
Reservado
    
30 unidades
  

  

  
Horario de Clases
  
     
       
  
  

    
Día
    
Hora inicio
    
Hora fin
  
  

    
Lunes
    
09:00
    
11:00
  
  

    
Miércoles
    
14:00
    
16:00