Leyenda de la tabla HTML: Guía paso a paso

Introducción

En HTML, la etiqueta <caption> se utiliza para agregar una leyenda o título a una tabla. Esta práctica paso a paso te guiará a través del proceso de creación de una tabla en HTML y agregado de una leyenda a la misma.

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/TablesGroup(["Tables"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/MultimediaandGraphicsGroup -.-> html/fig_cap("Figure and Caption Association") html/TablesGroup -.-> html/tables("Table Structure") html/TablesGroup -.-> html/tbl_access("Table Accessibility") subgraph Lab Skills html/basic_elems -.-> lab-70721{{"Leyenda de la tabla HTML"}} html/fig_cap -.-> lab-70721{{"Leyenda de la tabla HTML"}} html/tables -.-> lab-70721{{"Leyenda de la tabla HTML"}} html/tbl_access -.-> lab-70721{{"Leyenda de la tabla HTML"}} end

Crea una tabla básica

En el primer paso, crea una tabla básica con algunos datos utilizando la etiqueta table. Aquí hay un ejemplo:

<table>
  <tr>
    <th>Nombre</th>
    <th>Edad</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>25</td>
  </tr>
</table>

Agrega una leyenda a la tabla

Para agregar una leyenda a la tabla, simplemente inserta la etiqueta <caption> después de la etiqueta de apertura <table> y antes de las filas de la tabla. Aquí hay un ejemplo:

<table>
  <caption>
    Información de empleados
  </caption>
  <tr>
    <th>Nombre</th>
    <th>Edad</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>25</td>
  </tr>
</table>

Estiliza la leyenda

Para estilizar la leyenda, utiliza el atributo style dentro de la etiqueta <caption>. Aquí hay un ejemplo:

<table>
  <caption style="color: blue; font-size: 20px;">
    Información de empleados
  </caption>
  <tr>
    <th>Nombre</th>
    <th>Edad</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>25</td>
  </tr>
</table>

Resumen

En HTML, la etiqueta <caption> se utiliza para agregar una leyenda o título a una tabla. La etiqueta <caption> se utiliza dentro de la etiqueta <table>, justo después de la etiqueta de apertura <table>. Una leyenda es una descripción breve que proporciona una explicación general sobre la tabla. Ayuda a comprender su propósito. Para agregar una leyenda a la tabla, simplemente inserta la etiqueta <caption> después de la etiqueta de apertura <table> y antes de las filas de la tabla. Utilizando el atributo style dentro de la etiqueta <caption>, podemos dar estilo a la leyenda.