0Pricing
HTML for Kids · Lección

Tablas: organización de datos

Aprenda a crear tablas para mostrar información

Tablas: organización de datos es una lección gratuita de HTML for Kids en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML for Kids, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML for Kids incluye 4 lecciones en total.

Tablas: organizar datos

¡Bienvenido a la siguiente lección! Hoy aprenderá a crear tablas en HTML. Las tablas son excelentes para organizar información en filas y columnas.

Tablas: organización de datos — ilustración 1

¿Qué son las tablas?

Las tablas son una forma de mostrar información en un formato estructurado. Cada tabla consta de filas y columnas.

Este es el aspecto de una tabla:

Name      Age      City

Alice     12       New York

Bob       15       London

¡Vamos a crear esta tabla usando HTML!

Crear una tabla sencilla

Las tablas en HTML se crean mediante la etiqueta <table>. Las filas se crean mediante la etiqueta <tr> y las celdas, mediante la etiqueta <td>.

Ejemplo:

<table>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

Agregar un encabezado a la tabla

Puede agregar encabezados a su tabla mediante la etiqueta <th>. Los encabezados hacen que la tabla sea más fácil de comprender.

Ejemplo:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

Agregar un borde a la tabla

De forma predeterminada, las tablas no tienen bordes. Puede agregar un borde mediante el atributo border o con CSS.

Ejemplo:

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

Combinar columnas y filas

A veces, es posible que necesite que una celda abarque varias columnas o filas. Use el atributo colspan o rowspan para lograrlo.

Ejemplo:

<table border="1">
  <tr>
    <th>Name</th>
    <th colspan="2">Details</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

Aplicar estilos a la tabla

Puede mejorar el aspecto de su tabla mediante CSS. Por ejemplo, puede cambiar los colores, agregar espacio interno o alinear el texto.

Ejemplo:

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }
  th {
    background-color: lightgray;
  }
</style>

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

Pruébelo usted mismo

Vamos a crear una tabla que enumere sus películas favoritas. Este es un ejemplo:

<!DOCTYPE html>
<html>
  <head>
    <title>My Favorite Movies</title>
  </head>
  <body>
    <h1>My Favorite Movies</h1>
    <table border="1">
      <tr>
        <th>Movie</th>
        <th>Year</th>
        <th>Genre</th>
      </tr>
      <tr>
        <td>Inception</td>
        <td>2010</td>
        <td>Science Fiction</td>
      </tr>
      <tr>
        <td>The Lion King</td>
        <td>1994</td>
        <td>Animation</td>
      </tr>
    </table>
  </body>
</html>

¡Excelente trabajo!

¡Felicidades! Ha aprendido a crear tablas, agregar encabezados e incluso aplicarles estilos. Las tablas son una forma excelente de organizar y mostrar datos. En la próxima lección, aprenderá sobre los formularios para recopilar datos de los usuarios. ¡Prepárese para hacer que sus páginas sean interactivas!

Tablas: organización de datos — ilustración 10

Preguntas frecuentes

¿La lección «Tablas: organización de datos» es gratis?

Sí — el texto completo de «Tablas: organización de datos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML for Kids, actualiza a CoddyKit PRO. El curso de HTML for Kids incluye 4 lecciones en total.

¿Qué aprenderé en «Tablas: organización de datos»?

Aprenda a crear tablas para mostrar información Practicas HTML for Kids con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar HTML for Kids?

No se requiere experiencia previa. HTML for Kids en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Tablas: organización de datos»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de HTML for Kids?

Sí. Cada lección de HTML for Kids incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Tablas: organización de datos
  2. Formularios: recopilación de datos del usuario
  3. Atributos de HTML
  4. Multimedia: añada vídeos y audio
← Volver a HTML for Kids