Interactive Multiplication Chart (Printable & Easy)

How to Use the Multiplication Chart

A multiplication chart shows the product where two factors meet. For example, follow row 7 and column 8 to find 7 × 8 = 56. Swapping the factors gives the same answer: 8 × 7 = 56. This is the commutative property of multiplication.

1. Set the range: Enter a whole decimal number from 1 to 100 in Max number (1–100), then choose Generate chart or press Enter. For example, 20 creates a 20 × 20 chart. Decimals, negative values, and scientific notation are not accepted.
2. Choose a number system: Select Decimal, Binary, or Hexadecimal from Number system. The current chart updates immediately, including its factor headings. Apply a new maximum with Generate chart. The multiplication facts stay the same; only their written number format changes.
3. Trace the factors: Hover over a product to highlight its row and column. Click or tap a cell to select it and show its multiplication fact above the chart. In binary or hexadecimal, that message also includes the decimal equation.
4. Use the keyboard: Tab through the controls and into the grid. Use the arrow keys to move between product cells. Home and End move to the first and last product in the current row; Ctrl+Home and Ctrl+End move to the first and last product in the whole grid. Press Enter or Space to select a cell and announce its factors. Tab moves out of the grid rather than through every cell.
5. Find a product: Enter a whole decimal number from 0 to 10,000 in Find product (decimal), then choose Find or press Enter. Search always uses decimal, even when the chart is displaying binary or hexadecimal. Every matching cell is highlighted and the number of matches is shown. Editing the search clears the previous highlights; generating a chart or changing number system checks the current search again.
6. Switch the theme: Choose Dark mode: off to turn dark mode on. Choose it again to return to the light theme.
7. Scroll or print: On smaller screens, scroll inside the chart to see more columns or rows. Print chart opens your browser’s print dialog. Check the preview: other page content may also appear. Smaller charts are easier to print; landscape orientation or a reduced scale may help. A large chart, especially 100 × 100, may span pages or be clipped and is not guaranteed to fit on one page.

Why does a search for zero have no matches? The interactive grid uses factors from 1 to your chosen maximum. The written 1–12 times tables below include zero facts, such as 7 × 0 = 0.

Customization

• Chart size: A maximum of 100 creates 10,000 product cells. Start with a smaller chart for practice, easier navigation, and printing. Larger charts may take longer to render.
• Number formats: Decimal, binary, and hexadecimal are built in. For site editors, the chart’s JavaScript format function controls how values are displayed; adding a system also requires updating the dropdown and its names.
• Appearance: Site editors can adjust the CSS inside this chart’s <style> block. Keep selectors scoped to #interactive-multiplication-chart and check text, highlights, and focus indicators in both themes after making changes.

Accessibility Features

The chart includes labels connected to each input, row and column headings, a visible keyboard focus indicator, one grid tab stop, and text feedback for validation, search results, and selected facts. You can select a product with a mouse, touch, or keyboard. Screen readers may require their interaction or forms mode to use the grid’s arrow-key controls. Support can vary by browser and assistive technology; the written times tables below provide another way to read the facts.