1
00:00:01,199 --> 00:00:04,679
Las tablas es uno de los elementos que más se utiliza.

2
00:00:04,679 --> 00:00:07,799
¿Y por qué se utiliza? Para mostrar información de ese tipo.

3
00:00:08,019 --> 00:00:10,679
Cuando me refiero a información de ese tipo, me refiero a información tabulada,

4
00:00:11,439 --> 00:00:13,039
información que tenga estructura de tabla,

5
00:00:13,140 --> 00:00:16,600
no para colocar cosas en esta celdita y después en esta que quede bonito.

6
00:00:17,239 --> 00:00:18,920
¿De acuerdo? Para eso tendremos el CSS.

7
00:00:19,620 --> 00:00:24,079
Esto es un tema que al principio se utilizaba porque el CSS no estaba muy avanzado,

8
00:00:24,140 --> 00:00:26,399
a día de hoy se puede hacer lo que se quiera con un CSS.

9
00:00:26,399 --> 00:00:31,440
Por tanto, por favor, no utilicen las tablas para colocar información

10
00:00:31,440 --> 00:00:35,179
Entonces, bueno, pues, ¿qué tiene una tabla?

11
00:00:35,439 --> 00:00:39,299
Pues celdas, divididas por filas y columnas

12
00:00:39,299 --> 00:00:41,899
Y eso es exactamente lo que hacemos aquí

13
00:00:41,899 --> 00:00:46,619
Una tabla que tiene un titulito, este de aquí arriba

14
00:00:46,619 --> 00:00:52,780
Que tiene una parte de cuerpo en el cual le defino filas, tr, filas de la tabla

15
00:00:52,780 --> 00:00:55,700
Y td, celdas de la tabla

16
00:00:55,700 --> 00:00:58,179
TH son cabeceras de la tabla

17
00:00:58,179 --> 00:01:00,259
entonces aquí estamos viendo perfectamente

18
00:01:00,259 --> 00:01:02,920
que la tabla está encabezada por AB

19
00:01:02,920 --> 00:01:04,819
en la vista superior

20
00:01:04,819 --> 00:01:08,239
y en la parte lateral izquierda

21
00:01:08,239 --> 00:01:09,760
por 1 y 2

22
00:01:09,760 --> 00:01:13,019
entonces efectivamente estoy aplicando unos valores u otros

23
00:01:13,019 --> 00:01:17,500
existe por supuesto el CAPTION

24
00:01:17,500 --> 00:01:19,200
que muestra el titulito

25
00:01:19,200 --> 00:01:22,140
parte del cuerpo de la tabla

26
00:01:22,140 --> 00:01:23,480
parte de los encabezados

27
00:01:23,480 --> 00:01:24,680
o parte de los pies

28
00:01:24,680 --> 00:01:26,400
podemos aplicarlo de esta manera

29
00:01:26,400 --> 00:01:31,280
por ejemplo, entonces podríamos tener un Thead, un Tbody y un Tfoot

30
00:01:31,280 --> 00:01:38,859
las filas es TR y entonces adentro ponemos las celdas que consideremos

31
00:01:38,859 --> 00:01:46,680
TD es cada celda concreta y podemos tener por ejemplo celdas vacías sin ningún problema

32
00:01:46,680 --> 00:01:48,120
celdas que no aparecen

33
00:01:48,120 --> 00:01:55,480
estoy viendo los apuntes y quiero ver ahora las celdas que se componen de varios elementos

34
00:01:55,480 --> 00:01:57,099
Vamos a ver si aparece más tarde

35
00:01:57,099 --> 00:01:59,719
Después col y grupo de columnas

36
00:01:59,719 --> 00:02:00,680
Se utilizan algo menos

37
00:02:00,680 --> 00:02:03,560
Pero nos permiten hacer referencia

38
00:02:03,560 --> 00:02:05,579
A grupos de preguntas de columnas

39
00:02:05,579 --> 00:02:07,140
Para indicar cómo son

40
00:02:07,140 --> 00:02:07,620
¿De acuerdo?

41
00:02:08,460 --> 00:02:11,819
Y sí, he hecho de menos algo en estos apuntes

42
00:02:11,819 --> 00:02:15,699
Y es los T de col span y row span

43
00:02:15,699 --> 00:02:18,800
¿Cómo son los row span?

44
00:02:18,800 --> 00:02:22,979
Pues row span son filas que digo algo

45
00:02:22,979 --> 00:02:26,240
y colSpan son columnas que voy agrupando

46
00:02:26,240 --> 00:02:26,699
¿de acuerdo?

47
00:02:27,460 --> 00:02:31,879
entonces, bueno, pues habría que ver algún ejemplo para manejarlo

48
00:02:31,879 --> 00:02:33,780
con lo cual voy a editar rápidamente una tabla

49
00:02:33,780 --> 00:02:35,039
voy a copiar esta misma tabla

50
00:02:35,039 --> 00:02:38,840
me la voy a llevar a un editor

51
00:02:38,840 --> 00:02:40,219
a este que teníamos de ejemplo

52
00:02:40,219 --> 00:02:43,159
y antes de poner a Groucho y a Marx

53
00:02:43,159 --> 00:02:46,719
voy a dibujar esta tablita

54
00:02:46,719 --> 00:02:47,120
¿vale?

55
00:02:47,740 --> 00:02:49,840
bueno, uno es un tanto maniático

56
00:02:49,840 --> 00:02:51,879
con lo cual me voy a llevar esta tablita

57
00:02:51,879 --> 00:02:53,879
ahí, para que esté inventado y veamos

58
00:02:53,879 --> 00:02:55,419
claro que está dentro del body

59
00:02:55,419 --> 00:02:58,060
bien, yo podría poner esto

60
00:02:58,060 --> 00:02:59,759
y podría poner, imagínense

61
00:02:59,759 --> 00:03:02,039
no estoy hablando de la información, estoy hablando

62
00:03:02,039 --> 00:03:03,060
de que esto

63
00:03:03,060 --> 00:03:06,120
fuera un row span

64
00:03:06,120 --> 00:03:07,280
de

65
00:03:07,280 --> 00:03:10,000
dos posiciones, esto indica

66
00:03:10,000 --> 00:03:11,919
que campeón aparecerá en esta fila

67
00:03:11,919 --> 00:03:14,039
y en la siguiente, con lo cual

68
00:03:14,039 --> 00:03:15,400
esto ahora ya no tiene sentido

69
00:03:15,400 --> 00:03:17,919
de aquí no tiene sentido

70
00:03:17,919 --> 00:03:19,659
vamos a ver como quedaría

71
00:03:19,659 --> 00:03:22,139
este ejemplo, vamos a recargar

72
00:03:22,139 --> 00:03:24,039
voy a quitar esto que teníamos de antes

73
00:03:24,039 --> 00:03:25,520
recargo

74
00:03:25,520 --> 00:03:27,800
y miren que campeón ahora

75
00:03:27,800 --> 00:03:29,639
ocupa dos filas

76
00:03:29,639 --> 00:03:31,699
¿de acuerdo? vamos a hacer lo mismo

77
00:03:31,699 --> 00:03:34,120
con columnas, voy a hacer con columnas

78
00:03:34,120 --> 00:03:35,400
voy a ponerle verde

79
00:03:35,400 --> 00:03:37,159
2003-2004, voy a poner

80
00:03:37,159 --> 00:03:39,259
varios años

81
00:03:39,259 --> 00:03:41,719
voy a decirle que

82
00:03:41,719 --> 00:03:42,740
ocupe

83
00:03:42,740 --> 00:03:45,659
dos filas

84
00:03:45,659 --> 00:03:48,080
y voy a quitar esta información

85
00:03:48,080 --> 00:03:50,960
lo guardo

86
00:03:50,960 --> 00:03:52,400
recargo la página

87
00:03:52,400 --> 00:03:55,360
y ya vemos como estamos colocando

88
00:03:55,360 --> 00:03:56,340
esta información

89
00:03:56,340 --> 00:03:58,800
hay que tener cuidado porque ahora por ejemplo aquí

90
00:03:58,800 --> 00:04:01,039
solamente hay, aparentemente hay dos filas

91
00:04:01,039 --> 00:04:02,979
¿de acuerdo? y a lo mejor no es eso lo que queremos

92
00:04:02,979 --> 00:04:05,060
o puedo coger

93
00:04:05,060 --> 00:04:06,599
y decir aquí, quito este td

94
00:04:06,599 --> 00:04:08,120
y voy a poner tres filas

95
00:04:08,120 --> 00:04:12,180
y fíjense que esta información

96
00:04:12,180 --> 00:04:13,680
que ocupaba aquí

97
00:04:13,680 --> 00:04:15,719
estas dos filas, ahora

98
00:04:15,719 --> 00:04:17,959
al recargar, ya ocupa

99
00:04:17,959 --> 00:04:19,279
todo eso de ahí

100
00:04:19,279 --> 00:04:24,519
con lo cual yo puedo jugar con el colSpan y el rowSpan

101
00:04:24,519 --> 00:04:25,920
fíjense como se escribe

102
00:04:25,920 --> 00:04:28,860
rowSpan y colSpan

103
00:04:28,860 --> 00:04:33,480
e ir colocando también con esas características toda la información

104
00:04:33,480 --> 00:04:35,379
voy a volver aquí

105
00:04:35,379 --> 00:04:39,879
y bueno, pues esto es todo lo que queremos ver

106
00:04:39,879 --> 00:04:44,100
sobre tablas en HTML