Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

HTML - Tablas - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 17 de noviembre de 2020 por Fernando M.

238 visualizaciones

Más información Transcripción

Descargar la transcripción

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. 00:00:00
Entonces, ¿cómo creamos tablas en HTML? 00:00:24
Pues bueno, nos vamos a ir a nuestro editor, ¿vale? 00:00:29
Al brackets 00:00:33
Y lo que vamos a hacer, ¿vale? 00:00:34
Lo primero que vamos a hacer es como siempre 00:00:39
Pues crearnos nuestra estructura HTML 00:00:41
Cambiamos el idioma a castellano 00:00:43
Y ponemos aquí tablas en HTML 00:00:47
Y en primer lugar, como siempre, una cabecera H1 00:00:50
¿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? 00:00:54
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. 00:01:10
Y ahora, dentro de cada fila, voy a poner el contenido, las columnas. 00:01:27
En este caso, en la primera columna voy a poner una etiqueta especial, que es la etiqueta TH, 00:01:33
que lo que hace es que pone negrito el contenido. Es como si fuera la cabecera de la tabla, ¿vale? 00:01:37
Y aquí, pues, una primera columna va a ser el nombre, ¿vale? 00:01:42
Voy a hacer una lista de alumnos, por ejemplo. 00:01:46
Otra columna serían los apellidos. 00:01:52
Otra columna sería la edad. 00:01:59
Y otra columna sería el correo electrónico, ¿vale? 00:02:02
Ahora nos vamos a la segunda fila y empezamos a rellenar, ¿vale? 00:02:07
Esa tabla de contenido real. 00:02:12
Para añadir contenido lo haremos con la etiqueta TD, ¿vale? 00:02:14
Y ahora aquí pondríamos, por ejemplo, Pepita, el apellido Pérez, la edad 23 y el correo pepita arroba correo punto com. 00:02:17
En otra fila, mismo procedimiento. Paco, Peláez, 22, y correo, paco, arroba, correo.com. ¿Vale? 00:02:35
Y en la última fila, pues ponemos Luisa Martínez, edad 24, correo, Luisa, arroba, correo.com. ¿Vale? 00:02:57
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. 00:03:20
Todo eso lo haremos siempre con hojas de estilo, por eso no quiero que lo veamos aquí, lo veremos cuando vayamos avanzando, ¿vale? 00:03:28
Ahora mismo simplemente estamos añadiendo contenido, ¿vale? 00:03:33
Bueno, vamos a ver una forma un poquito más avanzada de hacer tablas, que implica combinar celdas, combinar columnas, combinar filas, ¿vale? 00:03:38
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. 00:03:46
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? 00:04:04
Lo que le va a dar un nombre a la tabla. Esto es muy importante hacerlo en HTML5, ¿vale? Es muy importante. 00:04:15
Y para eso pondríamos la etiqueta que se llama caption, ¿vale? Caption. 00:04:22
Y dentro, pues, pondremos la descripción. Pues, en este caso, reporte trimestral de ventas, ¿vale? 00:04:27
Y, importante, la etiqueta caption siempre tiene que ir después de la etiqueta table, ¿vale? 00:04:36
Entonces, lo voy a poner aquí con comentario, caption siempre después de table, ¿vale? 00:04:42
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? 00:04:52
¿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? 00:05:13
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? 00:05:33
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? 00:05:57
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? 00:06:18
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? 00:06:41
Que va a ser el subtotal, lo que se ha vendido ese mes, ¿vale? 00:07:06
Que al subtotal lo voy a poner en negrita, ¿vale? 00:07:14
Por eso le pongo la cabecera TH y al otro no lo voy a poner normal, ¿vale? 00:07:17
Entonces, fijaros, el mes de enero se repite para todos, ¿vale? 00:07:23
Es decir, realmente aquí se me ha olvidado a mí poner que esto también sería TDC de ahora, enero. 00:07:29
Así. 00:07:39
¿Vale? Fijaros que el mes de enero se repite para todos los elementos. 00:07:40
Por lo tanto, si se repite para todos, lo que yo puedo hacer es agruparlo en uno solo. 00:07:45
¿Cómo? Combinando esas filas. 00:07:49
¿Cómo combino las filas? Pues muy sencillo. 00:07:51
Me borro enero en la última zona, en la última fila. 00:07:54
¿Vale? Fijaros que conforme voy borrando se va modificando aquí. 00:08:00
Y ahora, en esta fila, en la primera fila, voy a combinar enero con el resto de filas. 00:08:03
¿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. 00:08:09
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? 00:08:21
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? 00:08:35
¿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. 00:08:51
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? 00:09:13
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? 00:09:38
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. 00:09:59
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? 00:10:14
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. 00:10:27
Autor/es:
Fernando Martínez Martí
Subido por:
Fernando M.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
238
Fecha:
17 de noviembre de 2020 - 19:38
Visibilidad:
Público
Centro:
IES EL BURGO - IGNACIO ECHEVERRÍA
Duración:
10′ 46″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
30.37 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid