1
00:00:00,279 --> 00:00:02,635
He hecho esta página web sobre mis mascotas,

2
00:00:02,635 --> 00:00:04,365
con una lista de sus nombres.

3
00:00:04,365 --> 00:00:06,787
Cuando miras la lista, ¿qué piensas?

4
00:00:06,787 --> 00:00:10,978
Que he tenido mascotas llamadas "Black & White", "Daemon" y "Angel".

5
00:00:10,999 --> 00:00:12,991
Pero, ¿qué clase de mascotas?

6
00:00:12,994 --> 00:00:14,475
¿Cuál era su color?

7
00:00:14,475 --> 00:00:16,134
¿Qué edad tienen?

8
00:00:16,134 --> 00:00:18,316
Y podría darte más información

9
00:00:18,316 --> 00:00:21,027
sobre las mascotas de esta lista para responder tus preguntas.

10
00:00:21,035 --> 00:00:23,457
Podría hacerlo mediante una lista anidada,

11
00:00:23,457 --> 00:00:27,152
o probablemente poniendo información entre paréntesis.

12
00:00:27,166 --> 00:00:32,002
"Black & white" era un conejo,
"Daemon" un gato,

13
00:00:32,002 --> 00:00:34,415
"Angel" también es un gato.

14
00:00:34,415 --> 00:00:37,605
Pero esto no me gusta, porque no se ve bien organizado,

15
00:00:37,605 --> 00:00:40,906
y no se puede mirar fácilmente hacia abajo y ver todas las especies

16
00:00:40,906 --> 00:00:43,136
en una lista muy bien alineada.

17
00:00:43,136 --> 00:00:47,466
De hecho, ésta es la oportunidad perfecta para usar una tabla.

18
00:00:47,466 --> 00:00:49,130
Una tabla con una fila para cada mascota,

19
00:00:49,130 --> 00:00:51,858
y columnas para cada atributo de esa mascota,

20
00:00:51,858 --> 00:00:54,084
que quiero compartir con ustedes.

21
00:00:54,084 --> 00:00:58,388
Para hacer tablas en HTML, necesitamos muchas etiquetas.

22
00:00:58,388 --> 00:00:59,996
Así que prepárate.

23
00:00:59,996 --> 00:01:02,551
Y no te preocupes por memorizar todas las etiquetas.

24
00:01:02,551 --> 00:01:04,377
Puedes buscarlas después.

25
00:01:04,377 --> 00:01:07,192
A mí me tomó 10 años memorizar todas las etiquetas para las tablas,

26
00:01:07,192 --> 00:01:08,295
y soy profesional.

27
00:01:08,295 --> 00:01:10,486
Muy bien. ¡Prepárate!

28
00:01:10,486 --> 00:01:14,874
La primera etiqueta es "", un nombre muy acertado.

29
00:01:14,874 --> 00:01:20,037
Después, necesitamos un área de encabezado en la tabla, que contenga los nombres de cada columna.

30
00:01:20,037 --> 00:01:23,273
Así que escribimos "".

31
00:01:23,273 --> 00:01:27,974
Dentro de esta etiqueta, generalmente sólo queremos una fila para los encabezados de las celdas.

32
00:01:27,988 --> 00:01:32,709
Cada vez que escribimos una fila en la tabla usamos la etiqueta "".

33
00:01:32,709 --> 00:01:35,576
Dentro de la fila, queremos encabezados de las celdas.

34
00:01:35,576 --> 00:01:42,657
Para cada encabezado de celda, escribimos "".

35
00:01:42,657 --> 00:01:45,099
¿Cuál debería ser el encabezado de la primera columna?

36
00:01:45,099 --> 00:01:49,252
Debería ser "Pet names" ("Nombres de mascotas"), porque es lo más importante de la fila,

37
00:01:49,252 --> 00:01:51,096
y es el identificador.

38
00:01:51,292 --> 00:01:54,551
Ahora vamos a añadir otra columna para "Species" ("Especies").

39
00:01:55,269 --> 00:01:59,052
Y finalmente, vamos a añadir una columna para el color.

40
00:01:59,052 --> 00:02:01,532
Creo que son suficientes columnas por el momento,

41
00:02:01,532 --> 00:02:03,525
y vamos a incluir algunos datos.

42
00:02:03,903 --> 00:02:05,951
Empezamos con los renglones de datos

43
00:02:05,951 --> 00:02:09,473
con la etiqueta "" debajo de "",

44
00:02:09,473 --> 00:02:11,847
y una vez más, queremos una fila,

45
00:02:11,847 --> 00:02:14,002
así que vamos a usar la etiqueta "".

46
00:02:14,341 --> 00:02:16,717
Pero dentro de ésta, en lugar de usar "",

47
00:02:16,717 --> 00:02:20,075
vamos a usar "", porque estamos en el "cuerpo" de la tabla.

48
00:02:20,075 --> 00:02:23,136
Escribimos "", que significa datos de la tabla,

49
00:02:23,136 --> 00:02:26,471
y ¿cuál es el valor que debemos poner en la primera celda

50
00:02:26,471 --> 00:02:27,937
del primer renglón de datos?

51
00:02:28,266 --> 00:02:30,261
Sólo voy a buscar mi lista,

52
00:02:30,261 --> 00:02:33,801
y veo que la primera cosa que tengo en mi lista es "Black & white",

53
00:02:33,801 --> 00:02:36,019
y ese es el nombre de mi mascota,

54
00:02:36,019 --> 00:02:39,318
así que escribo: "Black & white".

55
00:02:40,425 --> 00:02:42,724
Ahora la segunda "".

56
00:02:42,724 --> 00:02:46,726
Buscamos y vemos que la segunda "" es "Species",

57
00:02:46,726 --> 00:02:49,940
y "Black & white" era un conejo,

58
00:02:49,940 --> 00:02:52,111
así que escribimos "rabbit" ("conejo").

59
00:02:52,697 --> 00:02:55,334
Finalmente, la tercera "".

60
00:02:55,334 --> 00:02:58,127
Buscamos y vemos que la tercera "" es color.

61
00:02:58,229 --> 00:03:00,177
Así que la "" correspondiente...

62
00:03:00,177 --> 00:03:04,430
bueno, no era una niña muy creativa cuando le puse nombre a este conejo,

63
00:03:04,430 --> 00:03:08,505
así que probablemente puedas adivinar el color.

64
00:03:08,505 --> 00:03:10,937
Ok, vamos a hacer otra fila.

65
00:03:10,937 --> 00:03:13,107
Y les voy a enseñar un pequeño truco.

66
00:03:13,107 --> 00:03:15,514
Una vez que hice la primera fila, en realidad quisiera,

67
00:03:15,514 --> 00:03:17,126
seleccionar esta primera fila,

68
00:03:17,126 --> 00:03:19,394
y copiarla, usando un atajo del teclado,

69
00:03:19,394 --> 00:03:22,588
que generalmente es control-C o comando-C,

70
00:03:22,588 --> 00:03:24,438
dependiendo del sistema operativo que usen.

71
00:03:24,626 --> 00:03:28,637
Y luego, la pego, usando otro atajo del teclado,

72
00:03:28,637 --> 00:03:31,082
generalmente control-V o comando-V,

73
00:03:31,082 --> 00:03:33,041
dependiendo de su sistema operativo.

74
00:03:33,185 --> 00:03:36,976
Y después de pegarlo, cambio los valores.

75
00:03:37,040 --> 00:03:41,779
Así que éste debe ser "Daemon", "cat" ("gato") y "black" ("negro").

76
00:03:41,779 --> 00:03:44,397
Y luego haremos esto una vez más,

77
00:03:44,397 --> 00:03:52,985
y éste debe ser "Angel", "cat" ("gato") y "orange" ("naranja").

78
00:03:52,985 --> 00:03:55,607
Ok, esto se pone muy aburrido

79
00:03:55,607 --> 00:03:59,068
cuando tenemos que escribir ""s y ""s una y otra vez,

80
00:03:59,068 --> 00:04:03,532
así que el truco de copiar y pegar hará que esto no sea tan aburrido.

81
00:04:03,532 --> 00:04:05,953
Y aquí la tenemos: una tabla.

82
00:04:05,953 --> 00:04:08,041
Puedo añadir columnas fácilmente,

83
00:04:08,041 --> 00:04:10,548
sólo con escribir otra "" en el encabezado,

84
00:04:10,548 --> 00:04:12,827
y luego "" en cada una de las filas,

85
00:04:12,827 --> 00:04:15,962
si quiero compartir más detalles de mis mascotas.

86
00:04:16,240 --> 00:04:19,661
Tal vez te preguntes ¿cómo puedes cambiar la forma en la que se ve esta tabla?

87
00:04:19,661 --> 00:04:22,189
Cómo cambiar los bordes, o los colores o los espacios.

88
00:04:22,358 --> 00:04:24,673
Puedes hacer todo eso con propiedades de CSS,

89
00:04:24,673 --> 00:04:27,913
que tal vez ya hayas aprendido, o que vas a aprender muy pronto.

90
00:04:27,918 --> 00:04:31,522
Ahora, trata de rehacer esta página web con la lista de tus propias mascotas,

91
00:04:31,522 --> 00:04:33,491
o con las mascotas que te gustaría tener.

92
00:04:33,494 --> 00:04:35,341
¡Tabula esos datos!