Crea pies de tabla efectivos en HTML

Introducción

En HTML, puedes agrupar el contenido del pie de una tabla utilizando la etiqueta <tfoot>. El pie de la tabla puede incluir información resumida, notas explicativas o comentarios. La etiqueta <tfoot> es uno de los hijos de la etiqueta <table> y se utiliza en conjunto con las etiquetas <thead> y <tbody>. En este laboratorio, aprenderás a crear pies de tabla en HTML utilizando la etiqueta <tfoot>.

Nota: Puedes practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haz clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puedes actualizar la pestaña Web 8080 para previsualizar la página web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/TablesGroup(["Tables"]) html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/TablesGroup -.-> html/tables("Table Structure") html/TablesGroup -.-> html/complex_tbl("Complex Tables") html/TablesGroup -.-> html/tbl_access("Table Accessibility") subgraph Lab Skills html/layout -.-> lab-70862{{"Pie de tabla en HTML"}} html/tables -.-> lab-70862{{"Pie de tabla en HTML"}} html/complex_tbl -.-> lab-70862{{"Pie de tabla en HTML"}} html/tbl_access -.-> lab-70862{{"Pie de tabla en HTML"}} end

Crea una estructura básica de tabla

Comienza creando una estructura básica de tabla que contenga secciones de encabezado de tabla, cuerpo de tabla y pie de tabla.

<!doctype html>
<html>
  <head>
    <title>Table Footer using tfoot Tag</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>35</td>
          <td>Male</td>
        </tr>
        <tr>
          <td>Jane</td>
          <td>28</td>
          <td>Female</td>
        </tr>
        <tr>
          <td>David</td>
          <td>42</td>
          <td>Male</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3">Table Footer</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

En el código anterior, hemos creado una estructura básica de tabla con tres columnas: Nombre, Edad y Género. También hemos agregado tres filas de datos a la tabla. La etiqueta <tfoot> contiene solo una fila con una celda (<td>) que abarca tres columnas (colspan="3").

Agrega contenido al pie de la tabla

Una vez que hayas creado la estructura básica de la tabla, puedes agregar contenido a la etiqueta <tfoot>.

<!doctype html>
<html>
  <head>
    <title>Table Footer using tfoot Tag</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>35</td>
          <td>Male</td>
        </tr>
        <tr>
          <td>Jane</td>
          <td>28</td>
          <td>Female</td>
        </tr>
        <tr>
          <td>David</td>
          <td>42</td>
          <td>Male</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">Average Age:</td>
          <td>35</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

En este ejemplo, hemos agregado una fila a la etiqueta <tfoot> que contiene la edad promedio de las personas en la tabla. La primera celda de la fila abarca dos columnas (colspan="2") y muestra el texto "Average Age:". La segunda celda muestra el valor real de la edad promedio.

Aplica CSS al pie de la tabla

Puedes aplicar estilos CSS a la etiqueta <tfoot> y a sus elementos hijos para ajustar la apariencia del pie de la tabla.

<!doctype html>
<html>
  <head>
    <title>Table Footer using tfoot Tag</title>
    <style>
      tfoot {
        background-color: #ccc;
        font-weight: bold;
        text-align: center;
      }
      tfoot td {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>35</td>
          <td>Male</td>
        </tr>
        <tr>
          <td>Jane</td>
          <td>28</td>
          <td>Female</td>
        </tr>
        <tr>
          <td>David</td>
          <td>42</td>
          <td>Male</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">Average Age:</td>
          <td>35</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

En este ejemplo, hemos aplicado estilos de color de fondo, peso de fuente y alineación de texto a la etiqueta <tfoot> utilizando el selector CSS tfoot. También hemos aplicado relleno a las celdas dentro de la sección del pie de la tabla utilizando el selector tfoot td.

Resumen

La etiqueta <tfoot> se utiliza para agrupar el contenido del pie de una tabla. Funciona en conjunto con las etiquetas <thead> y <tbody> para crear una estructura de tabla completa. Puedes agregar contenido y estilos a la etiqueta <tfoot> y a sus elementos hijos utilizando HTML y CSS.