Table

Tables display structured data using semantic HTML. Sprout styles <table>, <thead>, <tbody>, <tr>, <th>, and <td> directly.

Use optional classes like .striped, .bordered, or .compact to adjust appearance.

Basic usage

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

  <tbody>
    <tr>
      <td>Alex</td>
      <td>Active</td>
      <td>Admin</td>
    </tr>
    <tr>
      <td>Sam</td>
      <td>Away</td>
      <td>Editor</td>
    </tr>
  </tbody>
</table>

Demo

Project	Status	Owner	Updated
Sprout UI	Active	JDJane Doe	2 hours ago
Alpha Dashboard	Pending	MKMike K.	Yesterday
Legacy API	Deprecated	SRSara R.	3 weeks ago

Variants

Add a class directly to the <table> element.

Class	Description
.striped	Alternating row backgrounds
.bordered	Borders around cells
.compact	Reduced padding for denser layouts

<table class="striped compact">
  <!-- ... -->
</table>

Usage notes

• Use <th> for column headers and keep the table structure semantic.
• Tables work well for dashboards, admin panels, and structured lists.
• For wide tables on smaller screens, wrap the table in .table-wrap so it scrolls horizontally.
• You can combine variants when needed, for example: class="striped compact".
• Tables can include other Sprout components like badges, avatars, or buttons inside cells.