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 28 de diciembre de 2020 por Amadeo M.

119 visualizaciones

Más información Transcripción

Descargar la transcripción

Las tablas es uno de los elementos que más se utiliza. 00:00:01
¿Y por qué se utiliza? Para mostrar información de ese tipo. 00:00:04
Cuando me refiero a información de ese tipo, me refiero a información tabulada, 00:00:08
información que tenga estructura de tabla, 00:00:11
no para colocar cosas en esta celdita y después en esta que quede bonito. 00:00:13
¿De acuerdo? Para eso tendremos el CSS. 00:00:17
Esto es un tema que al principio se utilizaba porque el CSS no estaba muy avanzado, 00:00:19
a día de hoy se puede hacer lo que se quiera con un CSS. 00:00:24
Por tanto, por favor, no utilicen las tablas para colocar información 00:00:26
Entonces, bueno, pues, ¿qué tiene una tabla? 00:00:31
Pues celdas, divididas por filas y columnas 00:00:35
Y eso es exactamente lo que hacemos aquí 00:00:39
Una tabla que tiene un titulito, este de aquí arriba 00:00:41
Que tiene una parte de cuerpo en el cual le defino filas, tr, filas de la tabla 00:00:46
Y td, celdas de la tabla 00:00:52
TH son cabeceras de la tabla 00:00:55
entonces aquí estamos viendo perfectamente 00:00:58
que la tabla está encabezada por AB 00:01:00
en la vista superior 00:01:02
y en la parte lateral izquierda 00:01:04
por 1 y 2 00:01:08
entonces efectivamente estoy aplicando unos valores u otros 00:01:09
existe por supuesto el CAPTION 00:01:13
que muestra el titulito 00:01:17
parte del cuerpo de la tabla 00:01:19
parte de los encabezados 00:01:22
o parte de los pies 00:01:23
podemos aplicarlo de esta manera 00:01:24
por ejemplo, entonces podríamos tener un Thead, un Tbody y un Tfoot 00:01:26
las filas es TR y entonces adentro ponemos las celdas que consideremos 00:01:31
TD es cada celda concreta y podemos tener por ejemplo celdas vacías sin ningún problema 00:01:38
celdas que no aparecen 00:01:46
estoy viendo los apuntes y quiero ver ahora las celdas que se componen de varios elementos 00:01:48
Vamos a ver si aparece más tarde 00:01:55
Después col y grupo de columnas 00:01:57
Se utilizan algo menos 00:01:59
Pero nos permiten hacer referencia 00:02:00
A grupos de preguntas de columnas 00:02:03
Para indicar cómo son 00:02:05
¿De acuerdo? 00:02:07
Y sí, he hecho de menos algo en estos apuntes 00:02:08
Y es los T de col span y row span 00:02:11
¿Cómo son los row span? 00:02:15
Pues row span son filas que digo algo 00:02:18
y colSpan son columnas que voy agrupando 00:02:22
¿de acuerdo? 00:02:26
entonces, bueno, pues habría que ver algún ejemplo para manejarlo 00:02:27
con lo cual voy a editar rápidamente una tabla 00:02:31
voy a copiar esta misma tabla 00:02:33
me la voy a llevar a un editor 00:02:35
a este que teníamos de ejemplo 00:02:38
y antes de poner a Groucho y a Marx 00:02:40
voy a dibujar esta tablita 00:02:43
¿vale? 00:02:46
bueno, uno es un tanto maniático 00:02:47
con lo cual me voy a llevar esta tablita 00:02:49
ahí, para que esté inventado y veamos 00:02:51
claro que está dentro del body 00:02:53
bien, yo podría poner esto 00:02:55
y podría poner, imagínense 00:02:58
no estoy hablando de la información, estoy hablando 00:02:59
de que esto 00:03:02
fuera un row span 00:03:03
dos posiciones, esto indica 00:03:07
que campeón aparecerá en esta fila 00:03:10
y en la siguiente, con lo cual 00:03:11
esto ahora ya no tiene sentido 00:03:14
de aquí no tiene sentido 00:03:15
vamos a ver como quedaría 00:03:17
este ejemplo, vamos a recargar 00:03:19
voy a quitar esto que teníamos de antes 00:03:22
recargo 00:03:24
y miren que campeón ahora 00:03:25
ocupa dos filas 00:03:27
¿de acuerdo? vamos a hacer lo mismo 00:03:29
con columnas, voy a hacer con columnas 00:03:31
voy a ponerle verde 00:03:34
2003-2004, voy a poner 00:03:35
varios años 00:03:37
voy a decirle que 00:03:39
ocupe 00:03:41
dos filas 00:03:42
y voy a quitar esta información 00:03:45
lo guardo 00:03:48
recargo la página 00:03:50
y ya vemos como estamos colocando 00:03:52
esta información 00:03:55
hay que tener cuidado porque ahora por ejemplo aquí 00:03:56
solamente hay, aparentemente hay dos filas 00:03:58
¿de acuerdo? y a lo mejor no es eso lo que queremos 00:04:01
o puedo coger 00:04:02
y decir aquí, quito este td 00:04:05
y voy a poner tres filas 00:04:06
y fíjense que esta información 00:04:08
que ocupaba aquí 00:04:12
estas dos filas, ahora 00:04:13
al recargar, ya ocupa 00:04:15
todo eso de ahí 00:04:17
con lo cual yo puedo jugar con el colSpan y el rowSpan 00:04:19
fíjense como se escribe 00:04:24
rowSpan y colSpan 00:04:25
e ir colocando también con esas características toda la información 00:04:28
voy a volver aquí 00:04:33
y bueno, pues esto es todo lo que queremos ver 00:04:35
sobre tablas en HTML 00:04:39
Idioma/s:
es
Autor/es:
Amadeo Mora
Subido por:
Amadeo M.
Licencia:
Dominio público
Visualizaciones:
119
Fecha:
28 de diciembre de 2020 - 14:44
Visibilidad:
Público
Centro:
IES CLARA DEL REY
Duración:
04′ 46″
Relación de aspecto:
1.78:1
Resolución:
1364x768 píxeles
Tamaño:
30.93 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid