Tablas sencillas

Presenta datos en filas y columnas con las etiquetas table, tr, th y td.

6 min · 3 preguntas

Un horario, una lista de precios, una clasificación deportiva: cierta información se lee de forma natural en filas y columnas. Para eso sirven las tablas de HTML. Bastan tres etiquetas para empezar: <table> envuelve toda la tabla, <tr> (table row, fila de tabla) crea una fila, y <td> (table data, dato de tabla) crea una celda dentro de una fila.

<table>
  <tr>
    <td>Apple</td>
    <td>0.50 euros</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>0.30 euros</td>
  </tr>
</table>

Para darle a cada columna un título, reemplaza <td> por <th> (table header, encabezado de tabla) en la primera fila. El navegador muestra estas celdas de encabezado en negrita y centradas, lo que las distingue de los datos.

<table>
  <tr>
    <th>Fruit</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>0.50 euros</td>
  </tr>
</table>

El navegador construye la tabla fila por fila: la primera celda de cada <tr> va a parar a la primera columna, la segunda celda a la segunda columna, y así sucesivamente. De forma predeterminada, una tabla se muestra sin bordes visibles: eso es normal; la apariencia (líneas, colores, espaciado) se gestionará más adelante con CSS.

Prueba de conocimientos

Comprueba que has retenido los puntos clave de esta lección.

1. ¿Qué etiqueta crea una fila de tabla?
   • <td>
   • <tr>
   • <table>
   • <row>
2. ¿Cuál es la diferencia entre <td> y <th>?
   • <th> crea una celda de encabezado, <td> una celda de datos
   • <th> crea una tabla entera, <td> una fila
   • Ninguna, ambas son intercambiables
3. ¿Para qué debe usarse una tabla HTML?
   • Para maquetar todo el sitio
   • Para presentar datos en filas y columnas
   • Para reemplazar las listas con viñetas