Aprendizaje activo: Crea tu primera tabla

Ya hemos hablado bastante sobre la teoría de las tablas, así que veamos un ejemplo práctico y construyamos una tabla simple.

1. En primer lugar, haz una copia local de blank-template.html y minimal-table.css en un directorio nuevo de tu ordenador.

2. El contenido de cada tabla está delimitado entre estas dos etiquetas: <table></table>. Añádelas al cuerpo de tu código HTML.

3. El contenedor más pequeño dentro de una tabla es una celda, que se crea con un elemento <td> ('td' significa 'table data', datos de tabla). Añade lo siguiente dentro de tus etiquetas de tabla:

4. HTML

5. Copy to Clipboard

<td>Hola, soy tu primera celda.</td>

6. 
   

7. Si quieres una fila de cuatro celdas, tienes que copiar estas etiquetas tres veces. Actualiza el contenido de la tabla para que se vea así:

8. HTML

9. Copy to Clipboard

<td>Hola, soy tu primera celda.</td>

<td>Soy tu segunda celda.</td>

<td>Soy tu tercera celda.</td>

<td>Soy tu cuarta celda.</td>

Como verás, las celdas no se colocan una debajo de la otra, sino que se alinean automáticamente entre sí en la misma fila. Cada elemento <td> crea una sola celda, y juntas forman la primera fila. Cada celda que agregamos hace crecer la fila.

Para detener el crecimiento de esta fila y comenzar a colocar las celdas posteriores en una segunda fila, necesitamos usar el elemento <tr> ('tr' significa 'table raw', fila de tabla). Vamos a verlo en detalle.

1. Coloca las cuatro celdas que has creado dentro de las etiquetas <tr>, de esta forma:

2. HTML

3. Copy to Clipboard

<tr>

  <td>Hola, soy tu primera celda.</td>

  <td>Soy tu segunda celda.</td>

  <td>Soy tu tercera celda.</td>

  <td>Soy tu cuarta celda.</td>

</tr>

4. 
   

5. Ahora que has hecho una fila, intenta hacer una o dos más: cada fila debe estar delimitada por un elemento <tr> adicional, con cada celda contenida en un <td>.

Esto debería dar como resultado una tabla similar a la siguiente: