WEBVTT 00:00:00.279 --> 00:00:02.635 He hecho esta página web sobre mis mascotas, 00:00:02.635 --> 00:00:04.365 con una lista de sus nombres. 00:00:04.365 --> 00:00:06.787 Cuando miras la lista, ¿qué piensas? 00:00:06.787 --> 00:00:10.978 Que he tenido mascotas llamadas "Black & White", "Daemon" y "Angel". 00:00:10.999 --> 00:00:12.991 Pero, ¿qué clase de mascotas? 00:00:12.994 --> 00:00:14.475 ¿Cuál era su color? 00:00:14.475 --> 00:00:16.134 ¿Qué edad tienen? 00:00:16.134 --> 00:00:18.316 Y podría darte más información 00:00:18.316 --> 00:00:21.027 sobre las mascotas de esta lista para responder tus preguntas. 00:00:21.035 --> 00:00:23.457 Podría hacerlo mediante una lista anidada, 00:00:23.457 --> 00:00:27.152 o probablemente poniendo información entre paréntesis. 00:00:27.166 --> 00:00:32.002 "Black & white" era un conejo, "Daemon" un gato, 00:00:32.002 --> 00:00:34.415 "Angel" también es un gato. 00:00:34.415 --> 00:00:37.605 Pero esto no me gusta, porque no se ve bien organizado, 00:00:37.605 --> 00:00:40.906 y no se puede mirar fácilmente hacia abajo y ver todas las especies 00:00:40.906 --> 00:00:43.136 en una lista muy bien alineada. 00:00:43.136 --> 00:00:47.466 De hecho, ésta es la oportunidad perfecta para usar una tabla. 00:00:47.466 --> 00:00:49.130 Una tabla con una fila para cada mascota, 00:00:49.130 --> 00:00:51.858 y columnas para cada atributo de esa mascota, 00:00:51.858 --> 00:00:54.084 que quiero compartir con ustedes. 00:00:54.084 --> 00:00:58.388 Para hacer tablas en HTML, necesitamos muchas etiquetas. 00:00:58.388 --> 00:00:59.996 Así que prepárate. 00:00:59.996 --> 00:01:02.551 Y no te preocupes por memorizar todas las etiquetas. 00:01:02.551 --> 00:01:04.377 Puedes buscarlas después. 00:01:04.377 --> 00:01:07.192 A mí me tomó 10 años memorizar todas las etiquetas para las tablas, 00:01:07.192 --> 00:01:08.295 y soy profesional. 00:01:08.295 --> 00:01:10.486 Muy bien. ¡Prepárate! 00:01:10.486 --> 00:01:14.874 La primera etiqueta es "", un nombre muy acertado. 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. 00:01:20.037 --> 00:01:23.273 Así que escribimos "". 00:01:23.273 --> 00:01:27.974 Dentro de esta etiqueta, generalmente sólo queremos una fila para los encabezados de las celdas. 00:01:27.988 --> 00:01:32.709 Cada vez que escribimos una fila en la tabla usamos la etiqueta "". 00:01:32.709 --> 00:01:35.576 Dentro de la fila, queremos encabezados de las celdas. 00:01:35.576 --> 00:01:42.657 Para cada encabezado de celda, escribimos "". 00:01:42.657 --> 00:01:45.099 ¿Cuál debería ser el encabezado de la primera columna? 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, 00:01:49.252 --> 00:01:51.096 y es el identificador. 00:01:51.292 --> 00:01:54.551 Ahora vamos a añadir otra columna para "Species" ("Especies"). 00:01:55.269 --> 00:01:59.052 Y finalmente, vamos a añadir una columna para el color. 00:01:59.052 --> 00:02:01.532 Creo que son suficientes columnas por el momento, 00:02:01.532 --> 00:02:03.525 y vamos a incluir algunos datos. 00:02:03.903 --> 00:02:05.951 Empezamos con los renglones de datos 00:02:05.951 --> 00:02:09.473 con la etiqueta "" debajo de "", 00:02:09.473 --> 00:02:11.847 y una vez más, queremos una fila, 00:02:11.847 --> 00:02:14.002 así que vamos a usar la etiqueta "". 00:02:14.341 --> 00:02:16.717 Pero dentro de ésta, en lugar de usar "", 00:02:16.717 --> 00:02:20.075 vamos a usar "", porque estamos en el "cuerpo" de la tabla. 00:02:20.075 --> 00:02:23.136 Escribimos "", que significa datos de la tabla, 00:02:23.136 --> 00:02:26.471 y ¿cuál es el valor que debemos poner en la primera celda 00:02:26.471 --> 00:02:27.937 del primer renglón de datos? 00:02:28.266 --> 00:02:30.261 Sólo voy a buscar mi lista, 00:02:30.261 --> 00:02:33.801 y veo que la primera cosa que tengo en mi lista es "Black & white", 00:02:33.801 --> 00:02:36.019 y ese es el nombre de mi mascota, 00:02:36.019 --> 00:02:39.318 así que escribo: "Black & white". 00:02:40.425 --> 00:02:42.724 Ahora la segunda "". 00:02:42.724 --> 00:02:46.726 Buscamos y vemos que la segunda "" es "Species", 00:02:46.726 --> 00:02:49.940 y "Black & white" era un conejo, 00:02:49.940 --> 00:02:52.111 así que escribimos "rabbit" ("conejo"). 00:02:52.697 --> 00:02:55.334 Finalmente, la tercera "". 00:02:55.334 --> 00:02:58.127 Buscamos y vemos que la tercera "" es color. 00:02:58.229 --> 00:03:00.177 Así que la "" correspondiente... 00:03:00.177 --> 00:03:04.430 bueno, no era una niña muy creativa cuando le puse nombre a este conejo, 00:03:04.430 --> 00:03:08.505 así que probablemente puedas adivinar el color. 00:03:08.505 --> 00:03:10.937 Ok, vamos a hacer otra fila. 00:03:10.937 --> 00:03:13.107 Y les voy a enseñar un pequeño truco. 00:03:13.107 --> 00:03:15.514 Una vez que hice la primera fila, en realidad quisiera, 00:03:15.514 --> 00:03:17.126 seleccionar esta primera fila, 00:03:17.126 --> 00:03:19.394 y copiarla, usando un atajo del teclado, 00:03:19.394 --> 00:03:22.588 que generalmente es control-C o comando-C, 00:03:22.588 --> 00:03:24.438 dependiendo del sistema operativo que usen. 00:03:24.626 --> 00:03:28.637 Y luego, la pego, usando otro atajo del teclado, 00:03:28.637 --> 00:03:31.082 generalmente control-V o comando-V, 00:03:31.082 --> 00:03:33.041 dependiendo de su sistema operativo. 00:03:33.185 --> 00:03:36.976 Y después de pegarlo, cambio los valores. 00:03:37.040 --> 00:03:41.779 Así que éste debe ser "Daemon", "cat" ("gato") y "black" ("negro"). 00:03:41.779 --> 00:03:44.397 Y luego haremos esto una vez más, 00:03:44.397 --> 00:03:52.985 y éste debe ser "Angel", "cat" ("gato") y "orange" ("naranja"). 00:03:52.985 --> 00:03:55.607 Ok, esto se pone muy aburrido 00:03:55.607 --> 00:03:59.068 cuando tenemos que escribir ""s y ""s una y otra vez, 00:03:59.068 --> 00:04:03.532 así que el truco de copiar y pegar hará que esto no sea tan aburrido. 00:04:03.532 --> 00:04:05.953 Y aquí la tenemos: una tabla. 00:04:05.953 --> 00:04:08.041 Puedo añadir columnas fácilmente, 00:04:08.041 --> 00:04:10.548 sólo con escribir otra "" en el encabezado, 00:04:10.548 --> 00:04:12.827 y luego "" en cada una de las filas, 00:04:12.827 --> 00:04:15.962 si quiero compartir más detalles de mis mascotas. 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? 00:04:19.661 --> 00:04:22.189 Cómo cambiar los bordes, o los colores o los espacios. 00:04:22.358 --> 00:04:24.673 Puedes hacer todo eso con propiedades de CSS, 00:04:24.673 --> 00:04:27.913 que tal vez ya hayas aprendido, o que vas a aprender muy pronto. 00:04:27.918 --> 00:04:31.522 Ahora, trata de rehacer esta página web con la lista de tus propias mascotas, 00:04:31.522 --> 00:04:33.491 o con las mascotas que te gustaría tener. 00:04:33.494 --> 00:04:35.341 ¡Tabula esos datos!