Tablas HTML

He hecho esta página web sobre mis mascotas,

con una lista de sus nombres.

Cuando miras la lista, ¿qué piensas?

Que he tenido mascotas llamadas "Black & White", "Daemon" y "Angel".

Pero, ¿qué clase de mascotas?

¿Cuál era su color?

¿Qué edad tienen?

Y podría darte más información

sobre las mascotas de esta lista para responder tus preguntas.

Podría hacerlo mediante una lista anidada,

o probablemente poniendo información entre paréntesis.

"Black & white" era un conejo,
"Daemon" un gato,

"Angel" también es un gato.

Pero esto no me gusta, porque no se ve bien organizado,

y no se puede mirar fácilmente hacia abajo y ver todas las especies

en una lista muy bien alineada.

De hecho, ésta es la oportunidad perfecta para usar una tabla.

Una tabla con una fila para cada mascota,

y columnas para cada atributo de esa mascota,

que quiero compartir con ustedes.

Para hacer tablas en HTML, necesitamos muchas etiquetas.

Así que prepárate.

Y no te preocupes por memorizar todas las etiquetas.

Puedes buscarlas después.

A mí me tomó 10 años memorizar todas las etiquetas para las tablas,

y soy profesional.

Muy bien. ¡Prepárate!

La primera etiqueta es "", un nombre muy acertado.

Después, necesitamos un área de encabezado en la tabla, que contenga los nombres de cada columna.

Así que escribimos "".

Dentro de esta etiqueta, generalmente sólo queremos una fila para los encabezados de las celdas.

Cada vez que escribimos una fila en la tabla usamos la etiqueta "".

Dentro de la fila, queremos encabezados de las celdas.

Para cada encabezado de celda, escribimos "".

¿Cuál debería ser el encabezado de la primera columna?

Debería ser "Pet names" ("Nombres de mascotas"), porque es lo más importante de la fila,

y es el identificador.

Ahora vamos a añadir otra columna para "Species" ("Especies").

Y finalmente, vamos a añadir una columna para el color.

Creo que son suficientes columnas por el momento,

y vamos a incluir algunos datos.

Empezamos con los renglones de datos

con la etiqueta "" debajo de "",

y una vez más, queremos una fila,

así que vamos a usar la etiqueta "".

Pero dentro de ésta, en lugar de usar "",

vamos a usar "", porque estamos en el "cuerpo" de la tabla.

Escribimos "", que significa datos de la tabla,

y ¿cuál es el valor que debemos poner en la primera celda

del primer renglón de datos?

Sólo voy a buscar mi lista,

y veo que la primera cosa que tengo en mi lista es "Black & white",

y ese es el nombre de mi mascota,

así que escribo: "Black & white".

Ahora la segunda "".

Buscamos y vemos que la segunda "" es "Species",

y "Black & white" era un conejo,

así que escribimos "rabbit" ("conejo").

Finalmente, la tercera "".

Buscamos y vemos que la tercera "" es color.

Así que la "" correspondiente...

bueno, no era una niña muy creativa cuando le puse nombre a este conejo,

así que probablemente puedas adivinar el color.

Ok, vamos a hacer otra fila.

Y les voy a enseñar un pequeño truco.

Una vez que hice la primera fila, en realidad quisiera,

seleccionar esta primera fila,

y copiarla, usando un atajo del teclado,

que generalmente es control-C o comando-C,

dependiendo del sistema operativo que usen.

Y luego, la pego, usando otro atajo del teclado,

generalmente control-V o comando-V,

dependiendo de su sistema operativo.

Y después de pegarlo, cambio los valores.

Así que éste debe ser "Daemon", "cat" ("gato") y "black" ("negro").

Y luego haremos esto una vez más,

y éste debe ser "Angel", "cat" ("gato") y "orange" ("naranja").

Ok, esto se pone muy aburrido

cuando tenemos que escribir ""s y ""s una y otra vez,

así que el truco de copiar y pegar hará que esto no sea tan aburrido.

Y aquí la tenemos: una tabla.

Puedo añadir columnas fácilmente,

sólo con escribir otra "" en el encabezado,

y luego "" en cada una de las filas,

si quiero compartir más detalles de mis mascotas.

Tal vez te preguntes ¿cómo puedes cambiar la forma en la que se ve esta tabla?

Cómo cambiar los bordes, o los colores o los espacios.

Puedes hacer todo eso con propiedades de CSS,

que tal vez ya hayas aprendido, o que vas a aprender muy pronto.

Ahora, trata de rehacer esta página web con la lista de tus propias mascotas,

o con las mascotas que te gustaría tener.

¡Tabula esos datos!