webdevpuneet.com

Related Snippets

85 in Tables category
1–6 of 60

SortableJS Sortable Table Rows with Live Ranking and Undo

Accessible Tree Table with Expandable Nested Rows

Virtualized 100,000-Row Table in Vanilla JavaScript

Grid.js Lightweight Searchable Table with Row Details

Tabulator Grouped Rows with Aggregates

Tabulator Editable Cells with Validation and Undo

AI Model Comparison Table — Free LLM Tier Comparison Snippet

AI Model Comparison Table · Tables · Plain HTML, CSS & JS · Live preview

CategoryTables
TagsAI UIData Tables

Copy & paste

Source Code

<div class="mct-wrap">
  <div class="mct-heading">
    <h2>Choose a model</h2>
    <p>Pick the tier that matches your latency, cost, and reasoning needs.</p>
  </div>
  <div class="mct-scroll">
  <table class="mct-table">
    <thead>
      <tr>
        <th class="mct-feature-col">Capability</th>
        <th>
          <div class="mct-head">
            <div class="mct-name">Fast</div>
            <div class="mct-sub">Low latency</div>
          </div>
        </th>
        <th class="mct-featured">
          <div class="mct-head">
            <div class="mct-badge">Recommended</div>
            <div class="mct-name">Balanced</div>
            <div class="mct-sub">Best all-round</div>
          </div>
        </th>
        <th>
          <div class="mct-head">
            <div class="mct-name">Advanced</div>
            <div class="mct-sub">Deepest reasoning</div>
          </div>
        </th>
      </tr>
    </thead>
    <tbody id="mctBody"></tbody>
  </table>
  </div>
  <div class="mct-note">Rows are sortable — click a column header to bring its strongest model to the front.</div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Recommended column accent
A continuous border and badge highlight the Balanced tier top to bottom.
Mixed cell rendering
One cell() function handles text, price, and boolean capability values.
Checkmark / dash indicators
Boolean capabilities render as a green check or a muted dash, never red.
Click-to-highlight columns
Clicking a header flashes its column's rows to draw attention.
Data-driven rows
Every row comes from one ROWS array — no hand-written markup per row.
Responsive horizontal scroll
A wrapper with overflow-x keeps columns intact on narrow screens.
Dark, console-styled theme
Matches developer-tool aesthetics used across AI product dashboards.
No dependencies
Pure HTML, CSS, and vanilla JavaScript — no chart or table library.

About this UI Snippet

AI Model Comparison Table — Speed, Cost, and Capability at a Glance

Screenshot of the AI Model Comparison Table snippet rendered live

Every product that lets users (or developers) pick between model tiers eventually needs this table: a clear side-by-side of speed, cost, context window, and capability so the choice isn't guesswork. This snippet builds that comparison in plain HTML, CSS, and vanilla JavaScript — a dark, developer-console-styled table with a recommended column and checkmark/dash capability rows, no dependencies.

A recommended column that reads as a column, not a cell

The "Balanced" tier gets a .mct-featured class applied to its header and to every td in that column, the same continuous-border technique used in this library's comparison table. Because the class touches every cell rather than a wrapper div, the accent border runs unbroken from the header's "Recommended" badge down to the last row, and border-collapse keeps adjacent cell borders aligned so there's no gap between rows.

Mixed cell types from one data array

Each row in the ROWS array can hold a string (latency, price, context size), a boolean, or free text — cell() renders booleans as a green checkmark or a muted dash and everything else as plain text. This mirrors how model comparisons actually look in the wild: some facts are numeric, some are yes/no capability flags, and the table needs to handle both without separate markup paths.

Click-to-highlight sorting

Clicking any column header flashes every row briefly, a lightweight way to draw the eye down that model's whole column without actually reordering rows (reordering a comparison table is usually undesirable — rows have a natural reading order like speed → cost → capability). It's a deliberately subtle interaction that says "look here" rather than a full re-sort.

Where this fits in an AI product

Pair it with a pricing feature table on a billing page, or place it next to an AI persona selector so users pick both a model tier and an assistant style. It also pairs naturally with an AI token usage meter — show the comparison table to help someone choose a model, then show the meter to track what they actually spend on it.

Customizing it

Add or remove tiers by adding a header cell and a matching property on every row object. Add more rows for context window pricing tiers, rate limits, or fine-tuning support. Swap which column is featured by moving .mct-featured to a different column's cells and header.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA dark comparison table renders with Fast, Balanced (recommended), and Advanced columns.
  2. 2
    Read the capability rowsSpeed, cost, context window, reasoning depth render as text; tool calling, vision, and agentic support render as checkmarks or dashes.
  3. 3
    Click a column headerThe whole table flashes briefly, drawing focus to that model's column.
  4. 4
    Resize the windowThe table scrolls horizontally on narrow viewports without breaking column widths.
  5. 5
    Edit the ROWS arrayAdd, remove, or reorder capability rows — the table regenerates from data.
  6. 6
    Move the recommended columnShift .mct-featured to a different column's header and cells to highlight a different tier.

Real-world uses

Common Use Cases

Settings page model pickers
Help users choose which model to use by comparing speed, cost and context window, beside an AI persona selector.
API pricing pages
Show tier tradeoffs next to a pricing feature table, with a highlighted recommended column and badge.
Developer console documentation
Document model capabilities beside a webhook event tester, using check and dash cells for yes and no capabilities.
Onboarding defaults
Help a new user pick a default model, perhaps inside an AI chat interface, with clicking a header flashing its column.
Cost planning tools
Pair with an AI token usage meter so projected spend and tier characteristics are visible together.
Related: Compare Products Table
See the Compare Products Table for a related tables pattern worth pairing with this one.
Related: Live Market Watchlist Table
See the Live Market Watchlist Table for a related tables pattern worth pairing with this one.
Related: Cell Range Select & Copy Table
See the Cell Range Select & Copy Table for a related tables pattern worth pairing with this one.
Related: Table with Keyboard Cell Navigation
See the Table with Keyboard Cell Navigation for a related tables pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

The .mct-featured class is applied to the header th and to every td in that column, each getting matching left and right borders. Because border-collapse aligns adjacent cell borders, the accent reads as one continuous box from the header badge to the last row, the same technique used in this library's plain comparison table.

Add a new th in the header with a .mct-head block, then add a matching property (e.g. frontier) to every object in the ROWS array and extend cell() calls in render() to include it. The table width and scroll wrapper handle the extra column automatically.

A comparison table with several "not included" cells reads as broken or alarming if every negative is red. A muted dash communicates "not supported at this tier" without negative connotation, keeping the focus on the tiers' actual differences rather than visual noise.

It briefly flashes every row's background to draw the eye down that model's column — a lightweight way to say "look here" without physically reordering rows, since a comparison table's rows usually follow a deliberate reading order (speed, then cost, then capability) that shouldn't change on click.

Turn ROWS and the column definitions into props or reactive data, map them to table rows with a v-for/*ngFor/.map(), and keep the cell() logic as a small render helper. The CSS, including the featured-column border technique, ports unchanged.