My daughter came home from school one day with a worksheet and a problem.
She was in third grade, starting to learn multiplication, and the worksheet had a blank multiplication table to fill in. She did not want to just fill it in - she wanted to understand it. Why does 7 times 8 equal 56? How do you see the pattern? Why does the diagonal always have the perfect squares?
I tried to explain it with a chart I printed from the internet. The chart was fine, technically. But it was ugly - dense, uniform, visually undifferentiated. Every number was the same size, the same weight, the same color. There was nothing in the design that helped her eye find patterns or organize the information.
As a developer, this bothered me. Visual design should serve understanding. A multiplication chart is fundamentally a tool for learning - and this one was designed like a spreadsheet, not a teaching aid.
So I built a better one.
Before I wrote a single line of code, I spent time thinking about what actually makes a multiplication chart useful for learning.
The first thing I noticed looking at research on math education is that visual pattern recognition is central to how children internalize multiplication tables. When kids can see that all the multiples of 5 end in 0 or 5, or that the diagonal of perfect squares forms a visual line, these patterns become anchors for memory.
A well-designed chart should make these patterns visible. That means using color, spacing, and typography as teaching tools - not just as decoration.
I also thought about different use cases. A chart for a young child first encountering multiplication tables has different needs than a chart for a student checking their work, or a chart posted on a classroom wall versus one printed and kept at a desk. Different use cases call for different design approaches.
I ended up building a generator with several distinct layout and color modes, each designed for a different purpose.
The first is the Standard Chart - a clean 12x12 (or 10x10, or 15x15) grid with subtle color coding by row, making it easy to follow any particular multiplier across the table. This is the utility version: good for reference, easy to print, no distractions.
The second is the Learning Chart - a version with highlighted multiples of common numbers (2s, 5s, 10s) in distinct colors, with the perfect square diagonal visually emphasized. This is explicitly designed to help children see the structure of the table. The 5s column and row are in one color, the 10s in another, and the diagonal is marked in a third.
The third is the Blank Chart - a version with empty cells for practice, where you can choose which cells to pre-fill. Want to give a student a chart with only the 3s and 4s filled in for reference while they practice the rest? That is a few clicks.
The fourth is the Color-Coded Difficulty Chart - each cell is colored on a gradient from light (easy products that kids memorize early, like 1s, 2s, 10s) to dark (harder products like 7x8, 6x9, 8x9). This helps students and teachers identify which facts need the most work.
The rendering is done in canvas, similar to the graph paper generator I built earlier. The core challenge is the same: getting screen rendering to match print rendering reliably.
Multiplication charts have an additional complexity: the numbers themselves need to scale in a way that looks good across different grid sizes. A 10x10 chart can use a comfortable 24pt font. A 15x15 chart with the same cell size would need to go down to 16pt. I implemented an automatic font-size scaling system that adjusts based on the grid size and the selected paper dimensions.
I also added support for generating blank charts with answer keys on a second page - teachers asked for this immediately, since it lets them print a practice sheet for students and keep the answer key for grading.
Testing a tool designed for children is different from testing a tool designed for adults. Kids are more honest and more direct. They tell you immediately if something is confusing, boring, or not what they expected.
I sat with my daughter and a couple of her classmates and watched them use the different chart styles. A few things surprised me.
The Learning Chart was not immediately more popular than the Standard Chart. Kids wanted the color-coded version initially because it looked cool, but when actually using the chart, the simpler version was easier to navigate for quick lookups.
The Blank Chart was the most popular among the kids who were actively learning - they wanted to fill it in themselves. Filling in a blank chart and then checking against the answer key felt like a game.
One of my daughter's classmates, a boy who had struggled with the 7s and 8s, told me that the color-coded difficulty chart was the first time he had understood that those were genuinely the hardest ones for most people. Seeing them visually darker made him feel like it was not just him - the chart agreed that those were hard.
That observation made me add a note to the Learning Chart: a small legend that explains why certain sections are highlighted, giving students context for what they are seeing.
The tool has expanded significantly from that initial version I built for my daughter. It now supports grid sizes from 1x1 up to 20x20, multiple paper sizes, both portrait and landscape orientations, a variety of color schemes including a colorblind-friendly option, and a classroom pack mode that generates six different charts on a single sheet for quick printing.
The most gratifying feedback I have received has been from teachers who use it regularly in their classrooms. One teacher told me she uses the difficulty-gradient chart in the first week of teaching multiplication to show students which facts are going to require the most practice, and it changes how they approach the learning. Instead of treating all 144 facts as equally hard, they prioritize.
That is the kind of feedback that makes a side project feel worthwhile. You built a tool for your daughter, and it ends up in classrooms you will never visit.