Skip to content
Logo de la documentación HoneyCode

6. Tablas en HTML

Las tablas organizan datos en filas y columnas, facilitando la lectura y comparación de información estructurada.

📋 Estructura Básica de una Tabla

Section titled “📋 Estructura Básica de una Tabla”

Las tablas se construyen con elementos específicos que definen su estructura.

Elementos fundamentales

Section titled “Elementos fundamentales”
<table>    <!-- Contenedor de la tabla -->
  <tr>     <!-- Table Row: Fila -->
    <td>   <!-- Table Data: Celda de datos -->
      Contenido
    </td>
  </tr>
</table>

Elementos principales:

ElementoDescripciónUso
<table>Contenedor principalEnvuelve toda la tabla
<tr>Fila (Table Row)Cada fila de la tabla
<td>Celda de datos (Table Data)Celda normal con datos
<th>Celda de encabezado (Table Header)Encabezado de columna/fila

Tabla simple

Section titled “Tabla simple”
<!-- Tabla básica 2x2 -->
<table>
  <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>

Tabla con encabezados

Section titled “Tabla con encabezados”
<!-- Tabla con encabezados -->
<table>
  <tr>
    <th>Nombre</th>
    <th>Edad</th>
    <th>Ciudad</th>
  </tr>
  <tr>
    <td>Juan</td>
    <td>25</td>
    <td>Madrid</td>
  </tr>
  <tr>
    <td>María</td>
    <td>30</td>
    <td>Barcelona</td>
  </tr>
</table>

🗂️ Agrupación de Contenido

Section titled “🗂️ Agrupación de Contenido”

Las tablas se pueden dividir en secciones semánticas para mejor organización.

Estructura semántica

Section titled “Estructura semántica”
<table>
  <thead>  <!-- Encabezado de la tabla -->
    <tr>
      <th>Columna 1</th>
      <th>Columna 2</th>
    </tr>
  </thead>


  <tbody>  <!-- Cuerpo de la tabla (datos) -->
    <tr>
      <td>Dato 1</td>
      <td>Dato 2</td>
    </tr>
  </tbody>


  <tfoot>  <!-- Pie de la tabla (totales, resumen) -->
    <tr>
      <td>Total</td>
      <td>100</td>
    </tr>
  </tfoot>
</table>

Elementos de agrupación:

ElementoDescripciónUso típico
<thead>Encabezado de tablaTítulos de columnas
<tbody>Cuerpo de tablaDatos principales
<tfoot>Pie de tablaTotales, resúmenes

Ventajas de la agrupación

Section titled “Ventajas de la agrupación”
  • ✅ Semántica: Estructura clara y significativa
  • ✅ Accesibilidad: Lectores de pantalla entienden mejor
  • ✅ Estilo: Fácil aplicar CSS a secciones
  • ✅ Impresión: <thead> y <tfoot> se repiten en cada página
  • ✅ JavaScript: Fácil manipular secciones específicas

🔀 Atributos colspan y rowspan

Section titled “🔀 Atributos colspan y rowspan”

Combinar celdas para crear estructuras complejas.

colspan - Combinar columnas

Section titled “colspan - Combinar columnas”

Sintaxis:

<td colspan="número">Contenido</td>

Ejemplos:

<!-- Celda que ocupa 2 columnas -->
<table>
  <tr>
    <td colspan="2">Ocupa 2 columnas</td>
  </tr>
  <tr>
    <td>Columna 1</td>
    <td>Columna 2</td>
  </tr>
</table>


<!-- Encabezado que abarca todas las columnas -->
<table>
  <tr>
    <th colspan="4">Título Principal</th>
  </tr>
  <tr>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
    <th>Col 4</th>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
  </tr>
</table>


<!-- Combinación en el pie -->
<table>
  <tr>
    <td>Producto 1</td>
    <td>$10</td>
    <td>5</td>
    <td>$50</td>
  </tr>
  <tr>
    <td>Producto 2</td>
    <td>$20</td>
    <td>3</td>
    <td>$60</td>
  </tr>
  <tr>
    <td colspan="3">Total</td>
    <td>$110</td>
  </tr>
</table>

Casos de uso:

  • ✅ Títulos que abarcan varias columnas
  • ✅ Totales y subtotales
  • ✅ Agrupación de columnas relacionadas
  • ✅ Celdas de resumen

🎨 Estilos Recomendados para Tablas

Section titled “🎨 Estilos Recomendados para Tablas”

CSS moderno para tablas profesionales y responsive.

CSS fundamental para tablas

Section titled “CSS fundamental para tablas”
/* Tabla básica */
table {
  width: 100%;
  border-collapse: collapse; /* Elimina espacio entre bordes */
  font-family: Arial, sans-serif;
}


/* Celdas */
th, td {
  padding: 12px 15px;
  text-align: left;
  border: 1px solid #ddd;
}


/* Encabezados */
th {
  background-color: #3498db;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
}


/* Filas alternas (zebra striping) */
tbody tr:nth-child(odd) {
  background-color: #f8f9fa;
}


tbody tr:nth-child(even) {
  background-color: white;
}


/* Hover en filas */
tbody tr:hover {
  background-color: #e3f2fd;
  transition: background-color 0.3s;
}

Tabla con bordes redondeados

Section titled “Tabla con bordes redondeados”
table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}


th:first-child {
  border-top-left-radius: 10px;
}


th:last-child {
  border-top-right-radius: 10px;
}

Tabla sin bordes (clean)

Section titled “Tabla sin bordes (clean)”
table {
  border-collapse: collapse;
}


th, td {
  padding: 15px;
  border: none;
  border-bottom: 1px solid #ecf0f1;
}


th {
  background-color: transparent;
  color: #2c3e50;
  border-bottom: 2px solid #3498db;
}


tbody tr:last-child td {
  border-bottom: none;
}

🎓 Resumen

Section titled “🎓 Resumen”

🚀 Próximos pasos

Section titled “🚀 Próximos pasos”

Ahora que dominas las tablas, aprenderás:

  • ✅ Formularios en HTML
  • ✅ Campos de entrada
  • ✅ Validación de formularios
  • ✅ Botones y controles
🐝