Table

Overview

Tables present structured information using rows and columns, making them ideal for datasets, reports, pricing information, and comparisons. MiniKit styles native HTML tables while preserving semantic markup, accessibility, and browser behavior.

Basic Usage

Build tables using standard HTML elements including table, thead, tbody, tr, th, and td.

<table>
  <thead>
    <tr><th>Name</th><th>Role</th><th>Status</th></tr>
  </thead>
  <tbody>
    <tr><td>John Doe</td><td>Developer</td><td>Active</td></tr>
    <tr><td>Alex Brown</td><td>Product Manager</td><td>Active</td></tr>
    <tr><td>Jane Smith</td><td>Designer</td><td>Offline</td></tr>
  </tbody>
</table>

Use table headers to describe the contents of each column and keep related data grouped within the table body.

Caption

Use a caption to describe the purpose of the table.

<table>
    <caption>Employee Directory</caption>

    <thead>
      <tr>
        <th>Name</th>
        <th>Role</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>John Doe</td>
        <td>Developer</td>
      </tr>
    </tbody>
  </table>

Content Alignment

Text values are typically left-aligned, while numeric values are easier to compare when aligned to the right.

<table>
  <thead>
    <tr><th>Product</th><th class="text-right">Price</th><th class="text-right">Stock</th></tr>
  </thead>
  <tbody>
    <tr><td>Keyboard</td><td class="text-right">$89</td><td class="text-right">24</td></tr>
    <tr><td>Mouse</td><td class="text-right">$49</td><td class="text-right">56</td></tr>
    <tr><td>Monitor</td><td class="text-right">$399</td><td class="text-right">12</td></tr>
  </tbody>
</table>

Consistent alignment improves readability, especially when working with numerical data.

Accessibility

Use semantic table elements so assistive technologies can understand relationships between rows and columns.

• Always include table headers using th.
• Use thead, tbody, and tfoot where appropriate.
• Add a caption for complex tables that require additional context.
• Use scope="col" and scope="row" for header cells when appropriate.
• Avoid using tables for layout purposes.

API