Skip to main content

​
Overview

RALQ features an interactive periodic table designed by Russian chemist Dmitri Mendeléev in 1869. The table organizes all 118 known chemical elements according to their physical and chemical properties, providing students with comprehensive information about each element.
The original periodic table contained 63 elements when Mendeléev designed it. Today’s version includes 118 elements found in nature or synthesized in laboratories.

​
Interactive Features

The periodic table in RALQ (tabla-periodica.php) displays elements in their traditional periodic arrangement with interactive capabilities.

​
Element Display Format

Each element cell contains detailed information: 
<div class="element">
    <div class="masa">1.00794</div>       <!-- Atomic Mass -->
    <div class="at_num">1</div>           <!-- Atomic Number -->
    <div class="ener">1312.0</div>        <!-- Ionization Energy -->
    <div class="elec">2.20</div>          <!-- Electronegativity -->
    <div class="estad">                   <!-- Oxidation States -->
        <li>+1</li>
        <li>-1</li>
    </div>
    <div class="symbol">H</div>           <!-- Element Symbol -->
    <div class="at_details">              <!-- Element Name & Config -->
        Hidrógeno<br />1s<sup>1</sup>
    </div>
</div>

​
Element Information Displayed

​
Primary Information

Atomic Number

The number of protons in the element’s nucleus. Determines the element’s identity and position in the periodic table.Example: Hydrogen (H) = 1, Carbon (C) = 6, Iron (Fe) = 26

Atomic Mass

The average mass of an atom, measured in atomic mass units (amu). Includes protons and neutrons.Example: H = 1.00794, C = 12.0107, Fe = 55.845

Element Symbol

One or two-letter abbreviation representing the element, often derived from Latin names.Example: H (Hydrogen), Fe (Ferrum/Iron), Au (Aurum/Gold)

Element Name

Full name of the element in Spanish with electron configuration.Example: “Hidrógeno” (Hydrogen), “Oxígeno” (Oxygen)

​
Advanced Properties

Shows the distribution of electrons in atomic orbitals:Examples from RALQ:
  • Hydrogen (H): 1s¹
  • Helium (He): 1s²
  • Carbon (C): 1s²2s²2p²
  • Oxygen (O): 1s²2s²2p⁴
  • Iron (Fe): [Ar]3d⁶4s²
  • Copper (Cu): [Ar]3d¹⁰4s¹
Noble Gas Notation: For larger atoms, configurations use shorthand with noble gas cores:
  • [Ne] = 1s²2s²2p⁶
  • [Ar] = [Ne]3s²3p⁶
  • [Kr] = [Ar]3d¹⁰4s²4p⁶

​
Exploring Elements

​
Element Groups and Periods

The periodic table is organized by: Periods (Horizontal Rows):
  • 7 periods total
  • Period number = number of electron shells
  • Elements in same period have same number of electron shells
Groups (Vertical Columns):
  • 18 groups total
  • Elements in same group have similar properties
  • Same number of valence electrons

​
Element Categories

Elements are classified by CSS classes indicating their category:

Alkali Metals

Group 1: Li, Na, K, Rb, CsHighly reactive, soft metals

Alkaline Earth Metals

Group 2: Be, Mg, Ca, Sr, BaReactive metals, harder than alkali metals

Transition Metals

Groups 3-12: Fe, Cu, Zn, Ag, AuVersatile metals, multiple oxidation states

Metalloids

B, Si, Ge, As, Sb, TeProperties between metals and nonmetals

Nonmetals

C, N, O, P, S, ClDiverse properties, form covalent bonds

Noble Gases

Group 18: He, Ne, Ar, Kr, XeInert, stable, rarely form compounds

​
Sample Elements

Here are detailed examples of elements as shown in RALQ:

​
Hydrogen (H)

Atomic Number: 1
Atomic Mass: 1.00794
Ionization Energy: 1312.0 kJ/mol
Electronegativity: 2.20
Oxidation States: +1, -1
Electron Configuration: 1s¹

​
Carbon (C)

Atomic Number: 6
Atomic Mass: 12.0107
Ionization Energy: 1086.5 kJ/mol
Electronegativity: 2.55
Oxidation States: +4, +3, +2, +1, -1, -2, -3, -4
Electron Configuration: 1s²2s²2p²

​
Oxygen (O)

Atomic Number: 8
Atomic Mass: 15.9994
Ionization Energy: 1313.9 kJ/mol
Electronegativity: 3.44
Oxidation States: +2, +1, -1, -2
Electron Configuration: 1s²2s²2p⁴

​
Iron (Fe)

Atomic Number: 26
Atomic Mass: 55.845
Ionization Energy: 762.5 kJ/mol
Electronegativity: 1.83
Oxidation States: +6, +5, +4, +3, +2, +1, -1, -2
Electron Configuration: [Ar]3d⁶4s²

​
Gold (Au)

Included in the full periodic table with transition metal properties.

​
Educational Value

​
Learning Objectives

Skills Developed:
  • Recognize elements by symbol
  • Locate elements on the periodic table
  • Understand atomic number significance
  • Identify element groups and periods
Practice Activities:
  • Find elements by name or symbol
  • Identify element categories
  • Compare atomic properties

​
Real-World Applications

Medicine

  • Iron (Fe) in hemoglobin for oxygen transport
  • Calcium (Ca) for bone structure
  • Iodine (I) for thyroid function
  • Sodium (Na) and Potassium (K) for nerve signals

Technology

  • Silicon (Si) in computer chips
  • Copper (Cu) in electrical wiring
  • Gold (Au) in electronics
  • Rare earth elements in smartphones

Energy

  • Uranium (U) in nuclear power
  • Lithium (Li) in batteries
  • Hydrogen (H) as clean fuel
  • Carbon (C) in fossil fuels

Materials

  • Aluminum (Al) in construction
  • Titanium (Ti) in aerospace
  • Chromium (Cr) in stainless steel
  • Carbon (C) in plastics and composites

​
Common Examples

​
Essential Elements for Life

Major Elements (>1% of body mass):
  • Oxygen (O): 65% - Water, proteins, DNA
  • Carbon (C): 18% - Basis of all organic molecules
  • Hydrogen (H): 10% - Water, organic compounds
  • Nitrogen (N): 3% - Proteins, DNA, RNA
  • Calcium (Ca): 1.5% - Bones, teeth, cell signaling
  • Phosphorus (P): 1% - DNA, RNA, ATP, bones
Trace Elements (<1% but essential):
  • Iron (Fe), Zinc (Zn), Copper (Cu), Iodine (I), Selenium (Se)

​
Notable Element Examples

Water (H₂O): Angular geometry, responsible for life on Earth
Carbon Dioxide (CO₂): Linear molecule, key in carbon cycle
Methane (CH₄): Tetrahedral structure, main component of natural gas
Glucose (C₆H₁₂O₆): Essential energy source in living organisms
Caffeine (C₈H₁₀N₄O₂): Stimulant molecule affecting the nervous system

​
Technical Implementation

​
CSS Styling

The periodic table uses custom CSS (tablaperiodica.css) for:
  • Element cell layout and spacing
  • Color coding by element category
  • Responsive grid design
  • Hover effects and interactions

​
HTML Structure

<div class="periodic">
    <div class="periodic-row">
        <div class="cell">
            <div class="element" class="type-4 cat-3">
                <!-- Element information -->
            </div>
        </div>
        <!-- More cells -->
    </div>
    <!-- More rows -->
</div>

​
Element Categories (CSS Classes)

  • type-1: Alkali metals
  • type-2: Alkaline earth metals
  • type-3: Transition metals
  • type-4: Other metals
  • type-5: Metalloids
  • type-6: Nonmetals
  • type-7: Halogens
  • type-8: Noble gases

​
Usage Tips

Study Strategy

Effective Learning:
  • Start with first 20 elements
  • Learn groups with similar properties together
  • Use electron configuration patterns
  • Connect properties to real-world examples

Property Comparison

Understanding Trends:
  • Compare elements in same group vertically
  • Compare elements in same period horizontally
  • Note exceptions to general trends
  • Relate trends to electron configuration
The periodic table shows simplified atomic models. Actual atomic behavior involves quantum mechanics and electron probability clouds. Use these values as general guidelines for understanding chemical behavior.

​
Additional Resources

The periodic table page includes accordion sections with educational content:

​
Topics Covered

  1. What is the Periodic Table?
    • History and Mendeléev’s contribution
    • Organization principles
    • Importance in chemistry
  2. Element Properties
    • Periodic trends
    • Chemical reactivity
    • Physical properties
  3. Applications
    • Industrial uses
    • Biological importance
    • Technological applications
  4. Modern Discoveries
    • Synthetic elements
    • Recent additions to the table
    • Future of element discovery

Build docs developers (and LLMs) love

Get started for freeTalk to us