Components

Tables

Choose a focused guide for semantic table structure, responsive behavior, visual styles, pagination, or DataTables.net.

Components guideCopy-ready referencev0.7.0 current

Components

Tables

Use tables for genuinely tabular relationships: information users compare by row and column. Start with native table structure, then choose a focused guide for responsive behavior, visual styles, pagination, or the DataTables.net adapter.

Semantic headers, body, and footer

A caption names the dataset, scoped headers expose its row-and-column relationships, and the footer summarizes values without pretending to be another record.

Workspace usage by plan
Plan	Workspaces	Members
Starter	18	42
Team	12	86
Total	30	128

HTML · Table anatomy

<div class="bs-table-responsive" role="region" tabindex="0" aria-label="Workspace usage by plan">
  <table class="bs-table">
    <caption>Workspace usage by plan</caption>
    <thead><tr><th scope="col">Plan</th><th class="bs-table-cell-numeric" scope="col">Workspaces</th><th class="bs-table-cell-numeric" scope="col">Members</th></tr></thead>
    <tbody>
      <tr><th scope="row">Starter</th><td class="bs-table-cell-numeric">18</td><td class="bs-table-cell-numeric">42</td></tr>
      <tr><th scope="row">Team</th><td class="bs-table-cell-numeric">12</td><td class="bs-table-cell-numeric">86</td></tr>
    </tbody>
    <tfoot><tr><th scope="row">Total</th><td class="bs-table-cell-numeric">30</td><td class="bs-table-cell-numeric">128</td></tr></tfoot>
  </table>
</div>

Choose a table topic

Table fundamentalsCaptions, headers, footers, responsive overflow, sticky columns, sorting, and empty states Table stylesStriped and hoverable records, bordered compact matrices, and borderless comparisons PaginationCurrent and disabled states, responsive page ranges, and compact or large controls DataTables.netA complete DataTables 3 installation, initialization, and fully functional live example

Start with semantics: use a table only when both row and column relationships matter. Boobstrap styles native markup; your application or data library continues to own sorting, pagination, filtering, and loading.

Structure

Use <caption>, <thead>, <tbody>, and <tfoot> for their real purposes. Add scope="col" or scope="row" to unambiguous headers.

Choose a guide

Start with fundamentals, add only the visual modifiers your dataset needs, then choose application-owned pagination or the DataTables.net integration.

Behavior ownership

Boobstrap provides presentation. Your application or data library owns row ordering, filters, loading, current-page state, and result announcements.

Core table API

Every guide builds on these three primitives. The child references document the optional classes alongside the examples they affect.

Core table classes and their purposes
Class	Purpose	Use it on
`.bs-table`	Provides readable cells, semantic header groups, row dividers, captions, and footer treatment.	The native `<table>`.
`.bs-table-responsive`	Contains horizontal overflow without widening the page.	A named, keyboard-focusable wrapper around the table.
`.bs-table-cell-numeric`	Right-aligns tabular numbers and prevents unwanted wrapping.	Matching header and data cells.