Interactive Periodic Table

Overview

This interactive periodic table provides an engaging way for students to explore the elements, their properties, and their organization within the periodic system. By hovering over any element, students can see enlarged details including atomic number, symbol, element name, and atomic mass. Color-coding by element families (alkali metals, noble gases, transition metals, etc.) helps visualize patterns and relationships.

How to Use

For Students

  1. Hover over any element to see it enlarge with detailed information
  2. Observe colors to identify element families and groups
  3. Notice patterns in the arrangement (periods, groups, families)
  4. Use as a quick reference during homework or lab work

For Teachers

  • Embed directly in Canvas, Google Classroom, or course websites
  • Use on interactive whiteboards for whole-class instruction
  • Assign as exploration activity before formal periodic table instruction
  • Reference during chemistry labs and problem-solving sessions

Interactive Periodic Table

Full Interactive Periodic Table

Explore all 118 elements with hover effects showing atomic number, symbol, name, and atomic mass

Launch Periodic Table →

Opens in a new tab • Works on all devices • No login required

Features

  • Complete Table: All 118 elements from Hydrogen to Oganesson
  • Interactive Hover: Elements enlarge 2.8× when you hover over them
  • Color-Coded Families: Alkali metals, noble gases, transition metals, and more
  • Detailed Information: Atomic number, symbol, element name, and atomic mass
  • Responsive Design: Works perfectly on desktop, tablet, and mobile devices

Educational Value

Visual Learning

The color-coded families help students see patterns before they’ve memorized group names. Hover interactions make exploring element properties engaging rather than tedious.

Accessibility

Works on any device with a web browser—no special software or downloads required. Students can access from school computers, tablets, or smartphones.

Self-Directed Discovery

Students can explore at their own pace, returning to elements multiple times as they learn more advanced concepts. The table grows with their understanding.

Canvas LMS Integration

To embed this periodic table in a Canvas page:

  1. Download the HTML file from the link above
  2. In Canvas, edit your page and switch to the HTML editor (</> button)
  3. Open the downloaded HTML file in a text editor
  4. Copy everything from the <style> tag through the closing </div> of the periodic table wrapper
  5. Paste into your Canvas HTML editor (do NOT include <!DOCTYPE>, <html>, <head>, or <body> tags)
  6. Save and preview

The table will work seamlessly within Canvas, maintaining full interactivity.

Technical Details

Technologies: HTML5, CSS3 Grid, CSS Transforms, Responsive Design
Browser Support: All modern browsers (Chrome, Firefox, Safari, Edge)
Performance: Lightweight, loads instantly even on slow connections
Accessibility: Keyboard navigable, screen reader compatible
File Size: ~40KB (complete standalone HTML)