Dominando el Cuerpo de la Tabla HTML

Introducción

En HTML, la etiqueta <tbody> se utiliza para indicar el cuerpo de una tabla HTML, que consta de un conjunto de filas dentro de la tabla. Esta práctica te guiará a través de los pasos para crear una tabla HTML simple con la etiqueta <tbody>.

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/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/TablesGroup(["Tables"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/TablesGroup -.-> html/tables("Table Structure") html/TablesGroup -.-> html/complex_tbl("Complex Tables") html/TablesGroup -.-> html/tbl_access("Table Accessibility") subgraph Lab Skills html/basic_elems -.-> lab-70854{{"Cuerpo de la Tabla HTML"}} html/layout -.-> lab-70854{{"Cuerpo de la Tabla HTML"}} html/doc_flow -.-> lab-70854{{"Cuerpo de la Tabla HTML"}} html/tables -.-> lab-70854{{"Cuerpo de la Tabla HTML"}} html/complex_tbl -.-> lab-70854{{"Cuerpo de la Tabla HTML"}} html/tbl_access -.-> lab-70854{{"Cuerpo de la Tabla HTML"}} end

Crear una etiqueta de tabla

Crea un archivo HTML vacío llamado index.html en tu editor de código preferido.

Crea una etiqueta <table> en la sección <body> del archivo HTML.

<body>
  <table></table>
</body>

Agregar la etiqueta `<thead>` de encabezado de tabla

Dentro de la etiqueta <table>, crea una etiqueta <thead> y agrega una fila de encabezado con las etiquetas <th> dentro.

<table>
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Apellido</th>
    </tr>
  </thead>
</table>

Agregar la etiqueta `<tbody>` del cuerpo de la tabla

Dentro de la etiqueta <table>, crea una etiqueta <tbody> y agrega filas con las etiquetas <td> dentro.

<table>
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Apellido</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Smith</td>
    </tr>
  </tbody>
</table>

Agregar la etiqueta `<tfoot>` del pie de la tabla (opcional)

Dentro de la etiqueta <table>, crea una etiqueta <tfoot> y agrega una fila de pie de tabla con las etiquetas <td> dentro.

<table>
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Apellido</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Smith</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="2">Total: 2 Personas</td>
    </tr>
  </tfoot>
</table>

Dar estilo a la tabla

Utiliza CSS para dar estilo a la tabla, incluyendo <thead>, <tbody> y <tfoot> si es aplicable.

<style>
  table {
    border-collapse: collapse;
    width: 50%;
  }

  th,
  td {
    text-align: left;
    padding: 8px;
    border-bottom: 1px solid #ddd;
  }

  th {
    background-color: #f2f2f2;
    color: #444;
  }

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

  tfoot td {
    text-align: right;
    font-weight: bold;
  }
</style>

Resumen

En este laboratorio, aprendimos cómo usar la etiqueta <tbody> para crear una tabla HTML con filas y columnas. Siguiendo los pasos, creamos una tabla simple con secciones de encabezado, cuerpo y pie de página, y le dimos estilo a la tabla con CSS para que se vea más profesional. La etiqueta <tbody> es una herramienta útil para construir tablas complejas en HTML y a menudo se utiliza en combinación con otros elementos de tabla para crear visualizaciones de datos dinámicas e interactivas.

Cuerpo de la Tabla HTML