Celda de datos de tabla HTML: Dominando la etiqueta TD

Introducción

En este laboratorio, aprenderás sobre la etiqueta HTML <td> que se utiliza para definir datos de tabla en una tabla HTML. También aprenderás sobre los diversos atributos que se pueden utilizar con esta etiqueta.

Nota: Puedes practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede 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/LayoutandSectioningGroup(["Layout and Sectioning"]) html/BasicStructureGroup -.-> html/basic_elems("Basic 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-70856{{"Celda de datos de tabla HTML"}} html/doc_flow -.-> lab-70856{{"Celda de datos de tabla HTML"}} html/tables -.-> lab-70856{{"Celda de datos de tabla HTML"}} html/complex_tbl -.-> lab-70856{{"Celda de datos de tabla HTML"}} html/tbl_access -.-> lab-70856{{"Celda de datos de tabla HTML"}} end

Creando una tabla HTML

El primer paso es crear una tabla HTML con algunos datos. Abra el archivo index.html y agregue el siguiente código:

<!doctype html>
<html>
  <head>
    <title>HTML TD Tag Lab</title>
  </head>
  <body>
    <table>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>22</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>Smith</td>
        <td>25</td>
      </tr>
    </table>
  </body>
</html>

Aquí, hemos creado una tabla HTML con dos filas y tres columnas. La etiqueta <td> se utiliza para definir el contenido de cada celda de la tabla.

Usando el atributo colspan

El atributo colspan se utiliza para especificar cuántas columnas debe abarcar una celda. Para usar el atributo colspan, agregue el siguiente código:

<!doctype html>
<html>
  <head>
    <title>HTML TD Tag Lab</title>
  </head>
  <body>
    <table>
      <tr>
        <td colspan="2">John Doe</td>
        <td>22</td>
      </tr>
      <tr>
        <td colspan="2">Jane Smith</td>
        <td>25</td>
      </tr>
    </table>
  </body>
</html>

Aquí, hemos utilizado el atributo colspan para abarcar las dos primeras columnas y mostrar el nombre de la persona en una sola celda.

Usando el atributo rowspan

El atributo rowspan se utiliza para especificar cuántas filas debe abarcar una celda. Para usar el atributo rowspan, agregue el siguiente código:

<!doctype html>
<html>
  <head>
    <title>HTML TD Tag Lab</title>
  </head>
  <body>
    <table>
      <tr>
        <td rowspan="2">John</td>
        <td>Doe</td>
        <td>22</td>
      </tr>
      <tr>
        <td colspan="2">Male</td>
      </tr>
      <tr>
        <td rowspan="2">Jane</td>
        <td>Smith</td>
        <td>25</td>
      </tr>
      <tr>
        <td colspan="2">Female</td>
      </tr>
    </table>
  </body>
</html>

Aquí, hemos utilizado el atributo rowspan para abarcar la columna del nombre para mostrar el nombre de la persona en una sola celda durante dos filas.

El atributo header se utiliza para especificar que una celda está relacionada con una o más celdas de encabezado. Para usar el atributo header, agregue el siguiente código:

<!doctype html>
<html>
  <head>
    <title>HTML TD Tag Lab</title>
  </head>
  <body>
    <table>
      <tr>
        <th id="name-header">Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td headers="name-header">John Doe</td>
        <td>22</td>
      </tr>
      <tr>
        <td headers="name-header">Jane Smith</td>
        <td>25</td>
      </tr>
    </table>
  </body>
</html>

Aquí, hemos utilizado el atributo header para especificar que la primera columna está relacionada con la celda de encabezado con el ID name-header.

Resumen

¡Felicidades! Has aprendido cómo usar la etiqueta HTML <td> para definir datos de tabla en una tabla HTML. También has aprendido sobre los diversos atributos como colspan, rowspan y header que se pueden usar con esta etiqueta para crear tablas más complejas.

Celda de datos de tabla HTML