Table
Rows and columns for structured data display.
<div class="mx-auto w-full border border-black-100 dark:border-black-700 rounded-8px overflow-auto w-[725px]">
<table class="w-full">
<thead>
<tr class="text-left bg-black-50 dark:bg-black-800">
<th
class="p-8px text-black-700 dark:text-black-100 text-p4 [&_svg]:inline [&_svg]:ms-2px [&_svg]:transition-all [&_svg]:text-black-400 hover:[&_svg]:text-black-700 dark:hover:[&_svg]:text-black-100 w-32px"
scope="row">
<svg
width="14"
height="14"
viewbox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M4.08325 8.74967L6.99992 11.6663L9.91659 8.74967M4.08325 5.24967L6.99992 2.33301L9.91659 5.24967"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round">
</path>
</svg>
</th>
<th
class="p-8px text-black-700 dark:text-black-100 text-p4 [&_svg]:inline [&_svg]:ms-2px [&_svg]:transition-all [&_svg]:text-black-400 hover:[&_svg]:text-black-700 dark:hover:[&_svg]:text-black-100"
scope="col">
Title
<svg
width="14"
height="14"
viewbox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M4.08325 8.74967L6.99992 11.6663L9.91659 8.74967M4.08325 5.24967L6.99992 2.33301L9.91659 5.24967"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round">
</path>
</svg>
</th>
<th
class="p-8px text-black-700 dark:text-black-100 text-p4 [&_svg]:inline [&_svg]:ms-2px [&_svg]:transition-all [&_svg]:text-black-400 hover:[&_svg]:text-black-700 dark:hover:[&_svg]:text-black-100"
scope="col">
Title
<svg
width="14"
height="14"
viewbox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M4.08325 8.74967L6.99992 11.6663L9.91659 8.74967M4.08325 5.24967L6.99992 2.33301L9.91659 5.24967"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round">
</path>
</svg>
</th>
<th
class="p-8px text-black-700 dark:text-black-100 text-p4 [&_svg]:inline [&_svg]:ms-2px [&_svg]:transition-all [&_svg]:text-black-400 hover:[&_svg]:text-black-700 dark:hover:[&_svg]:text-black-100"
scope="col">
Title
<svg
width="14"
height="14"
viewbox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M4.08325 8.74967L6.99992 11.6663L9.91659 8.74967M4.08325 5.24967L6.99992 2.33301L9.91659 5.24967"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round">
</path>
</svg>
</th>
<th
class="p-8px text-black-700 dark:text-black-100 text-p4 [&_svg]:inline [&_svg]:ms-2px [&_svg]:transition-all [&_svg]:text-black-400 hover:[&_svg]:text-black-700 dark:hover:[&_svg]:text-black-100 w-[100px]"
scope="col">
Title
<svg
width="14"
height="14"
viewbox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M4.08325 8.74967L6.99992 11.6663L9.91659 8.74967M4.08325 5.24967L6.99992 2.33301L9.91659 5.24967"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round">
</path>
</svg>
</th>
</tr>
</thead>
<tbody class="text-p3">
<tr class="border-t border-black-100 dark:border-black-700">
<th class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
<label class="flex gap-8px text-p2 items-center relative has-disabled:cursor-no-drop cursor-pointer">
<input
type="checkbox"
name="table-checkbox-26"
class="peer w-16px h-16px rounded-4px appearance-none border transition-all cursor-pointer bg-white border-black-300 hover:border-black active:border-black checked:border-black checked:bg-black checked:hover:bg-black-800 disabled:bg-black-50 disabled:border-black-100">
</input>
<svg
width="10"
height="8"
viewbox="0 0 10 8"
fill="none"
class="absolute left-[3px] hidden fill-white peer-checked:flex">
<path d="M3.84217 5.34246C3.72002 5.46514 3.5214 5.46514 3.39926 5.34246L1.63392 3.5693C1.33263 3.26667 0.842723 3.26667 0.541434 3.5693C0.242022 3.87003 0.242022 4.35622 0.541433 4.65696L3.1778 7.305C3.42209 7.55038 3.81933 7.55038 4.06362 7.30501L9.4584 1.88633C9.75781 1.58559 9.75781 1.0994 9.4584 0.79866C9.15711 0.496037 8.66721 0.496037 8.36592 0.798661L3.84217 5.34246Z">
</path>
</svg>
</label>
</th>
<td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
Text
</td>
<td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
Text
</td>
<td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
Text
</td>
<td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
<div class="flex gap-8px items-center rounded-full py-2px px-8px text-btn3 text-center border cursor-default transition-all duration-300 [&.disabled]:opacity-40 whitespace-nowrap bg-black-200 border-black-200 dark:bg-black-600 dark:border-black-600 text-black-800 dark:text-black-50 hover:bg-black-300 hover:border-black-300 dark:hover:bg-black-500 dark:hover:border-black-500 table-caption">
Badge
</div>
</td>
</tr>
<tr class="border-t border-black-100 dark:border-black-700">
<th class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
<label class="flex gap-8px text-p2 items-center relative has-disabled:cursor-no-drop cursor-pointer">
<input
type="checkbox"
name="table-checkbox-44"
class="peer w-16px h-16px rounded-4px appearance-none border transition-all cursor-pointer bg-white border-black-300 hover:border-black active:border-black checked:border-black checked:bg-black checked:hover:bg-black-800 disabled:bg-black-50 disabled:border-black-100">
</input>
<svg
width="10"
height="8"
viewbox="0 0 10 8"
fill="none"
class="absolute left-[3px] hidden fill-white peer-checked:flex">
<path d="M3.84217 5.34246C3.72002 5.46514 3.5214 5.46514 3.39926 5.34246L1.63392 3.5693C1.33263 3.26667 0.842723 3.26667 0.541434 3.5693C0.242022 3.87003 0.242022 4.35622 0.541433 4.65696L3.1778 7.305C3.42209 7.55038 3.81933 7.55038 4.06362 7.30501L9.4584 1.88633C9.75781 1.58559 9.75781 1.0994 9.4584 0.79866C9.15711 0.496037 8.66721 0.496037 8.36592 0.798661L3.84217 5.34246Z">
</path>
</svg>
</label>
</th>
<td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
Subtitle
</td>
<td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
Text
</td>
<td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
Text
</td>
<td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
<div class="flex gap-8px items-center rounded-full py-2px px-8px text-btn3 text-center border cursor-default transition-all duration-300 [&.disabled]:opacity-40 whitespace-nowrap bg-black-200 border-black-200 dark:bg-black-600 dark:border-black-600 text-black-800 dark:text-black-50 hover:bg-black-300 hover:border-black-300 dark:hover:bg-black-500 dark:hover:border-black-500 table-caption">
Badge
</div>
</td>
</tr>
<tr class="border-t border-black-100 dark:border-black-700">
<th class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
<label class="flex gap-8px text-p2 items-center relative has-disabled:cursor-no-drop cursor-pointer">
<input
type="checkbox"
name="table-checkbox-21"
class="peer w-16px h-16px rounded-4px appearance-none border transition-all cursor-pointer bg-white border-black-300 hover:border-black active:border-black checked:border-black checked:bg-black checked:hover:bg-black-800 disabled:bg-black-50 disabled:border-black-100">
</input>
<svg
width="10"
height="8"
viewbox="0 0 10 8"
fill="none"
class="absolute left-[3px] hidden fill-white peer-checked:flex">
<path d="M3.84217 5.34246C3.72002 5.46514 3.5214 5.46514 3.39926 5.34246L1.63392 3.5693C1.33263 3.26667 0.842723 3.26667 0.541434 3.5693C0.242022 3.87003 0.242022 4.35622 0.541433 4.65696L3.1778 7.305C3.42209 7.55038 3.81933 7.55038 4.06362 7.30501L9.4584 1.88633C9.75781 1.58559 9.75781 1.0994 9.4584 0.79866C9.15711 0.496037 8.66721 0.496037 8.36592 0.798661L3.84217 5.34246Z">
</path>
</svg>
</label>
</th>
<td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
Description
</td>
<td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
Text
</td>
<td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
Text
</td>
<td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
<div class="flex gap-8px items-center rounded-full py-2px px-8px text-btn3 text-center border cursor-default transition-all duration-300 [&.disabled]:opacity-40 whitespace-nowrap bg-black-200 border-black-200 dark:bg-black-600 dark:border-black-600 text-black-800 dark:text-black-50 hover:bg-black-300 hover:border-black-300 dark:hover:bg-black-500 dark:hover:border-black-500 table-caption">
Badge
</div>
</td>
</tr>
<tr class="border-t border-black-100 dark:border-black-700">
<th class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
<label class="flex gap-8px text-p2 items-center relative has-disabled:cursor-no-drop cursor-pointer">
<input
type="checkbox"
name="table-checkbox-51"
class="peer w-16px h-16px rounded-4px appearance-none border transition-all cursor-pointer bg-white border-black-300 hover:border-black active:border-black checked:border-black checked:bg-black checked:hover:bg-black-800 disabled:bg-black-50 disabled:border-black-100">
</input>
<svg
width="10"
height="8"
viewbox="0 0 10 8"
fill="none"
class="absolute left-[3px] hidden fill-white peer-checked:flex">
<path d="M3.84217 5.34246C3.72002 5.46514 3.5214 5.46514 3.39926 5.34246L1.63392 3.5693C1.33263 3.26667 0.842723 3.26667 0.541434 3.5693C0.242022 3.87003 0.242022 4.35622 0.541433 4.65696L3.1778 7.305C3.42209 7.55038 3.81933 7.55038 4.06362 7.30501L9.4584 1.88633C9.75781 1.58559 9.75781 1.0994 9.4584 0.79866C9.15711 0.496037 8.66721 0.496037 8.36592 0.798661L3.84217 5.34246Z">
</path>
</svg>
</label>
</th>
<td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
Header
</td>
<td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
Text
</td>
<td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
Text
</td>
<td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
<div class="flex gap-8px items-center rounded-full py-2px px-8px text-btn3 text-center border cursor-default transition-all duration-300 [&.disabled]:opacity-40 whitespace-nowrap bg-black-200 border-black-200 dark:bg-black-600 dark:border-black-600 text-black-800 dark:text-black-50 hover:bg-black-300 hover:border-black-300 dark:hover:bg-black-500 dark:hover:border-black-500 table-caption">
Badge
</div>
</td>
</tr>
</tbody>
</table>
</div>
Usage
Just copy-paste the HTML or Figma code into your project.