Tablas en HTML

Generated avatar
html tablas

Tabla de contenido

Existen algunas etiquetas básicas que podemos usar para crear tablas.

<table>: Table o tabla. <tr>: Table Row o fila de tabla <td>: Table Data o dato de tabla

Estructura básica de una tabla

Utilizamos <table> para definir la existencia de una tabla, <tr> para crear filas dentro de ella, y <td> para segmentar dichas filas.

<table>
  <tr>
    <td>Celda (1,1)</td>
    <td>Celda (1,2)</td>
    <td>Celda (1,3)</td>
  </tr>
  <tr>
    <td>Celda (2,1)</td>
    <td>Celda (2,2)</td>
    <td>Celda (2,3)</td>
  </tr>
  <tr>
    <td>Celda (3,1)</td>
    <td>Celda (3,2)</td>
    <td>Celda (3,3)</td>
  </tr>
</table>
Visualización

Agregando encabezados

Si queremos agregar títulos a las columnas podemos crear una fila inicial y segmentarla con etiquetas <th> en lugar de etiquetas <td>.

<table>
  <tr>
    <th>Encabezado 1</th>
    <th>Encabezado 2</th>
    <th>Encabezado 3</th>
  </tr>
  <!-- Datos de la tabla -->
</table>
Visualización

Dándole un título

Si queremos agregar un texto para titular nuestra tabla, podemos usar la etiqueta <caption>.

<table>
  <caption>
    Título
  </caption>
  <!-- Encabezado de la tabla -->
  <!-- Datos de la tabla -->
</table>
Visualización

Agregando el pie de tabla

Habrá algunas ocasiones donde tengamos que crear una última fila para crear un resumen o un total del contenido de la tabla. Lo podemos hacer con <tfoot>.

<table>
  <!-- Resto de la tabla -->
  <tfoot>
    <tr>
      <td>Sección de pie 1</td>
      <td>Sección de pie 2</td>
      <td>Sección de pie 3</td>
    </tr>
  </tfoot>
</table>
Visualización

Sobre HTML semántico

Para mejorar la accesibilidad y legibilidad de la tabla, podemos utilizar adicionalmente las etiquetas <thead> y <tbody>.

Colocaremos la fila de encabezados dentro de <thead> y el contenido de la tabla dentro de etiquetas <tbody> (puede haber más de una sección), por último debe estar <tfoot>.

Así tendremos una estructura similar a esta:

<table>
  <caption>
    <!-- Título -->
  </caption>
  <thead>
    <!-- Fila de encabezados -->
  </thead>
  <tbody>
    <!-- Filas de contenido -->
  </tbody>
  <tbody>
    <!-- Filas de contenido -->
  </tbody>
  <tfoot>
    <!-- Fila de pie -->
  </tfoot>
</table>

Usemos todo al mismo tiempo

Un ejemplo real podría verse de la siguiente manera:

<table>
  <caption>
    Reporte de Ventas
  </caption>
  <thead>
    <tr>
      <th>Producto</th>
      <th>Cantidad</th>
      <th>Costo</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Producto A</td>
      <td>40</td>
      <td>$400</td>
    </tr>
    <tr>
      <td>Producto B</td>
      <td>30</td>
      <td>$300</td>
    </tr>
    <tr>
      <td>Producto C</td>
      <td>10</td>
      <td>$500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>80</td>
      <td>$1200</td>
    </tr>
  </tfoot>
</table>
Visualización

Y para mejorar su visualización podríamos agregar un par de estilos

table {
  border-collapse: collapse;
}
caption {
  margin: 8px 0;
}
td,
th {
  border: 1px solid black;
  text-align: center;
  padding: 2px 4px;
}
Visualización

Comentarios

Compartir

Esta artículo aparece en estas rutas de aprendizaje

Aprendamos HTML

Aprenderemos desde los conceptos básicos de HTML hasta los conceptos más avanzados

Generated avatar
DEV

Web Dev (Frontend)

Aprendamos HTML, CSS y JS para navegador

Generated avatar
En construcción
100%

Image