Aprende Creación y Estructuración de Tablas en HTML

Desliza para mostrar el menú

Las tablas ayudan a presentar datos estructurados como horarios, calendarios, registros financieros, menús y listas de precios. HTML proporciona varios elementos para construir tablas.

Elementos principales de una tabla:

<table>: el contenedor de la tabla;
<tr>: una fila;
<th>: una celda de encabezado (en negrita, centrada);
<td>: una celda de datos regular.

A continuación, se construirá paso a paso una tabla de menú sencilla.

Paso 1: Configurar la estructura HTML

Comienza creando la estructura básica de HTML para tu página:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- The link to the styles -->
  </head>
  <body>
    <!-- Table code will go here -->
  </body>
</html>

Paso 2: Definir la tabla

Dentro del elemento <body>, agrega la etiqueta <table> para definir la tabla:

<table>
  <!-- Table content will go here -->
</table>

Paso 3: Añadir un título a la tabla (opcional)

Si deseas proporcionar un título para la tabla, puedes usar la etiqueta <caption>:

<table>
  <caption>New menu</caption>
  <!-- Table content will go here -->
</table>

Paso 4: Crear encabezados de tabla

A continuación, agrega los encabezados de la tabla dentro del elemento <thead>. Cada encabezado se define utilizando la etiqueta <th>:

<table>
  <caption>New menu</caption>
  <thead>
    <tr>
      <th>Category</th>
      <th>Meal</th>
      <th>Price</th>
    </tr>
  </thead>
  <!-- Table content will go here -->
</table>

Paso 5: Rellenar la tabla con datos

Utiliza el elemento <tbody> para encerrar las filas de la tabla y las etiquetas <td> para definir las celdas que contienen los datos:

<table>
  <caption>New menu</caption>
  <thead>
    <tr>
      <th>Category</th>
      <th>Meal</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Appetizer</td>
      <td>Garlic Shrimps</td>
      <td>8$</td>
    </tr>
    <tr>
      <td>Pasta</td>
      <td>Lobster Linguine Noodles</td>
      <td>16$</td>
    </tr>
    <tr>
      <td>Sandwich</td>
      <td>Lobster Tail Sandwich</td>
      <td>11$</td>
    </tr>
  </tbody>
</table>

Código completo

Dedica un momento para examinar todos los elementos detenidamente y asegurarte de que su relación sea evidente.

index.html

index.css

Nota

Por defecto, las tablas HTML no tienen un estilo visual específico. Para personalizar la apariencia de la tabla, agrega estilos CSS en un archivo CSS separado o dentro de una etiqueta <style> en la sección <head> del archivo HTML.

Sin embargo, no es necesario profundizar en CSS en esta etapa, ya que el enfoque actual es solo en HTML. Si deseas ver cómo se ve la tabla sin ningún estilo CSS, puedes eliminar la línea 4: <link rel="stylesheet" href="index.css" />, que importa los estilos CSS.