Tablas HTML: Crear y Estructurar Datos

Introducción

Las tablas HTML se utilizan para mostrar datos en un formato estructurado y tabular, que consta de filas y columnas. Esto es esencial para presentar información como comparaciones de productos, informes financieros o horarios de una manera clara y organizada.

En este laboratorio, aprenderá los componentes fundamentales de una tabla HTML. Comenzará creando la estructura básica de la tabla y agregará progresivamente filas, encabezados y celdas de datos para construir una tabla completa y funcional.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 99%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Crear la etiqueta table para la estructura de la tabla

En este paso, creará el contenedor principal para su tabla. La etiqueta <table> es el elemento raíz de cualquier tabla HTML y encierra todos los demás elementos relacionados con la tabla.

Primero, configuremos la estructura básica del documento HTML. En el explorador de archivos de la izquierda, busque y abra el archivo index.html ubicado en el directorio ~/project.

Agregue el siguiente código de plantilla a index.html. Este código define un documento HTML5 estándar e incluye un elemento <table> vacío dentro del <body>.

<!DOCTYPE html>
<html>
  <head>
    <title>My First Table</title>
  </head>
  <body>
    <table></table>
  </body>
</html>

Después de agregar el código, puede hacer clic en la pestaña Web 8080 en la parte superior de la interfaz para previsualizar su página. Aún no verá nada, ya que la tabla está vacía, pero esto confirma que el archivo se está sirviendo correctamente.

Agregar etiquetas tr para las filas de la tabla

En este paso, añadirá filas a su tabla. Cada fila horizontal en una tabla se define mediante la etiqueta <tr>, que significa "table row" (fila de tabla). Todo el contenido dentro de una fila, como encabezados o celdas de datos, debe colocarse dentro de un elemento <tr>.

Añadamos dos filas a nuestra tabla. La primera fila contendrá eventualmente los encabezados de las columnas y la segunda contendrá los datos.

Modifique su archivo index.html para incluir dos elementos <tr> dentro de la etiqueta <table>, de la siguiente manera:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Table</title>
  </head>
  <body>
    <table>
      <tr></tr>
      <tr></tr>
    </table>
  </body>
</html>

Guarde el archivo. Si revisa la pestaña Web 8080, todavía no verá ningún cambio visible porque las filas aún no contienen contenido ni bordes.

Insertar etiquetas th para las celdas de encabezado

En este paso, definirá las celdas de encabezado para su tabla. Las celdas de encabezado se crean utilizando la etiqueta <th>, que significa "table header" (encabezado de tabla). Estas etiquetas se colocan dentro de un elemento <tr> y, por lo general, se renderizan como texto en negrita y centrado, distinguiéndolas de las celdas de datos normales.

Añadamos dos encabezados a la primera fila de nuestra tabla: "Name" (Nombre) y "Age" (Edad).

Actualice su archivo index.html añadiendo dos elementos <th> dentro de la primera etiqueta <tr>:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Table</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr></tr>
    </table>
  </body>
</html>

Ahora, si cambia a la pestaña Web 8080, verá los encabezados "Name" y "Age" mostrados.

Usar etiquetas td para las celdas de datos

En este paso, añadirá los datos reales a su tabla. Las celdas de datos estándar se crean con la etiqueta <td>, que significa "table data" (datos de tabla). Estas etiquetas se colocan dentro de un elemento <tr> y contienen la información correspondiente a los encabezados de las columnas.

Añadamos una fila de datos para una persona llamada "Alice" que tiene "30" años. Estos datos irán en la segunda fila de nuestra tabla.

Actualice su archivo index.html añadiendo dos elementos <td> dentro de la segunda etiqueta <tr>:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Table</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Alice</td>
        <td>30</td>
      </tr>
    </table>
  </body>
</html>

Guarde el archivo y revise la pestaña Web 8080. Ahora verá los datos "Alice" y "30" mostrados en la segunda fila, alineados bajo sus respectivos encabezados.

Agregar el atributo border a la tabla para visibilidad

En este paso, hará visible la estructura de la tabla. Por defecto, las tablas HTML se renderizan sin bordes. Para añadir rápidamente un borde para la visualización, puede usar el atributo border en la etiqueta <table>.

Añadamos un borde de 1 píxel a nuestra tabla. Modifique la etiqueta <table> de apertura en index.html para incluir border="1".

<!DOCTYPE html>
<html>
  <head>
    <title>My First Table</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Alice</td>
        <td>30</td>
      </tr>
    </table>
  </body>
</html>

Después de guardar el archivo, actualice la pestaña Web 8080. Ahora verá una tabla completa con bordes visibles alrededor de la tabla y de cada celda, mostrando claramente la estructura de filas y columnas. Aunque el atributo border es simple, el diseño web moderno utiliza CSS para el estilo, lo que ofrece mucho más control y flexibilidad.

Resumen

¡Felicitaciones! Ha creado con éxito una tabla HTML básica.

En este laboratorio, aprendió a:

Usar la etiqueta <table> para crear un contenedor de tabla.
Usar la etiqueta <tr> para definir filas de tabla.
Usar la etiqueta <th> para crear celdas de encabezado para las columnas.
Usar la etiqueta <td> para añadir celdas de datos.
Añadir un atributo border para hacer visible la estructura de la tabla.

Estos son los elementos esenciales para mostrar cualquier tipo de datos tabulares en una página web. Ahora puede basarse en esta base para crear tablas más complejas y con estilo.