-
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!