Tutorial: tu primera tabla HTML para mostrar datos

Hace años la gente usaba tablas para maquetar páginas enteras. No hagas eso. Las tablas son para una cosa: mostrar datos tabulares (precios, horarios, calificaciones). Vamos a hacerlo bien.

Paso 1: la estructura básica

<table>
  <thead>
    <tr>
      <th>Lenguaje</th>
      <th>Para qué sirve</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>Estructura</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>Estilo</td>
    </tr>
    <tr>
      <td>JavaScript</td>
      <td>Interacción</td>
    </tr>
  </tbody>
</table>

<thead> es el encabezado, <tbody> el cuerpo, <tr> cada fila, <th> una celda de encabezado y <td> una celda normal. Sí, son muchas siglas, no, no hace falta memorizarlas todas hoy.

Paso 2: dale estilo con CSS

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #333;
  padding: 0.5rem 1rem;
  text-align: left;
}

th {
  background-color: #101e27;
  color: #00e5bf;
}

border-collapse: collapse evita que cada celda tenga su propio borde duplicado. Sin esto tu tabla se ve como una cuadrícula de Windows 95.

Paso 3: agrega una fila con datos calculados (opcional)

<tfoot>
  <tr>
    <td>Total</td>
    <td>3 lenguajes</td>
  </tr>
</tfoot>

<tfoot> es útil para totales o resúmenes al final de la tabla.

¿Qué acabas de aprender?

• La anatomía de una tabla: table, thead, tbody, tfoot, tr, th, td.
• Cómo darle estilo sin que se vea de los noventa.
• Que las tablas son para datos, no para maquetar páginas (eso es trabajo de CSS).