Basic Table

<table>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First Name</th>
      <th scope="col">Last Name</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
  </tbody>
</table>

Striped Table

<table data-variant="striped">
  ...
</table>

Striped Table

<!-- Striped Table -->
				<table data-variant="striped">
				<thead>
				<tr>
				<th scope="col">Product</th>
				<th scope="col">Quantity</th>
				<th scope="col">Price</th>
				</tr>
				</thead>
				<tbody>
				<tr>
				<td>Item Name</td>
				<td>Qty</td>
				<td>$Price</td>
				</tr>
				</tbody>
				</table>

HTML Structure

Tables use semantic HTML elements with no custom classes required:

• `` - Root table element
  `
  ` - Table header section
  `
  ` - Table body section
  `

  ` - Header cells with scope attribute `

  ` - Data cells Variants Use `data-variant` attribute for table styling variations: Default: Standard table with borders and padding Striped: `data-variant="striped"` - Alternating row backgrounds Hover: Rows automatically receive subtle hover effect Responsive Tables For tables with many columns that overflow on small screens: <div> <table> <!-- ... table content ... --> </table> </div> Key Features Semantic HTML - Uses native ``, ``, ``, ``, ``, `` sections for structure Include `scope="col"` or `scope="row"` on all ` `, ``, `` sections Include `scope` attributes on all header cells Add ` `, ` ` Zero Custom Classes - Framework styles applied directly to elements Scope Attributes - Proper `scope="col"` on header cells for accessibility Data Variant - `data-variant="striped"` for alternating rows Hover States - Automatic subtle hover effect on rows Design Tokens - All colors, borders, spacing from token system Accessibility Always use ` ` elements Provide ` ` element for table title/description Screen readers automatically announce table headers Keyboard navigation works natively Proper heading hierarchy with ` `, ` `, etc. Responsive Behavior Table components adapt to mobile constraints: Mobile (< 768px) On mobile, tables handle small screens intelligently: Horizontal scroll enabled for table overflow Or stacked card layout for mobile-first approach Column headers remain readable Data density optimized for touch interaction Desktop (1024px+) Desktop displays show full table with all features: Multi-column layout fully visible Sorting and filtering interactive Hover states on rows Pagination controls visible Framework Integration Tables use semantic HTML with responsive CSS: Place tables in `.container` for responsive width Framework handles overflow behavior Stripe and hover effects responsive Consider responsive table patterns for data-heavy tables Best Practices Always use proper ` ` for table description Keep table structure simple and logical Use `data-variant="striped"` for readability in large tables Wrap wide tables in overflow container for mobile Never use tables for page layout (use CSS Grid instead) Test with screen readers for proper announcements Use Cases Data Display - Show structured data in rows/columns Comparison - Compare features, prices, specifications Reports - Financial data, analytics, reports Schedules - Timetables, calendars, agendas Pricing - Product pricing with comparison Features Semantic Structure - Built with native HTML5 elements for maximum reliability. Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens. Fully Responsive - Scales perfectly from mobile to desktop screens. No JS Dependency - Core functionality relies on pure CSS for maximum performance. Customizable - Easily extendable via Axiom01's design tokens and modifiers.