How We Built a Brand-to-Generic Name Lookup Table for a Medicine Store

On a store that sells generic prescription medicines, one question comes up again and again: "My doctor said Cialis. Which of these is that?" Product names like Tadacip 20 or Ciasel 20 mean nothing to someone that has only ever heard the brand. So we built a brand-to-generic lookup table. Here is how it works, and what we learned about making a simple data table accessible and useful for search.

The problem

Each medicine has three names that people use interchangeably:

• the original brand (Viagra, Cialis, Propecia, Arimidex)
• the active ingredient (sildenafil, tadalafil, finasteride, anastrozole)
• the generic product name chosen by each maker (Fildena 100, Tadacip 20, Finpecia 1 mg, Armotraz 1)

Customers search by any of the three. The table has to connect all of them in one row, plus the strength, because a name match with the wrong strength is worse than no match at all.

Start with the data, not the markup

We kept the source of truth as a small JSON file and generated the HTML from it. That way the same data feeds the table, the on-site search and any structured data we add later.

[
  {
    "brand": "Cialis",
    "ingredient": "tadalafil",
    "strength": "20 mg",
    "generics": ["Tadacip 20", "Ciasel 20", "Tadaboom 20"],
    "licensed": true,
    "category": "mens-health"
  },
  {
    "brand": "Propecia",
    "ingredient": "finasteride",
    "strength": "1 mg",
    "generics": ["Finpecia 1 mg", "Finax 1", "Finalo 1"],
    "licensed": true,
    "category": "hair-loss"
  },
  {
    "brand": "Viagra",
    "ingredient": "sildenafil",
    "strength": "200 mg",
    "generics": ["Cenforce 200"],
    "licensed": false,
    "category": "mens-health"
  }
]

That licensed flag turned out to be the most important field. Some generics are sold at strengths above the licensed dose (tadalafil 40 mg and 80 mg, sildenafil 200 mg). The table has to say so plainly instead of listing them as if they were equal options.

Semantic HTML first

The rendered table is plain HTML, not a grid of divs:

<table>
  <caption>Brand and generic names, by active ingredient and strength</caption>
  <thead>
    <tr>
      <th scope="col">Brand</th>
      <th scope="col">Active ingredient</th>
      <th scope="col">Strength</th>
      <th scope="col">Generic products</th>
      <th scope="col">Licensed dose?</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Propecia</th>
      <td>finasteride</td>
      <td>1 mg</td>
      <td>Finpecia 1 mg, Finax 1, Finalo 1</td>
      <td>Yes</td>
    </tr>
  </tbody>
</table>

A few choices that paid off:

• <caption> tells screen reader users what the table is for before they reach any cells.
• scope on header cells lets assistive tech announce "Brand: Propecia, Strength: 1 mg" as people move across a row.
• The brand is the row header, because it is the name most visitors arrive with.
• "Licensed dose?" is written in words, not just a red or green icon, so the warning never relies on colour alone.
• On small screens the table sits in a scrollable wrapper with tabindex="0" and an accessible label, rather than being collapsed into cards that lose the header relationships.

Filtering without breaking anything

We added a text box that filters rows as you type. It is progressive enhancement: with JavaScript off, the full table is still there. The filter matches against all three name columns, so typing "cialis", "tadalafil" or "tadacip" finds the same row. A polite live region announces "3 matching rows", so the result count is not visual-only.

SEO notes

• One strong page beats twenty thin "X vs Y" pages. The table lives inside a full guide rather than on its own.
• Every generic name links to its product page, and every ingredient links to its explainer, which helps both people and crawlers.
• Plain text in cells means the brand and generic pairs are indexable. No names hidden inside images.

Content rules baked into the template

Medicine content needs guard rails that a normal product table does not. The template always shows a line saying a valid prescription is required for every order, and any row with licensed: false gets a note to use only what a prescriber sets. If people buy medicine online based on a table you built, it has to be accurate, and it must never nudge anyone towards a higher dose.

The result

Visitors can now type the brand they know and land on the right generic in one step, which makes it easier to buy generic tablets online knowing the ingredient and strength match their prescription. You can see the table in context in this guide to buying generic drugs online, and the products it points to are listed in the generic medicines shop.

This is general information, not medical advice. Speak to your doctor or pharmacist before starting any medicine.