UI Table Builder

Design, preview & export

Your tables. Beautifully styled.

Build better tables.
Skip the busywork.

Fine-tune borders, shadows, headers, stripes, spacing, and more. Then take your table straight into your project with HTML + Tailwind CSS.

Explore purchase options ↓

Already own the Figma plugin or Adobe Express add-on?
Your existing license unlocks the web editor.

UI Table Builder product cover showing table styling options

Style visually

Adjust the details with familiar, focused controls.

Copy clean code

Export HTML + Tailwind CSS from the licensed editor.

One license, more places

Use your eligible Figma or Adobe Express license on the web.

A little taste of the output

See the table. Take the code.

This fixed example is yours to copy—no license needed. Activate a license to customize your own tables in the editor.

Use the markup in a project with Tailwind CSS installed. Example contact details are fictional.

Design preview

Example team directory
Name Title Email Role
Lindsay Walton Front-end Developer lindsay.walton@example.com Member
Courtney Henry Designer courtney.henry@example.com Admin
Tom Cook Director of Product tom.cook@example.com Member
Whitney Francis Copywriter whitney.francis@example.com Admin
Leonard Krasner Senior Designer leonard.krasner@example.com Owner
Floyd Miles Principal Designer floyd.miles@example.com Member

HTML + Tailwind CSS

<div class="overflow-x-auto rounded-md border border-slate-300 bg-white shadow-md">
  <table class="w-full min-w-[640px] border-collapse text-left text-sm">
    <caption class="sr-only">Example team directory</caption>
    <thead class="bg-slate-100 text-slate-900">
      <tr>
        <th scope="col" class="border-b border-r border-slate-300 px-4 py-3 font-semibold">Name</th>
        <th scope="col" class="border-b border-r border-slate-300 px-4 py-3 font-semibold">Title</th>
        <th scope="col" class="border-b border-r border-slate-300 px-4 py-3 font-semibold">Email</th>
        <th scope="col" class="border-b border-slate-300 px-4 py-3 font-semibold">Role</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-slate-300">
      <tr>
        <th scope="row" class="border-r border-slate-300 px-4 py-4 font-medium text-slate-900">Lindsay Walton</th>
        <td class="border-r border-slate-300 px-4 py-4 text-slate-500">Front-end Developer</td>
        <td class="border-r border-slate-300 px-4 py-4 text-slate-500">lindsay.walton@example.com</td>
        <td class="px-4 py-4 text-slate-500">Member</td>
      </tr>
      <tr>
        <th scope="row" class="border-r border-slate-300 px-4 py-4 font-medium text-slate-900">Courtney Henry</th>
        <td class="border-r border-slate-300 px-4 py-4 text-slate-500">Designer</td>
        <td class="border-r border-slate-300 px-4 py-4 text-slate-500">courtney.henry@example.com</td>
        <td class="px-4 py-4 text-slate-500">Admin</td>
      </tr>
      <tr>
        <th scope="row" class="border-r border-slate-300 px-4 py-4 font-medium text-slate-900">Tom Cook</th>
        <td class="border-r border-slate-300 px-4 py-4 text-slate-500">Director of Product</td>
        <td class="border-r border-slate-300 px-4 py-4 text-slate-500">tom.cook@example.com</td>
        <td class="px-4 py-4 text-slate-500">Member</td>
      </tr>
      <tr>
        <th scope="row" class="border-r border-slate-300 px-4 py-4 font-medium text-slate-900">Whitney Francis</th>
        <td class="border-r border-slate-300 px-4 py-4 text-slate-500">Copywriter</td>
        <td class="border-r border-slate-300 px-4 py-4 text-slate-500">whitney.francis@example.com</td>
        <td class="px-4 py-4 text-slate-500">Admin</td>
      </tr>
      <tr>
        <th scope="row" class="border-r border-slate-300 px-4 py-4 font-medium text-slate-900">Leonard Krasner</th>
        <td class="border-r border-slate-300 px-4 py-4 text-slate-500">Senior Designer</td>
        <td class="border-r border-slate-300 px-4 py-4 text-slate-500">leonard.krasner@example.com</td>
        <td class="px-4 py-4 text-slate-500">Owner</td>
      </tr>
      <tr>
        <th scope="row" class="border-r border-slate-300 px-4 py-4 font-medium text-slate-900">Floyd Miles</th>
        <td class="border-r border-slate-300 px-4 py-4 text-slate-500">Principal Designer</td>
        <td class="border-r border-slate-300 px-4 py-4 text-slate-500">floyd.miles@example.com</td>
        <td class="px-4 py-4 text-slate-500">Member</td>
      </tr>
    </tbody>
  </table>
</div>
Buy me a coffee
Install Figma PluginIn-app purchases

Subscribe to get updates on new features and plugins

Unsubscribe at any time.