0:00:00.279,0:00:02.635
He hecho esta página web sobre mis mascotas,

0:00:02.635,0:00:04.365
con una lista de sus nombres.

0:00:04.365,0:00:06.787
Cuando miras la lista, ¿qué piensas?

0:00:06.787,0:00:10.978
Que he tenido mascotas llamadas "Black & White", "Daemon" y "Angel".

0:00:10.999,0:00:12.991
Pero, ¿qué clase de mascotas?

0:00:12.994,0:00:14.475
¿Cuál era su color?

0:00:14.475,0:00:16.134
¿Qué edad tienen?

0:00:16.134,0:00:18.316
Y podría darte más información

0:00:18.316,0:00:21.027
sobre las mascotas de esta lista para responder tus preguntas.

0:00:21.035,0:00:23.457
Podría hacerlo mediante una lista anidada,

0:00:23.457,0:00:27.152
o probablemente poniendo información entre paréntesis.

0:00:27.166,0:00:32.002
"Black & white" era un conejo,[br]"Daemon" un gato,

0:00:32.002,0:00:34.415
"Angel" también es un gato.

0:00:34.415,0:00:37.605
Pero esto no me gusta, porque no se ve bien organizado,

0:00:37.605,0:00:40.906
y no se puede mirar fácilmente hacia abajo y ver todas las especies

0:00:40.906,0:00:43.136
en una lista muy bien alineada.

0:00:43.136,0:00:47.466
De hecho, ésta es la oportunidad perfecta para usar una tabla.

0:00:47.466,0:00:49.130
Una tabla con una fila para cada mascota,

0:00:49.130,0:00:51.858
y columnas para cada atributo de esa mascota,

0:00:51.858,0:00:54.084
que quiero compartir con ustedes.

0:00:54.084,0:00:58.388
Para hacer tablas en HTML, necesitamos muchas etiquetas.

0:00:58.388,0:00:59.996
Así que prepárate.

0:00:59.996,0:01:02.551
Y no te preocupes por memorizar todas las etiquetas.

0:01:02.551,0:01:04.377
Puedes buscarlas después.

0:01:04.377,0:01:07.192
A mí me tomó 10 años memorizar todas las etiquetas para las tablas,

0:01:07.192,0:01:08.295
y soy profesional.

0:01:08.295,0:01:10.486
Muy bien. ¡Prepárate!

0:01:10.486,0:01:14.874
La primera etiqueta es "", un nombre muy acertado.

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

0:01:20.037,0:01:23.273
Así que escribimos "".

0:01:23.273,0:01:27.974
Dentro de esta etiqueta, generalmente sólo queremos una fila para los encabezados de las celdas.

0:01:27.988,0:01:32.709
Cada vez que escribimos una fila en la tabla usamos la etiqueta "".

0:01:32.709,0:01:35.576
Dentro de la fila, queremos encabezados de las celdas.

0:01:35.576,0:01:42.657
Para cada encabezado de celda, escribimos "".

0:01:42.657,0:01:45.099
¿Cuál debería ser el encabezado de la primera columna?

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

0:01:49.252,0:01:51.096
y es el identificador.

0:01:51.292,0:01:54.551
Ahora vamos a añadir otra columna para "Species" ("Especies").

0:01:55.269,0:01:59.052
Y finalmente, vamos a añadir una columna para el color.

0:01:59.052,0:02:01.532
Creo que son suficientes columnas por el momento,

0:02:01.532,0:02:03.525
y vamos a incluir algunos datos.

0:02:03.903,0:02:05.951
Empezamos con los renglones de datos

0:02:05.951,0:02:09.473
con la etiqueta "" debajo de "",

0:02:09.473,0:02:11.847
y una vez más, queremos una fila,

0:02:11.847,0:02:14.002
así que vamos a usar la etiqueta "".

0:02:14.341,0:02:16.717
Pero dentro de ésta, en lugar de usar "",

0:02:16.717,0:02:20.075
vamos a usar "", porque estamos en el "cuerpo" de la tabla.

0:02:20.075,0:02:23.136
Escribimos "", que significa datos de la tabla,

0:02:23.136,0:02:26.471
y ¿cuál es el valor que debemos poner en la primera celda

0:02:26.471,0:02:27.937
del primer renglón de datos?

0:02:28.266,0:02:30.261
Sólo voy a buscar mi lista,

0:02:30.261,0:02:33.801
y veo que la primera cosa que tengo en mi lista es "Black & white",

0:02:33.801,0:02:36.019
y ese es el nombre de mi mascota,

0:02:36.019,0:02:39.318
así que escribo: "Black & white".

0:02:40.425,0:02:42.724
Ahora la segunda "".

0:02:42.724,0:02:46.726
Buscamos y vemos que la segunda "" es "Species",

0:02:46.726,0:02:49.940
y "Black & white" era un conejo,

0:02:49.940,0:02:52.111
así que escribimos "rabbit" ("conejo").

0:02:52.697,0:02:55.334
Finalmente, la tercera "".

0:02:55.334,0:02:58.127
Buscamos y vemos que la tercera "" es color.

0:02:58.229,0:03:00.177
Así que la "" correspondiente...

0:03:00.177,0:03:04.430
bueno, no era una niña muy creativa cuando le puse nombre a este conejo,

0:03:04.430,0:03:08.505
así que probablemente puedas adivinar el color.

0:03:08.505,0:03:10.937
Ok, vamos a hacer otra fila.

0:03:10.937,0:03:13.107
Y les voy a enseñar un pequeño truco.

0:03:13.107,0:03:15.514
Una vez que hice la primera fila, en realidad quisiera,

0:03:15.514,0:03:17.126
seleccionar esta primera fila,

0:03:17.126,0:03:19.394
y copiarla, usando un atajo del teclado,

0:03:19.394,0:03:22.588
que generalmente es control-C o comando-C,

0:03:22.588,0:03:24.438
dependiendo del sistema operativo que usen.

0:03:24.626,0:03:28.637
Y luego, la pego, usando otro atajo del teclado,

0:03:28.637,0:03:31.082
generalmente control-V o comando-V,

0:03:31.082,0:03:33.041
dependiendo de su sistema operativo.

0:03:33.185,0:03:36.976
Y después de pegarlo, cambio los valores.

0:03:37.040,0:03:41.779
Así que éste debe ser "Daemon", "cat" ("gato") y "black" ("negro").

0:03:41.779,0:03:44.397
Y luego haremos esto una vez más,

0:03:44.397,0:03:52.985
y éste debe ser "Angel", "cat" ("gato") y "orange" ("naranja").

0:03:52.985,0:03:55.607
Ok, esto se pone muy aburrido

0:03:55.607,0:03:59.068
cuando tenemos que escribir ""s y ""s una y otra vez,

0:03:59.068,0:04:03.532
así que el truco de copiar y pegar hará que esto no sea tan aburrido.

0:04:03.532,0:04:05.953
Y aquí la tenemos: una tabla.

0:04:05.953,0:04:08.041
Puedo añadir columnas fácilmente,

0:04:08.041,0:04:10.548
sólo con escribir otra "" en el encabezado,

0:04:10.548,0:04:12.827
y luego "" en cada una de las filas,

0:04:12.827,0:04:15.962
si quiero compartir más detalles de mis mascotas.

0:04:16.240,0:04:19.661
Tal vez te preguntes ¿cómo puedes cambiar la forma en la que se ve esta tabla?

0:04:19.661,0:04:22.189
Cómo cambiar los bordes, o los colores o los espacios.

0:04:22.358,0:04:24.673
Puedes hacer todo eso con propiedades de CSS,

0:04:24.673,0:04:27.913
que tal vez ya hayas aprendido, o que vas a aprender muy pronto.

0:04:27.918,0:04:31.522
Ahora, trata de rehacer esta página web con la lista de tus propias mascotas,

0:04:31.522,0:04:33.491
o con las mascotas que te gustaría tener.

0:04:33.494,0:04:35.341
¡Tabula esos datos!