Tables

Comprehensive table variants — basic, striped, hoverable, bordered, borderless, dark header, contextual, captioned, compact, responsive, actions, checkboxes, avatars, and status badges.

Basic Table

Simple header and rows with minimal styling.

#NameEmailRoleDate
1Alex Thompsonalex@example.comAdminMar 2, 2026
2Sarah Chensarah@example.comEditorFeb 18, 2026
3Mike Johnsonmike@example.comViewerJan 9, 2026
4Emily Davisemily@example.comEditorMar 5, 2026
5James Wilsonjames@example.comAdminFeb 27, 2026
6Olivia Martinolivia@example.comViewerDec 14, 2025

Striped Rows

Alternating row backgrounds for improved readability.

NameEmailRoleDate
Alex Thompsonalex@example.comAdminMar 2, 2026
Sarah Chensarah@example.comEditorFeb 18, 2026
Mike Johnsonmike@example.comViewerJan 9, 2026
Emily Davisemily@example.comEditorMar 5, 2026
James Wilsonjames@example.comAdminFeb 27, 2026
Olivia Martinolivia@example.comViewerDec 14, 2025

Hoverable Rows

Rows highlight on hover for interactive feedback.

NameEmailRoleAmount
Alex Thompsonalex@example.comAdmin$3,200
Sarah Chensarah@example.comEditor$1,800
Mike Johnsonmike@example.comViewer$950
Emily Davisemily@example.comEditor$2,400
James Wilsonjames@example.comAdmin$5,100
Olivia Martinolivia@example.comViewer$720

Bordered Table

All cell borders visible for dense data display.

NameEmailRoleAmount
Alex Thompsonalex@example.comAdmin$3,200
Sarah Chensarah@example.comEditor$1,800
Mike Johnsonmike@example.comViewer$950
Emily Davisemily@example.comEditor$2,400
James Wilsonjames@example.comAdmin$5,100
Olivia Martinolivia@example.comViewer$720

Borderless Table

Clean look with no borders at all.

NameEmailRoleAmount
Alex Thompsonalex@example.comAdmin$3,200
Sarah Chensarah@example.comEditor$1,800
Mike Johnsonmike@example.comViewer$950
Emily Davisemily@example.comEditor$2,400
James Wilsonjames@example.comAdmin$5,100
Olivia Martinolivia@example.comViewer$720

Dark Header Table

Dark thead contrasting with a light body.

#NameEmailRoleStatus
1Alex Thompsonalex@example.comAdminActive
2Sarah Chensarah@example.comEditorActive
3Mike Johnsonmike@example.comViewerInactive
4Emily Davisemily@example.comEditorPending
5James Wilsonjames@example.comAdminActive
6Olivia Martinolivia@example.comViewerInactive

Contextual Rows

Rows tinted with success, danger, warning, info, and accent backgrounds.

#LabelDetailContext
1Default RowNo special stylingdefault
2Success RowOperation completedsuccess
3Danger RowCritical alert triggereddanger
4Warning RowApproaching limitwarning
5Info RowInformational noticeinfo
6Accent RowFeatured / highlightedaccent

Table with Caption

A caption element displayed below the table.

NameRoleAmount
Alex ThompsonAdmin$3,200
Sarah ChenEditor$1,800
Mike JohnsonViewer$950
Emily DavisEditor$2,400
Showing 4 of 6 users. Updated March 2026.

Small / Compact Table

Tighter padding for data-dense views.

#NameEmailRoleStatusAmount
1Alex Thompsonalex@example.comAdminActive$3,200
2Sarah Chensarah@example.comEditorActive$1,800
3Mike Johnsonmike@example.comViewerInactive$950
4Emily Davisemily@example.comEditorPending$2,400
5James Wilsonjames@example.comAdminActive$5,100
6Olivia Martinolivia@example.comViewerInactive$720

Responsive Table

Horizontal scroll wrapper for wide content on small screens.

#NameEmailRoleStatusDateAmountDepartment
1Alex Thompsonalex@example.comAdminActiveMar 2, 2026$3,200Engineering
2Sarah Chensarah@example.comEditorActiveFeb 18, 2026$1,800Engineering
3Mike Johnsonmike@example.comViewerInactiveJan 9, 2026$950Engineering
4Emily Davisemily@example.comEditorPendingMar 5, 2026$2,400Engineering
5James Wilsonjames@example.comAdminActiveFeb 27, 2026$5,100Engineering
6Olivia Martinolivia@example.comViewerInactiveDec 14, 2025$720Engineering

Table with Actions

Edit, view, and delete icon buttons in the last column.

NameEmailRoleStatusActions
Alex Thompsonalex@example.comAdminActive
Sarah Chensarah@example.comEditorActive
Mike Johnsonmike@example.comViewerInactive
Emily Davisemily@example.comEditorPending
James Wilsonjames@example.comAdminActive
Olivia Martinolivia@example.comViewerInactive

Table with Checkboxes

Checkbox in first column with select-all in header.

NameEmailRoleStatus
Alex Thompsonalex@example.comAdminActive
Sarah Chensarah@example.comEditorActive
Mike Johnsonmike@example.comViewerInactive
Emily Davisemily@example.comEditorPending
James Wilsonjames@example.comAdminActive
Olivia Martinolivia@example.comViewerInactive

Table with Avatars

User avatar with name in the first column.

UserEmailRoleDateAmount
AT
Alex Thompson
alex@example.comAdminMar 2, 2026$3,200
SC
Sarah Chen
sarah@example.comEditorFeb 18, 2026$1,800
MJ
Mike Johnson
mike@example.comViewerJan 9, 2026$950
ED
Emily Davis
emily@example.comEditorMar 5, 2026$2,400
JW
James Wilson
james@example.comAdminFeb 27, 2026$5,100
OM
Olivia Martin
olivia@example.comViewerDec 14, 2025$720

Table with Status Badges

Status column with colored badges for quick visual scanning.

#NameEmailRoleStatusDateAmount
1Alex Thompsonalex@example.comAdminActiveMar 2, 2026$3,200
2Sarah Chensarah@example.comEditorActiveFeb 18, 2026$1,800
3Mike Johnsonmike@example.comViewerInactiveJan 9, 2026$950
4Emily Davisemily@example.comEditorPendingMar 5, 2026$2,400
5James Wilsonjames@example.comAdminActiveFeb 27, 2026$5,100
6Olivia Martinolivia@example.comViewerInactiveDec 14, 2025$720