← Volver a Recursos
🧪 Tabla Periódica Interactiva
118 elementos · Vista de átomos animada · Quiz haciendo clic en la tabla · Datos reales
118 elementosModelo atómicoQuiz interactivoMnemotécnicasHecho con IA
1
H
Hidrógeno
1,008
2
He
Helio
4,003
3
Li
Litio
6,941
4
Be
Berilio
9,012
5
B
Boro
10,81
6
C
Carbono
12,01
7
N
Nitrógeno
14,01
8
O
Oxígeno
16,00
9
F
Flúor
19,00
10
Ne
Neón
20,18
11
Na
Sodio
22,99
12
Mg
Magnesio
24,31
13
Al
Aluminio
26,98
14
Si
Silicio
28,09
15
P
Fósforo
30,97
16
S
Azufre
32,06
17
Cl
Cloro
35,45
18
Ar
Argón
39,95
19
K
Potasio
39,10
20
Ca
Calcio
40,08
21
Sc
Escandio
44,96
22
Ti
Titanio
47,87
23
V
Vanadio
50,94
24
Cr
Cromo
52,00
25
Mn
Manganeso
54,94
26
Fe
Hierro
55,85
27
Co
Cobalto
58,93
28
Ni
Níquel
58,69
29
Cu
Cobre
63,55
30
Zn
Zinc
65,38
31
Ga
Galio
69,72
32
Ge
Germanio
72,64
33
As
Arsénico
74,92
34
Se
Selenio
78,96
35
Br
Bromo
79,90
36
Kr
Kriptón
83,80
37
Rb
Rubidio
85,47
38
Sr
Estroncio
87,62
39
Y
Itrio
88,91
40
Zr
Circonio
91,22
41
Nb
Niobio
92,91
42
Mo
Molibdeno
95,96
43
Tc
Tecnecio
(98)
44
Ru
Rutenio
101,1
45
Rh
Rodio
102,9
46
Pd
Paladio
106,4
47
Ag
Plata
107,9
48
Cd
Cadmio
112,4
49
In
Indio
114,8
50
Sn
Estaño
118,7
51
Sb
Antimonio
121,8
52
Te
Telurio
127,6
53
I
Yodo
126,9
54
Xe
Xenón
131,3
55
Cs
Cesio
132,9
56
Ba
Bario
137,3
57
La
Lantano
138,9
72
Hf
Hafnio
178,5
73
Ta
Tántalo
180,9
74
W
Wolframio
183,8
75
Re
Renio
186,2
76
Os
Osmio
190,2
77
Ir
Iridio
192,2
78
Pt
Platino
195,1
79
Au
Oro
197,0
80
Hg
Mercurio
200,6
81
Tl
Talio
204,4
82
Pb
Plomo
207,2
83
Bi
Bismuto
209,0
84
Po
Polonio
(209)
85
At
Ástato
(210)
86
Rn
Radón
(222)
87
Fr
Francio
(223)
88
Ra
Radio
(226)
89
Ac
Actinio
(227)
104
Rf
Rutherfordio
(267)
105
Db
Dubnio
(268)
106
Sg
Seaborgio
(269)
107
Bh
Bohrio
(270)
108
Hs
Hasio
(277)
109
Mt
Meitnerio
(278)
110
Ds
Darmstadtio
(281)
111
Rg
Roentgenio
(282)
112
Cn
Copernicio
(285)
113
Nh
Nihonio
(286)
114
Fl
Flerovio
(289)
115
Mc
Moscovio
(290)
116
Lv
Livermorio
(293)
117
Ts
Teneso
(294)
118
Og
Oganesón
(294)
57–71
57
La
Lantano
138,9
58
Ce
Cerio
140,1
59
Pr
Praseodimio
140,9
60
Nd
Neodimio
144,2
61
Pm
Prometio
(145)
62
Sm
Samario
150,4
63
Eu
Europio
152,0
64
Gd
Gadolinio
157,3
65
Tb
Terbio
158,9
66
Dy
Disprosio
162,5
67
Ho
Holmio
164,9
68
Er
Erbio
167,3
69
Tm
Tulio
168,9
70
Yb
Iterbio
173,0
71
Lu
Lutecio
175,0
89–103
89
Ac
Actinio
(227)
90
Th
Torio
232,0
91
Pa
Protactinio
231,0
92
U
Uranio
238,0
93
Np
Neptunio
(237)
94
Pu
Plutonio
(244)
95
Am
Americio
(243)
96
Cm
Curio
(247)
97
Bk
Berkelio
(247)
98
Cf
Californio
(251)
99
Es
Einstenio
(252)
100
Fm
Fermio
(257)
101
Md
Mendelevio
(258)
102
No
Nobelio
(259)
103
Lr
Laurencio
(266)
6
C
12,01
Carbono
No metalPeríodo
2
Grupo
14
Estado
Sólido
💡 La base de toda la vida. Puede formar más compuestos que cualquier otro elemento — millones de moléculas orgánicas. El grafito y el diamante son ambos carbono puro.
Ve a la pestaña ⚛️ Átomo para ver el modelo de Bohr de este elemento.
Hazlo tú mismo con IA
✍️ Cómo recrear esta herramienta paso a paso
5 prompts en orden para ChatGPT, Claude o Gemini. Cada paso construye sobre el anterior — terminas con una tabla periódica interactiva completa.
Crea la base de datos de los 118 elementos de la tabla periódica en JavaScript y el layout CSS para mostrarla. Usa un único archivo HTML.
ESTRUCTURA DE DATOS (define un array ELEMENTS donde cada elemento tiene):
- z: número atómico (1-118)
- sym: símbolo químico
- name: nombre en español
- cat: categoría ('akm'=metal alcalino, 'aem'=alcalinotérreo, 'trm'=transición, 'ptm'=bloque p, 'mld'=metaloide, 'nem'=no metal, 'hal'=halógeno, 'nbl'=gas noble, 'lan'=lantánido, 'act'=actínido)
- grp: número de grupo 1-18 (null para lantánidos/actínidos)
- per: período 1-7 (usa 8 para lantánidos, 9 para actínidos)
- mass: masa atómica como string (ej: "1,008" o "(298)" para sintéticos)
- state: 's'=sólido, 'l'=líquido, 'g'=gas, '?'=desconocido
COLORES POR CATEGORÍA:
const CAT_COLORS = {
akm: '#DC2626', aem: '#EA580C', trm: '#CA8A04', ptm: '#16A34A',
mld: '#0891B2', nem: '#2563EB', hal: '#7C3AED', nbl: '#DB2777',
lan: '#D97706', act: '#059669', unk: '#6B7280'
}
LAYOUT CSS (tabla):
- CSS Grid con 18 columnas: grid-template-columns: repeat(18, minmax(44px, 1fr))
- Cada celda: grid-column = grp, grid-row = per
- Lantánidos/actínidos: fila separada debajo con margen-left de 2 celdas
- Permite scroll horizontal en móvil: overflow-x: auto
CELDA DE ELEMENTO (HTML):
<div class="elem" style="grid-column: [grp]; grid-row: [per]">
<span class="z">[z]</span>
<span class="sym">[sym]</span>
<span class="name">[name]</span>
<span class="mass">[mass]</span>
</div>
ESTILOS CELDA:
- min-width: 44px, min-height: 52px
- border-radius: 6px
- background: color claro de la categoría
- border: 1.5px solid color de la categoría
- font-weight: 900 para el símbolo
- hover: scale(1.08), z-index: 10, box-shadow💡 Consejo: Trabaja en un index.html único. En cada paso, pega tu código actual y di: "Tengo este código HTML, añade lo del paso siguiente:"