08. Tablas en HTML

Curso HTML5 desde cero — Freimel Jerez

Las tablas permiten organizar la información de manera estructurada en filas y columnas. Son ideales para mostrar datos tabulados, como hojas de cálculo o listas detalladas.

📌 Sintaxis básica

<table>
  <tr>
    <th>Encabezado 1</th>
    <th>Encabezado 2</th>
  </tr>
  <tr>
    <td>Fila 1, Columna 1</td>
    <td>Fila 1, Columna 2</td>
  </tr>
  <tr>
    <td>Fila 2, Columna 1</td>
    <td>Fila 2, Columna 2</td>
  </tr>
</table>

• <table>: Define la tabla.
• <tr>: Define una fila de la tabla.
• <th>: Define un encabezado de columna (texto en negrita y centrado).
• <td>: Define una celda de la tabla.

📏 Atributos comunes de tablas

• border: Añadir borde a la tabla (aunque es más recomendable usar CSS).
• colspan: Especifica cuántas columnas debe ocupar una celda.
• rowspan: Especifica cuántas filas debe ocupar una celda.

🎨 Mejorando el estilo de las tablas con CSS

Es recomendable no usar los atributos de estilo de la tabla en HTML, sino usar CSS para mejorar su presentación.

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

th, td {
  padding: 10px;
  border: 1px solid #ccc;
}

th {
  background-color: #f2f2f2;
}

📄 Ejemplo práctico

🎥 Video de la lección

Debes ver el video completo para desbloquear la siguiente lección.

✅ Resumen

• Las tablas se definen con <table> y se organizan con <tr>, <th> y <td>.
• Usa CSS para mejorar el estilo de las tablas.
• Evita usar tablas para diseño, solo para datos.