Design, preview & export
Fine-tune borders, shadows, headers, stripes, spacing, and more. Then take your table straight into your project with HTML + Tailwind CSS.
Already own the Figma plugin or Adobe Express add-on?
Your existing license unlocks the web editor.
Adjust the details with familiar, focused controls.
Export HTML + Tailwind CSS from the licensed editor.
Use your eligible Figma or Adobe Express license on the web.
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.
| Name | Title | 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 |
<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>Your host. Your preferred plan.
Choose a one-time Figma purchase or an Adobe Express subscription. Both include this web editor with an active license.
Design in Figma. Fine-tune in your browser.
$16USD · one-time
Starting price for 1 user. Team options at checkout.
Create in Adobe Express and your browser.
$4USD / month
Or $24/year, billed annually ($2/month equivalent).
Prices checked on October 23, 2026. Taxes and any currency conversion are shown by Gumroad at checkout. Already own either edition? Activate your existing license above.