Table

Provides a way to display tabular data.

Basic Table

Name	Status	Role	Position
Phoenix Baker@phoenix	Online	Engineering Manager	Admin	Edit
Kaitlin Hale@kaitlin	Offline	Product Manager	Member	Edit
Kelly Williams@kelly	Online	Frontend Developer	Member	Edit

<div class="o-x-auto w-full b-1 bb-0 bc-silver-2 rad-1 bg-white">
   <table class="w-full ta-l bc-c">
      <thead>
         <tr>
            <th class="bb-1 bc-silver-4 tc-silver-10 fs-sm fw-500 px-4 py-3">Name</th>
            <th class="bb-1 bc-silver-4 tc-silver-10 fs-sm fw-500 px-4 py-3">Status</th>
            <th class="bb-1 bc-silver-4 tc-silver-10 fs-sm fw-500 px-4 py-3">Role</th>
            <th class="bb-1 bc-silver-4 tc-silver-10 fs-sm fw-500 px-4 py-3">Position</th>
            <th class="bb-1 bc-silver-4 tc-silver-10 fs-sm fw-500 px-4 py-3 ta-r"></th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td class="bb-1 bc-silver-2 px-4 py-3 fs-sm tc-black">
               <div class="d-f ai-c g-3">
                  <img src="/img/people/phoenix-baker.jpg" alt="Phoenix Baker" class="w-10 h-10 rad-full of-c" />
                  <div class="d-f fd-c">
                     <span class="fw-600 tc-black">Phoenix Baker</span>
                     <span class="fs-xs tc-silver-10">@phoenix</span>
                  </div>
               </div>
            </td>
            <td class="bb-1 bc-silver-2 px-4 py-3 fs-sm tc-black">
               <span class="d-if ai-c px-2 py- rad-1 fs-xs fw-500 bg-green-1/50 tc-green b-1 bc-green-2">Online</span>
            </td>
            <td class="bb-1 bc-silver-2 px-4 py-3 fs-sm tc-silver-10">Engineering Manager</td>
            <td class="bb-1 bc-silver-2 px-4 py-3 fs-sm tc-silver-10">Admin</td>
            <td class="bb-1 bc-silver-2 px-4 py-3 fs-sm tc-black ta-r">
               <a href="#" class="tc-slate fw-500 td-none h:td-u">Edit</a>
            </td>
         </tr>
         <tr>
            <td class="bb-1 bc-silver-2 px-4 py-3 fs-sm tc-black">
               <div class="d-f ai-c g-3">
                  <img src="/img/people/kaitlin-hale.jpg" alt="Kaitlin Hale" class="w-10 h-10 rad-full of-c" />
                  <div class="d-f fd-c">
                     <span class="fw-600 tc-black">Kaitlin Hale</span>
                     <span class="fs-xs tc-silver-10">@kaitlin</span>
                  </div>
               </div>
            </td>
            <td class="bb-1 bc-silver-2 px-4 py-3 fs-sm tc-black">
               <span class="d-if ai-c px-2 py- rad-1 fs-xs fw-500 bg-red-1/50 tc-red b-1 bc-red-2">Offline</span>
            </td>
            <td class="bb-1 bc-silver-2 px-4 py-3 fs-sm tc-silver-10">Product Manager</td>
            <td class="bb-1 bc-silver-2 px-4 py-3 fs-sm tc-silver-10">Member</td>
            <td class="bb-1 bc-silver-2 px-4 py-3 fs-sm tc-black ta-r">
               <a href="#" class="tc-slate fw-500 td-none h:td-u">Edit</a>
            </td>
         </tr>
         <tr>
            <td class="bb-1 bc-silver-2 px-4 py-3 fs-sm tc-black">
               <div class="d-f ai-c g-3">
                  <img src="/img/people/kelly-williams.jpg" alt="Kelly Williams" class="w-10 h-10 rad-full of-c" />
                  <div class="d-f fd-c">
                     <span class="fw-600 tc-black">Kelly Williams</span>
                     <span class="fs-xs tc-silver-10">@kelly</span>
                  </div>
               </div>
            </td>
            <td class="bb-1 bc-silver-2 px-4 py-3 fs-sm tc-black">
               <span class="d-if ai-c px-2 py- rad-1 fs-xs fw-500 bg-green-1/50 tc-green b-1 bc-green-2">Online</span>
            </td>
            <td class="bb-1 bc-silver-2 px-4 py-3 fs-sm tc-silver-10">Frontend Developer</td>
            <td class="bb-1 bc-silver-2 px-4 py-3 fs-sm tc-silver-10">Member</td>
            <td class="bb-1 bc-silver-2 px-4 py-3 fs-sm tc-black ta-r">
               <a href="#" class="tc-slate fw-500 td-none h:td-u">Edit</a>
            </td>
         </tr>
      </tbody>
   </table>
</div>

Icons

Name	Status	Role	Position
Phoenix Baker@phoenix	Online	Engineering Manager	Admin
Kaitlin Hale@kaitlin	Offline	Product Manager	Member
Kelly Williams@kelly	Online	Frontend Developer	Member

<div class="o-x-auto w-full b-1 bb-0 bc-silver-2 rad-1 bg-white">
   <table class="w-full ta-l bc-c">
      <thead>
         <tr>
            <th class="bb-1 bc-silver-4 tc-silver-10 fs-sm fw-500 px-4 py-3">Name</th>
            <th class="bb-1 bc-silver-4 tc-silver-10 fs-sm fw-500 px-4 py-3">Status</th>
            <th class="bb-1 bc-silver-4 tc-silver-10 fs-sm fw-500 px-4 py-3">Role</th>
            <th class="bb-1 bc-silver-4 tc-silver-10 fs-sm fw-500 px-4 py-3">Position</th>
            <th class="bb-1 bc-silver-4 tc-silver-10 fs-sm fw-500 px-4 py-3 ta-r"></th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td class="bb-1 bc-silver-2 px-4 py-3 fs-sm tc-black">
               <div class="d-f ai-c g-3">
                  <img src="/img/people/phoenix-baker.jpg" alt="Phoenix Baker" class="w-10 h-10 rad-full of-c" />
                  <div class="d-f fd-c">
                     <span class="fw-600 tc-black">Phoenix Baker</span>
                     <span class="fs-xs tc-silver-10">@phoenix</span>
                  </div>
               </div>
            </td>
            <td class="bb-1 bc-silver-2 px-4 py-3 fs-sm tc-black">
               <span class="d-if ai-c px-2 py- rad-1 fs-xs fw-500 bg-green-1/50 tc-green b-1 bc-green-2">Online</span>
            </td>
            <td class="bb-1 bc-silver-2 px-4 py-3 fs-sm tc-silver-10">Engineering Manager</td>
            <td class="bb-1 bc-silver-2 px-4 py-3 fs-sm tc-silver-10">Admin</td>
            <td class="bb-1 bc-silver-2 px-4 py-3 fs-sm tc-black ta-r">
               <a href="#" class="tc-slate fw-500 td-none h:td-u">
                  <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
               </a>
            </td>
         </tr>
         <tr>
            <td class="bb-1 bc-silver-2 px-4 py-3 fs-sm tc-black">
               <div class="d-f ai-c g-3">
                  <img src="/img/people/kaitlin-hale.jpg" alt="Kaitlin Hale" class="w-10 h-10 rad-full of-c" />
                  <div class="d-f fd-c">
                     <span class="fw-600 tc-black">Kaitlin Hale</span>
                     <span class="fs-xs tc-silver-10">@kaitlin</span>
                  </div>
               </div>
            </td>
            <td class="bb-1 bc-silver-2 px-4 py-3 fs-sm tc-black">
               <span class="d-if ai-c px-2 py- rad-1 fs-xs fw-500 bg-red-1/50 tc-red b-1 bc-red-2">Offline</span>
            </td>
            <td class="bb-1 bc-silver-2 px-4 py-3 fs-sm tc-silver-10">Product Manager</td>
            <td class="bb-1 bc-silver-2 px-4 py-3 fs-sm tc-silver-10">Member</td>
            <td class="bb-1 bc-silver-2 px-4 py-3 fs-sm tc-black ta-r">
               <a href="#" class="tc-slate fw-500 td-none h:td-u">
                  <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
               </a>
            </td>
         </tr>
         <tr>
            <td class="bb-1 bc-silver-2 px-4 py-3 fs-sm tc-black">
               <div class="d-f ai-c g-3">
                  <img src="/img/people/kelly-williams.jpg" alt="Kelly Williams" class="w-10 h-10 rad-full of-c" />
                  <div class="d-f fd-c">
                     <span class="fw-600 tc-black">Kelly Williams</span>
                     <span class="fs-xs tc-silver-10">@kelly</span>
                  </div>
               </div>
            </td>
            <td class="bb-1 bc-silver-2 px-4 py-3 fs-sm tc-black">
               <span class="d-if ai-c px-2 py- rad-1 fs-xs fw-500 bg-green-1/50 tc-green b-1 bc-green-2">Online</span>
            </td>
            <td class="bb-1 bc-silver-2 px-4 py-3 fs-sm tc-silver-10">Frontend Developer</td>
            <td class="bb-1 bc-silver-2 px-4 py-3 fs-sm tc-silver-10">Member</td>
            <td class="bb-1 bc-silver-2 px-4 py-3 fs-sm tc-black ta-r">
               <a href="#" class="tc-slate fw-500 td-none h:td-u">
                  <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
               </a>
            </td>
         </tr>
      </tbody>
   </table>
</div>