Definición y creación de tablas HTML

Introducción

Las tablas HTML se utilizan comúnmente para mostrar datos tabulares en las páginas web. En este laboratorio, aprenderás a crear tablas HTML básicas utilizando las etiquetas <table>, <tr>, <td> y <th>.

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.

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 85%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Creando la tabla

Comencemos creando un nuevo archivo HTML llamado index.html y configurando la estructura básica. Dentro de las etiquetas <body>, cree un elemento <table>. Este elemento contendrá todas las filas y columnas de su tabla.

<!doctype html>
<html>
  <head>
    <title>Tutorial de tablas HTML</title>
  </head>
  <body>
    <table></table>
  </body>
</html>

Definiendo filas

A continuación, defina las filas de su tabla utilizando la etiqueta <tr>. Cada fila contendrá una o más celdas. Para crear una sola celda, use la etiqueta <td>.

<!doctype html>
<html>
  <head>
    <title>Tutorial de tablas HTML</title>
  </head>
  <body>
    <table>
      <tr>
        <td>Fil 1, Celda 1</td>
        <td>Fil 1, Celda 2</td>
      </tr>
      <tr>
        <td>Fil 2, Celda 1</td>
        <td>Fil 2, Celda 2</td>
      </tr>
    </table>
  </body>
</html>

Agregando un encabezado de tabla

En algunos casos, es posible que desee agregar una fila de encabezado a su tabla. Para hacer esto, utilice la etiqueta <th> en lugar de la etiqueta <td>.

<!doctype html>
<html>
  <head>
    <title>Tutorial de tablas HTML</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Encabezado 1</th>
        <th>Encabezado 2</th>
      </tr>
      <tr>
        <td>Fil 1, Celda 1</td>
        <td>Fil 1, Celda 2</td>
      </tr>
      <tr>
        <td>Fil 2, Celda 1</td>
        <td>Fil 2, Celda 2</td>
      </tr>
    </table>
  </body>
</html>

Agregando bordes y estilos

Por defecto, las tablas HTML tienen un estilo mínimo y no tienen bordes. Para agregar un borde a su tabla, use la propiedad CSS border.

<!doctype html>
<html>
  <head>
    <title>Tutorial de tablas HTML</title>
    <style>
      table,
      th,
      td {
        border: 1px sólido negro;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>Encabezado 1</th>
        <th>Encabezado 2</th>
      </tr>
      <tr>
        <td>Fil 1, Celda 1</td>
        <td>Fil 1, Celda 2</td>
      </tr>
      <tr>
        <td>Fil 2, Celda 1</td>
        <td>Fil 2, Celda 2</td>
      </tr>
    </table>
  </body>
</html>

Resumen

Siguiendo este tutorial, has aprendido cómo crear una tabla HTML básica y darle estilo con CSS. Las tablas se pueden personalizar aún más agregando atributos como colspan y rowspan a las celdas, y utilizando etiquetas adicionales como <caption> y <thead>. Con estas herramientas, puedes crear tablas complejas e informativas para mostrar datos en tus páginas web.

Definición de tablas HTML