Tablas en HTML

html tablas

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