Crear tablas HTML con atributos básicos

Introducción

En este laboratorio, los estudiantes aprenderán cómo crear y manipular tablas HTML utilizando las etiquetas y atributos fundamentales de las tablas HTML. El laboratorio se centra en comprender la estructura básica de las tablas HTML, incluyendo etiquetas esenciales como <table>, <tr>, <td> y <th>, que son cruciales para organizar y presentar datos en un formato estructurado similar a una cuadrícula en las páginas web.

Los participantes avanzarán a través de un recorrido de aprendizaje integral que abarca la creación de tablas básicas, la adición de encabezados y secciones de cuerpo, la combinación de celdas utilizando colspan y rowspan, y la aplicación de atributos de estilo básicos. Al final del laboratorio, los estudiantes tendrán habilidades prácticas para construir tablas HTML bien estructuradas, comprendiendo cómo representar datos de manera efectiva utilizando elementos de tabla HTML y sus atributos asociados.

Comprender la estructura y las etiquetas básicas de las tablas HTML

En este paso, aprenderás la estructura fundamental y las etiquetas básicas utilizadas para crear tablas HTML. Las tablas HTML son esenciales para organizar y mostrar datos en un formato estructurado, similar a una cuadrícula, en las páginas web.

Las tablas HTML se crean utilizando varias etiquetas clave:

<table>: El contenedor principal de toda la tabla
<tr>: Define una fila de la tabla
<td>: Define una celda estándar de la tabla (celda de datos)
<th>: Define una celda de encabezado de la tabla

Vamos a crear un ejemplo sencillo para demostrar estas etiquetas básicas de tabla. Abre el WebIDE y crea un nuevo archivo llamado basic_table.html en el directorio ~/project.

touch ~/project/basic_table.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Basic HTML Table</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
      <tr>
        <td>John Doe</td>
        <td>25</td>
        <td>New York</td>
      </tr>
      <tr>
        <td>Jane Smith</td>
        <td>30</td>
        <td>San Francisco</td>
      </tr>
    </table>
  </body>
</html>

Analicemos la estructura de la tabla:

<table border="1"> crea el contenedor de la tabla con un borde visible. El atributo border es opcional.
La primera <tr> contiene celdas de encabezado <th> para los títulos de las columnas.
Los elementos <tr> subsiguientes contienen celdas de datos <td> con el contenido real.

Notas: Aprende más sobre Cómo previsualizar archivos HTML en el WebIDE.

Puntos clave a recordar:

Cada <tr> representa una fila en la tabla.
<th> se utiliza para las celdas de encabezado (por lo general, en negrita y centradas).
<td> se utiliza para las celdas de datos estándar.
El atributo border ayuda a visualizar la estructura de la tabla (aunque se prefiere CSS para el estilo en aplicaciones del mundo real).

Crear una tabla simple con filas y columnas

En este paso, aprenderás cómo crear una tabla más compleja con múltiples filas y columnas. Basándonos en el paso anterior, exploraremos cómo estructurar tablas con diferentes números de filas y columnas para mostrar información de manera efectiva.

Abre el WebIDE y crea un nuevo archivo llamado product_table.html en el directorio ~/project. Crearemos una tabla de inventario de productos para demostrar la creación de una tabla con múltiples filas y columnas.

touch ~/project/product_table.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Product Inventory Table</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <td>Product ID</td>
        <td>Product Name</td>
        <td>Price</td>
        <td>Quantity</td>
      </tr>
      <tr>
        <td>001</td>
        <td>Laptop</td>
        <td>$999.99</td>
        <td>50</td>
      </tr>
      <tr>
        <td>002</td>
        <td>Smartphone</td>
        <td>$599.99</td>
        <td>75</td>
      </tr>
      <tr>
        <td>003</td>
        <td>Tablet</td>
        <td>$299.99</td>
        <td>100</td>
      </tr>
    </table>
  </body>
</html>

Puntos clave sobre la creación de tablas con múltiples filas y columnas:

Cada <tr> (fila de tabla) representa una fila horizontal en la tabla.
Dentro de cada <tr>, múltiples elementos <td> (datos de tabla) crean columnas.
El número de elementos <td> en cada <tr> determina el número de columnas.
Todas las filas deben tener el mismo número de columnas para un diseño consistente.
El atributo border ayuda a visualizar la estructura de la tabla.

Observa cómo hemos creado una tabla de 4 columnas con:

La primera fila como encabezados de columna.
Tres filas adicionales con información de productos.
Cada fila contiene cuatro celdas correspondientes a las columnas.

La salida de ejemplo en un navegador web mostraría una cuadrícula de 4x4 que muestra los detalles del inventario de productos.

Ejemplo de tabla de inventario de productos

Agregar encabezados y secciones de cuerpo a la tabla

En este paso, aprenderás cómo mejorar la estructura de la tabla utilizando las etiquetas HTML semánticas <thead>, <tbody> y <tfoot> para organizar el contenido de la tabla de manera más efectiva. Estas etiquetas ayudan a mejorar la legibilidad y accesibilidad de tus tablas HTML.

Abre el WebIDE y crea un nuevo archivo llamado student_grades.html en el directorio ~/project. Crearemos una tabla de calificaciones de estudiantes que demuestre el uso de las etiquetas de secciones de tabla.

touch ~/project/student_grades.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Student Grades Table</title>
  </head>
  <body>
    <table border="1">
      <thead>
        <tr>
          <th>Student ID</th>
          <th>Name</th>
          <th>Math</th>
          <th>Science</th>
          <th>Total</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>001</td>
          <td>Alice Johnson</td>
          <td>85</td>
          <td>90</td>
          <td>175</td>
        </tr>
        <tr>
          <td>002</td>
          <td>Bob Smith</td>
          <td>78</td>
          <td>82</td>
          <td>160</td>
        </tr>
        <tr>
          <td>003</td>
          <td>Charlie Brown</td>
          <td>92</td>
          <td>88</td>
          <td>180</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">Class Average</td>
          <td>85</td>
          <td>86.67</td>
          <td>171.67</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

Puntos clave sobre las secciones de la tabla:

<thead>: Contiene las filas de encabezado con los títulos de las columnas.
<tbody>: Contiene las filas de datos principales.
<tfoot>: Contiene las filas de resumen o pie de página.
Utiliza <th> para las celdas de encabezado en lugar de <td>.
Estas etiquetas semánticas ayudan a mejorar la estructura y accesibilidad de la tabla.

El ejemplo demuestra:

Una fila de encabezado con títulos de columnas utilizando <th>.
Múltiples filas de datos en el <tbody>.
Una fila de pie de página con los promedios de clase en <tfoot>.

La salida de ejemplo en un navegador web mostraría una tabla estructurada con secciones claras para el encabezado, el cuerpo y el pie de página.

Ejemplo de tabla de calificaciones de estudiantes

Combinar celdas de tabla utilizando colspan y rowspan

En este paso, aprenderás cómo combinar celdas de tabla horizontal y verticalmente utilizando los atributos colspan y rowspan. Estos atributos te permiten crear diseños de tabla más complejos y flexibles al combinar múltiples celdas.

Abre el WebIDE y crea un nuevo archivo llamado event_schedule.html en el directorio ~/project. Crearemos una tabla de horario de eventos que demuestre la combinación de celdas.

touch ~/project/event_schedule.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Conference Event Schedule</title>
  </head>
  <body>
    <table border="1">
      <thead>
        <tr>
          <th>Time</th>
          <th>Room A</th>
          <th>Room B</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>9:00 AM</td>
          <td rowspan="2">Keynote Speech</td>
          <td>Workshop 1</td>
        </tr>
        <tr>
          <td>10:00 AM</td>
          <td>Workshop 2</td>
        </tr>
        <tr>
          <td>11:00 AM</td>
          <td colspan="2">Lunch Break</td>
        </tr>
        <tr>
          <td>12:00 PM</td>
          <td>Panel Discussion</td>
          <td>Networking Session</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Puntos clave sobre colspan y rowspan:

colspan: Combina celdas horizontalmente a través de columnas.
- Ejemplo: <td colspan="2"> extiende la celda a través de 2 columnas.
rowspan: Combina celdas verticalmente a través de filas.
- Ejemplo: <td rowspan="2"> extiende la celda a través de 2 filas.
Cuando se utilizan estos atributos, elimina las celdas correspondientes en otras filas.

En este ejemplo:

El "Keynote Speech" se extiende a 2 filas en la Sala A.
El "Lunch Break" se extiende a 2 columnas en ambas salas.
Otras celdas mantienen su diseño estándar de una sola celda.

La salida de ejemplo en un navegador web mostraría una tabla con celdas combinadas que crea un horario más compacto y organizado.

Ejemplo de tabla HTML con celdas combinadas

Dar estilo y personalizar atributos de la tabla

En este paso, aprenderás cómo dar estilo y personalizar tablas HTML utilizando CSS en línea y atributos HTML. Un estilo adecuado puede mejorar la legibilidad y el atractivo visual de tus tablas.

Abre el WebIDE y crea un nuevo archivo llamado styled_table.html en el directorio ~/project. Crearemos una tabla con diversas técnicas de estilo.

touch ~/project/styled_table.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Styled Product Catalog</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
        font-family: Arial, sans-serif;
      }
      th {
        background-color: #4caf50;
        color: white;
        padding: 10px;
        text-align: left;
      }
      tr:nth-child(even) {
        background-color: #f2f2f2;
      }
      td {
        border: 1px solid #ddd;
        padding: 8px;
      }
      tr:hover {
        background-color: #ddd;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Product ID</th>
          <th>Product Name</th>
          <th>Price</th>
          <th>Stock</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>001</td>
          <td>Wireless Headphones</td>
          <td>$99.99</td>
          <td>50</td>
        </tr>
        <tr>
          <td>002</td>
          <td>Smart Watch</td>
          <td>$199.99</td>
          <td>30</td>
        </tr>
        <tr>
          <td>003</td>
          <td>Bluetooth Speaker</td>
          <td>$79.99</td>
          <td>75</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Técnicas de estilo principales demostradas:

border-collapse: Elimina el espacio entre las celdas de la tabla.
Fuente y tipografía personalizadas.
Fila de encabezado de color.
Colores alternados de filas utilizando :nth-child(even).
Efecto de resaltado al pasar el cursor sobre las filas de la tabla.
Estilo de relleno y borde para las celdas.

Opciones de estilo incluyen:

CSS en línea en la etiqueta <style>.
Archivo CSS separado (recomendado para proyectos más grandes).
Estilos en línea utilizando el atributo style.
Propiedades CSS para el diseño, los colores y la interactividad.

La salida de ejemplo en un navegador web mostraría una tabla con un estilo profesional y fácil de leer, con efectos de resaltado y color.

Resumen

En este laboratorio, los participantes aprendieron los fundamentos de la creación de tablas HTML utilizando etiquetas HTML esenciales como <table>, <tr>, <td> y <th>. El laboratorio guió a los aprendices a través de la comprensión de la estructura de la tabla, la creación de tablas básicas con filas y columnas, y la exploración de técnicas para agregar encabezados, combinar celdas y personalizar atributos de la tabla.

Los ejercicios prácticos demostraron cómo construir presentaciones de datos estructuradas en forma de cuadrícula en páginas web, cubriendo conceptos clave como la definición de filas de tabla, la creación de celdas de encabezado y de datos, y el uso de atributos como border para mejorar la visualización de la tabla. Los participantes adquirieron experiencia práctica en la construcción de tablas HTML semánticas y bien organizadas que pueden mostrar información de manera efectiva en diversos escenarios de diseño web.