1 00:00:00,110 --> 00:00:24,469 Vale, pues ahora toca cómo crear tablas en HTML. Como digo, la creación de tablas va a ser muy importante porque nos va a ayudar a distribuir el contenido dentro de nuestra web, ¿vale? En determinados momentos a lo mejor nos interesa crear una tabla con una única fila y dos columnas para tener en un lado texto y en otro una imagen o viceversa, o texto en los dos lados, ¿vale? Como queramos. 2 00:00:24,469 --> 00:00:29,030 Entonces, ¿cómo creamos tablas en HTML? 3 00:00:29,489 --> 00:00:33,469 Pues bueno, nos vamos a ir a nuestro editor, ¿vale? 4 00:00:33,869 --> 00:00:34,770 Al brackets 5 00:00:34,770 --> 00:00:39,450 Y lo que vamos a hacer, ¿vale? 6 00:00:39,490 --> 00:00:41,009 Lo primero que vamos a hacer es como siempre 7 00:00:41,009 --> 00:00:43,130 Pues crearnos nuestra estructura HTML 8 00:00:43,130 --> 00:00:47,090 Cambiamos el idioma a castellano 9 00:00:47,090 --> 00:00:50,070 Y ponemos aquí tablas en HTML 10 00:00:50,070 --> 00:00:54,450 Y en primer lugar, como siempre, una cabecera H1 11 00:00:54,450 --> 00:01:10,260 ¿Vale? Entonces, ¿cómo creamos tablas? La etiqueta para crear tablas es la etiqueta table, ¿vale? Tan sencillo como eso. Llegamos nosotros ahora y ponemos etiqueta table, ¿vale? 12 00:01:10,260 --> 00:01:26,840 Y ahora, lo primero que vamos a hacer es definir cuántas filas queremos. En este caso yo, por ejemplo, voy a poner 4 filas, ¿vale? Para poner fila etiqueta TR. Así que copio y pego, ¿vale? 5 filas. 13 00:01:27,840 --> 00:01:32,579 Y ahora, dentro de cada fila, voy a poner el contenido, las columnas. 14 00:01:33,579 --> 00:01:37,760 En este caso, en la primera columna voy a poner una etiqueta especial, que es la etiqueta TH, 15 00:01:37,939 --> 00:01:42,579 que lo que hace es que pone negrito el contenido. Es como si fuera la cabecera de la tabla, ¿vale? 16 00:01:42,900 --> 00:01:46,500 Y aquí, pues, una primera columna va a ser el nombre, ¿vale? 17 00:01:46,500 --> 00:01:50,959 Voy a hacer una lista de alumnos, por ejemplo. 18 00:01:52,379 --> 00:01:54,019 Otra columna serían los apellidos. 19 00:01:59,519 --> 00:02:00,819 Otra columna sería la edad. 20 00:02:02,920 --> 00:02:06,480 Y otra columna sería el correo electrónico, ¿vale? 21 00:02:07,260 --> 00:02:11,800 Ahora nos vamos a la segunda fila y empezamos a rellenar, ¿vale? 22 00:02:12,139 --> 00:02:14,020 Esa tabla de contenido real. 23 00:02:14,319 --> 00:02:17,759 Para añadir contenido lo haremos con la etiqueta TD, ¿vale? 24 00:02:17,759 --> 00:02:35,539 Y ahora aquí pondríamos, por ejemplo, Pepita, el apellido Pérez, la edad 23 y el correo pepita arroba correo punto com. 25 00:02:35,539 --> 00:02:57,270 En otra fila, mismo procedimiento. Paco, Peláez, 22, y correo, paco, arroba, correo.com. ¿Vale? 26 00:02:57,270 --> 00:03:19,770 Y en la última fila, pues ponemos Luisa Martínez, edad 24, correo, Luisa, arroba, correo.com. ¿Vale? 27 00:03:20,250 --> 00:03:27,449 Entonces, fijaros, esta sería la tabla que nos queda. Como veis, no tiene ahora mismo mucho estilo, no tiene bordes, no tiene colores, no tiene nada. 28 00:03:28,270 --> 00:03:33,310 Todo eso lo haremos siempre con hojas de estilo, por eso no quiero que lo veamos aquí, lo veremos cuando vayamos avanzando, ¿vale? 29 00:03:33,610 --> 00:03:36,610 Ahora mismo simplemente estamos añadiendo contenido, ¿vale? 30 00:03:38,569 --> 00:03:46,830 Bueno, vamos a ver una forma un poquito más avanzada de hacer tablas, que implica combinar celdas, combinar columnas, combinar filas, ¿vale? 31 00:03:46,830 --> 00:04:04,449 Entonces, para eso voy a crearme una segunda tabla, ¿vale? Voy a poner aquí una tabla H2 que voy a poner ventas, ¿vale? Y me creo mi etiqueta table, como siempre, ¿vale? Etiqueta table fundamental. 32 00:04:04,449 --> 00:04:15,050 Entonces, lo primero que vamos a hacer dentro de esa etiqueta table es poner una etiqueta para poner lo que va a ser el pie de tabla, ¿vale? 33 00:04:15,050 --> 00:04:21,970 Lo que le va a dar un nombre a la tabla. Esto es muy importante hacerlo en HTML5, ¿vale? Es muy importante. 34 00:04:22,449 --> 00:04:27,730 Y para eso pondríamos la etiqueta que se llama caption, ¿vale? Caption. 35 00:04:27,730 --> 00:04:35,670 Y dentro, pues, pondremos la descripción. Pues, en este caso, reporte trimestral de ventas, ¿vale? 36 00:04:36,250 --> 00:04:42,050 Y, importante, la etiqueta caption siempre tiene que ir después de la etiqueta table, ¿vale? 37 00:04:42,089 --> 00:04:52,360 Entonces, lo voy a poner aquí con comentario, caption siempre después de table, ¿vale? 38 00:04:52,360 --> 00:05:13,279 Y ahora, ¿cómo vamos a organizar las tablas en HTML? Muy sencillo, las vamos a organizar por bloques. Vamos a tener en primer lugar una cabecera, luego vamos a tener tantas secciones de cuerpo como necesitemos y luego al final una sección de pie, ¿vale? 39 00:05:13,279 --> 00:05:33,160 ¿Cómo se pone una sección de cabecera en una tabla, en HTML5? Pues se pone con la etiqueta TH, ¿vale? Y dentro lo que vamos a poner va a ser una fila con TR, ¿vale? Y a su vez dentro cada una de las celdas de cabecera, que recuerdo que eso era con TH, ¿vale? 40 00:05:33,160 --> 00:05:57,959 Y vamos a poner tres columnas, una con mes, otra con vendedor y otra con importe en euros. ¿Vale? Una vez que ya hemos definido esa cabecera, ese bloque de cabecera, vamos a definir el primer bloque de cuerpo con Tbody. ¿Vale? 41 00:05:57,959 --> 00:06:18,959 Y dentro vamos a meter una primera fila, ¿vale? Donde lo que vamos a meter va a ser una columna que va a ser el mes de enero, otra columna que va a ser el nombre de Luis, uno de los vendedores, y otra columna que va a ser lo que él ha vendido, 350, ¿vale? 42 00:06:18,959 --> 00:06:41,389 Luego vamos a meter otra fila más y vamos a copiar, para ir más rápido, vamos a copiar todo este contenido, ¿vale? Y en este caso en vez de vender Luis lo va a vender Johanna y en vez de vender 350 va a vender 250, ¿vale? 43 00:06:41,389 --> 00:07:06,149 Y por último, vamos a añadir otro elemento más, que va a ser, en este caso, Peter, ¿vale? Y Peter va a vender 100, ¿vale? Entonces, fijaros, lo que se ve aquí es, bueno, me falta una última fila, ¿vale? 44 00:07:06,149 --> 00:07:10,750 Que va a ser el subtotal, lo que se ha vendido ese mes, ¿vale? 45 00:07:14,129 --> 00:07:17,209 Que al subtotal lo voy a poner en negrita, ¿vale? 46 00:07:17,230 --> 00:07:22,250 Por eso le pongo la cabecera TH y al otro no lo voy a poner normal, ¿vale? 47 00:07:23,610 --> 00:07:29,800 Entonces, fijaros, el mes de enero se repite para todos, ¿vale? 48 00:07:29,800 --> 00:07:38,279 Es decir, realmente aquí se me ha olvidado a mí poner que esto también sería TDC de ahora, enero. 49 00:07:39,420 --> 00:07:39,860 Así. 50 00:07:40,120 --> 00:07:43,980 ¿Vale? Fijaros que el mes de enero se repite para todos los elementos. 51 00:07:45,199 --> 00:07:48,980 Por lo tanto, si se repite para todos, lo que yo puedo hacer es agruparlo en uno solo. 52 00:07:49,339 --> 00:07:51,459 ¿Cómo? Combinando esas filas. 53 00:07:51,639 --> 00:07:54,120 ¿Cómo combino las filas? Pues muy sencillo. 54 00:07:54,639 --> 00:07:58,079 Me borro enero en la última zona, en la última fila. 55 00:08:00,100 --> 00:08:03,100 ¿Vale? Fijaros que conforme voy borrando se va modificando aquí. 56 00:08:03,100 --> 00:08:09,459 Y ahora, en esta fila, en la primera fila, voy a combinar enero con el resto de filas. 57 00:08:09,459 --> 00:08:21,360 ¿Cómo se hace eso? Con un atributo que se llama rowSpam, ¿vale? Ahí lo veis, ¿vale? Le doy al Enter y entre comillas pondré el número de filas que quiero combinar. 58 00:08:21,360 --> 00:08:35,360 Que pongo solo una, se me queda como estaba. Que pongo dos, se me combina con la fila que corresponde a Johanna. Si pongo tres, con la que corresponde a Peter. Y si pongo cuatro, con el subtotal, que era lo que yo quería. ¿Vale? 59 00:08:35,360 --> 00:08:51,059 Bueno, pues me voy a copiar todo esto, ¿vale? Todo el body. Y me lo voy a copiar dos veces, lo voy a pegar dos veces. Una vez va a ser el mes de febrero y la última va a ser el mes de marzo, ¿vale? 60 00:08:51,059 --> 00:09:13,340 ¿Vale? Entonces, lo que ahora voy a hacer es añadir una última zona de la tabla, que va a ser, como decía antes, el pie, que se hace añadiendo la etiqueta T-Foot. ¿Vale? Y dentro de esa etiqueta T-Foot voy a añadir solamente dos elementos. 61 00:09:13,340 --> 00:09:38,240 El primero va a ser una cabecera que va a ser el total, ¿vale? Y luego otra etiqueta que va a ser lo que he vendido durante los tres meses, ¿vale? Durante febrero, enero, febrero y marzo, ¿vale? Había vendido 700 cada mes, pues 700 por 3, 2100, ¿vale? 62 00:09:38,240 --> 00:09:59,240 Y fijaros que cuando yo hago esto, no me queda muy bien. ¿Por qué? Porque yo he definido una tabla de tres columnas y aquí estoy utilizando solamente dos. Y si os dais cuenta, de hecho, el subtotal, los 2100, o el total, perdón, no se me queda alineado con la columna importe, ¿vale? 63 00:09:59,240 --> 00:10:13,399 Entonces, ¿qué voy a hacer? Pues voy a coger la total y voy a combinarlo entre las dos primeras columnas. ¿Cómo combino columnas? Pues nos pagamos la etiqueta TH y ponemos el atributo colspam. 64 00:10:14,419 --> 00:10:27,039 Y entre comillas ponemos el número de columnas que queremos combinar, en este caso, 2. ¿Vale? Y fijaros que se me queda tal y como yo había querido. ¿Vale? 65 00:10:27,039 --> 00:10:45,220 Lo dicho, las tablas son muy importantes y muy útiles, así que darle uso, entender cómo funcionan y ir haciendo vosotros vuestras pruebecitas, ¿vale? Bueno, que vaya bien.