Tables

Flexible table component with color variants, striping, hover states, borders, and responsive behavior.

Basic Table #

A simple table with default styling.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	Bird	@twitter

<%= table do |t| %>
  <% t.with_head do |head| %>
    <% head.with_row do |row| %>
      <% row.with_cell "#" %>
      <% row.with_cell "First" %>
      <% row.with_cell "Last" %>
      <% row.with_cell "Handle" %>
    <% end %>
  <% end %>

  <% t.with_body do |body| %>
    <% body.with_row do |row| %>
      <% row.with_cell "1", scope: "row" %>
      <% row.with_cell "Mark" %>
      <% row.with_cell "Otto" %>
      <% row.with_cell "@mdo" %>
    <% end %>
    <% body.with_row do |row| %>
      <% row.with_cell "2", scope: "row" %>
      <% row.with_cell "Jacob" %>
      <% row.with_cell "Thornton" %>
      <% row.with_cell "@fat" %>
    <% end %>
    <% body.with_row do |row| %>
      <% row.with_cell "3", scope: "row" %>
      <% row.with_cell "Larry" %>
      <% row.with_cell "Bird" %>
      <% row.with_cell "@twitter" %>
    <% end %>
  <% end %>
<% end %>

new_table do |table|
  table.build_head do |head|
    head.build_row do |row|
      row.build_cell "#"
      row.build_cell "First"
      row.build_cell "Last"
      row.build_cell "Handle"
    end
  end

  table.build_body do |body|
    body.build_row do |row|
      row.build_cell "1", scope: "row"
      row.build_cell "Mark"
      row.build_cell "Otto"
      row.build_cell "@mdo"
    end

    body.build_row do |row|
      row.build_cell "2", scope: "row"
      row.build_cell "Jacob"
      row.build_cell "Thornton"
      row.build_cell "@fat"
    end

    body.build_row do |row|
      row.build_cell "3", scope: "row"
      row.build_cell "Larry"
      row.build_cell "Bird"
      row.build_cell "@twitter"
    end
  end
end

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td scope="row">1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>

    <tr>
      <td scope="row">2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>

    <tr>
      <td scope="row">3</td>
      <td>Larry</td>
      <td>Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Variants #

Apply color variants to individual rows using the theme's semantic color system.

#	Variant	First	Last	Handle
1	Light Primary	Mark	Otto	@mdo
2	Light Secondary	Jacob	Thornton	@fat
3	Dark Primary	Larry	Bird	@twitter
4	Dark Secondary	Sarah	Connor	@sarah
5	Success	John	Doe	@johndoe
6	Danger	Jane	Smith	@janesmith
7	Warning	Bob	Johnson	@bob
8	Info	Alice	Williams	@alice

<%= table do |t| %>
  <% t.with_head do |head| %>
    <% head.with_row do |row| %>
      <% row.with_cell "#" %>
      <% row.with_cell "Variant" %>
      <% row.with_cell "First" %>
      <% row.with_cell "Last" %>
      <% row.with_cell "Handle" %>
    <% end %>
  <% end %>

  <% t.with_body do |body| %>
    <% body.with_row variant: "light-primary" do |row| %>
      <% row.with_cell "1", scope: "row" %>
      <% row.with_cell "Light Primary" %>
      <% row.with_cell "Mark" %>
      <% row.with_cell "Otto" %>
      <% row.with_cell "@mdo" %>
    <% end %>
    <% body.with_row variant: "light-secondary" do |row| %>
      <% row.with_cell "2", scope: "row" %>
      <% row.with_cell "Light Secondary" %>
      <% row.with_cell "Jacob" %>
      <% row.with_cell "Thornton" %>
      <% row.with_cell "@fat" %>
    <% end %>
    <% body.with_row variant: "dark-primary" do |row| %>
      <% row.with_cell "3", scope: "row" %>
      <% row.with_cell "Dark Primary" %>
      <% row.with_cell "Larry" %>
      <% row.with_cell "Bird" %>
      <% row.with_cell "@twitter" %>
    <% end %>
    <% body.with_row variant: "dark-secondary" do |row| %>
      <% row.with_cell "4", scope: "row" %>
      <% row.with_cell "Dark Secondary" %>
      <% row.with_cell "Sarah" %>
      <% row.with_cell "Connor" %>
      <% row.with_cell "@sarah" %>
    <% end %>
    <% body.with_row variant: "success" do |row| %>
      <% row.with_cell "5", scope: "row" %>
      <% row.with_cell "Success" %>
      <% row.with_cell "John" %>
      <% row.with_cell "Doe" %>
      <% row.with_cell "@johndoe" %>
    <% end %>
    <% body.with_row variant: "danger" do |row| %>
      <% row.with_cell "6", scope: "row" %>
      <% row.with_cell "Danger" %>
      <% row.with_cell "Jane" %>
      <% row.with_cell "Smith" %>
      <% row.with_cell "@janesmith" %>
    <% end %>
    <% body.with_row variant: "warning" do |row| %>
      <% row.with_cell "7", scope: "row" %>
      <% row.with_cell "Warning" %>
      <% row.with_cell "Bob" %>
      <% row.with_cell "Johnson" %>
      <% row.with_cell "@bob" %>
    <% end %>
    <% body.with_row variant: "info" do |row| %>
      <% row.with_cell "8", scope: "row" %>
      <% row.with_cell "Info" %>
      <% row.with_cell "Alice" %>
      <% row.with_cell "Williams" %>
      <% row.with_cell "@alice" %>
    <% end %>
  <% end %>
<% end %>

new_table do |table|
  table.build_head do |head|
    head.build_row do |row|
      row.build_cell "#"
      row.build_cell "Variant"
      row.build_cell "First"
      row.build_cell "Last"
      row.build_cell "Handle"
    end
  end

  table.build_body do |body|
    body.build_row(variant: "light-primary") do |row|
      row.build_cell "1", scope: "row"
      row.build_cell "Light Primary"
      row.build_cell "Mark"
      row.build_cell "Otto"
      row.build_cell "@mdo"
    end

    body.build_row(variant: "light-secondary") do |row|
      row.build_cell "2", scope: "row"
      row.build_cell "Light Secondary"
      row.build_cell "Jacob"
      row.build_cell "Thornton"
      row.build_cell "@fat"
    end

    body.build_row(variant: "dark-primary") do |row|
      row.build_cell "3", scope: "row"
      row.build_cell "Dark Primary"
      row.build_cell "Larry"
      row.build_cell "Bird"
      row.build_cell "@twitter"
    end

    body.build_row(variant: "dark-secondary") do |row|
      row.build_cell "4", scope: "row"
      row.build_cell "Dark Secondary"
      row.build_cell "Sarah"
      row.build_cell "Connor"
      row.build_cell "@sarah"
    end

    body.build_row(variant: "success") do |row|
      row.build_cell "5", scope: "row"
      row.build_cell "Success"
      row.build_cell "John"
      row.build_cell "Doe"
      row.build_cell "@johndoe"
    end

    body.build_row(variant: "danger") do |row|
      row.build_cell "6", scope: "row"
      row.build_cell "Danger"
      row.build_cell "Jane"
      row.build_cell "Smith"
      row.build_cell "@janesmith"
    end

    body.build_row(variant: "warning") do |row|
      row.build_cell "7", scope: "row"
      row.build_cell "Warning"
      row.build_cell "Bob"
      row.build_cell "Johnson"
      row.build_cell "@bob"
    end

    body.build_row(variant: "info") do |row|
      row.build_cell "8", scope: "row"
      row.build_cell "Info"
      row.build_cell "Alice"
      row.build_cell "Williams"
      row.build_cell "@alice"
    end
  end
end

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Variant</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>

  <tbody>
    <tr class="table-light-primary">
      <td scope="row">1</td>
      <td>Light Primary</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>

    <tr class="table-light-secondary">
      <td scope="row">2</td>
      <td>Light Secondary</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>

    <tr class="table-dark-primary">
      <td scope="row">3</td>
      <td>Dark Primary</td>
      <td>Larry</td>
      <td>Bird</td>
      <td>@twitter</td>
    </tr>

    <tr class="table-dark-secondary">
      <td scope="row">4</td>
      <td>Dark Secondary</td>
      <td>Sarah</td>
      <td>Connor</td>
      <td>@sarah</td>
    </tr>

    <tr class="table-success">
      <td scope="row">5</td>
      <td>Success</td>
      <td>John</td>
      <td>Doe</td>
      <td>@johndoe</td>
    </tr>

    <tr class="table-danger">
      <td scope="row">6</td>
      <td>Danger</td>
      <td>Jane</td>
      <td>Smith</td>
      <td>@janesmith</td>
    </tr>

    <tr class="table-warning">
      <td scope="row">7</td>
      <td>Warning</td>
      <td>Bob</td>
      <td>Johnson</td>
      <td>@bob</td>
    </tr>

    <tr class="table-info">
      <td scope="row">8</td>
      <td>Info</td>
      <td>Alice</td>
      <td>Williams</td>
      <td>@alice</td>
    </tr>
  </tbody>
</table>

Accented Tables #

Add visual emphasis to your tables with accent styles like striping, hovering, and borders to help organize and highlight your data.

Striped #

Add zebra-striping to any table row within the <tbody>.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	Bird	@twitter
4	John	Doe	@johndoe

<%= table(striped: true) do |t| %>
  <% t.with_head do |head| %>
    <% head.with_row do |row| %>
      <% row.with_cell "#" %>
      <% row.with_cell "First" %>
      <% row.with_cell "Last" %>
      <% row.with_cell "Handle" %>
    <% end %>
  <% end %>

  <% t.with_body do |body| %>
    <% body.with_row do |row| %>
      <% row.with_cell "1", scope: "row" %>
      <% row.with_cell "Mark" %>
      <% row.with_cell "Otto" %>
      <% row.with_cell "@mdo" %>
    <% end %>
    <% body.with_row do |row| %>
      <% row.with_cell "2", scope: "row" %>
      <% row.with_cell "Jacob" %>
      <% row.with_cell "Thornton" %>
      <% row.with_cell "@fat" %>
    <% end %>
    <% body.with_row do |row| %>
      <% row.with_cell "3", scope: "row" %>
      <% row.with_cell "Larry" %>
      <% row.with_cell "Bird" %>
      <% row.with_cell "@twitter" %>
    <% end %>
    <% body.with_row do |row| %>
      <% row.with_cell "4", scope: "row" %>
      <% row.with_cell "John" %>
      <% row.with_cell "Doe" %>
      <% row.with_cell "@johndoe" %>
    <% end %>
  <% end %>
<% end %>

new_table(striped: true) do |table|
  table.build_head do |head|
    head.build_row do |row|
      row.build_cell "#"
      row.build_cell "First"
      row.build_cell "Last"
      row.build_cell "Handle"
    end
  end

  table.build_body do |body|
    body.build_row do |row|
      row.build_cell "1", scope: "row"
      row.build_cell "Mark"
      row.build_cell "Otto"
      row.build_cell "@mdo"
    end

    body.build_row do |row|
      row.build_cell "2", scope: "row"
      row.build_cell "Jacob"
      row.build_cell "Thornton"
      row.build_cell "@fat"
    end

    body.build_row do |row|
      row.build_cell "3", scope: "row"
      row.build_cell "Larry"
      row.build_cell "Bird"
      row.build_cell "@twitter"
    end

    body.build_row do |row|
      row.build_cell "4", scope: "row"
      row.build_cell "John"
      row.build_cell "Doe"
      row.build_cell "@johndoe"
    end
  end
end

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td scope="row">1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>

    <tr>
      <td scope="row">2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>

    <tr>
      <td scope="row">3</td>
      <td>Larry</td>
      <td>Bird</td>
      <td>@twitter</td>
    </tr>

    <tr>
      <td scope="row">4</td>
      <td>John</td>
      <td>Doe</td>
      <td>@johndoe</td>
    </tr>
  </tbody>
</table>

Hoverable #

Add hover state on table rows.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	Bird	@twitter

<%= table(hover: true) do |t| %>
  <% t.with_head do |head| %>
    <% head.with_row do |row| %>
      <% row.with_cell "#" %>
      <% row.with_cell "First" %>
      <% row.with_cell "Last" %>
      <% row.with_cell "Handle" %>
    <% end %>
  <% end %>

  <% t.with_body do |body| %>
    <% body.with_row do |row| %>
      <% row.with_cell "1", scope: "row" %>
      <% row.with_cell "Mark" %>
      <% row.with_cell "Otto" %>
      <% row.with_cell "@mdo" %>
    <% end %>
    <% body.with_row do |row| %>
      <% row.with_cell "2", scope: "row" %>
      <% row.with_cell "Jacob" %>
      <% row.with_cell "Thornton" %>
      <% row.with_cell "@fat" %>
    <% end %>
    <% body.with_row do |row| %>
      <% row.with_cell "3", scope: "row" %>
      <% row.with_cell "Larry" %>
      <% row.with_cell "Bird" %>
      <% row.with_cell "@twitter" %>
    <% end %>
  <% end %>
<% end %>

new_table(hover: true) do |table|
  table.build_head do |head|
    head.build_row do |row|
      row.build_cell "#"
      row.build_cell "First"
      row.build_cell "Last"
      row.build_cell "Handle"
    end
  end

  table.build_body do |body|
    body.build_row do |row|
      row.build_cell "1", scope: "row"
      row.build_cell "Mark"
      row.build_cell "Otto"
      row.build_cell "@mdo"
    end

    body.build_row do |row|
      row.build_cell "2", scope: "row"
      row.build_cell "Jacob"
      row.build_cell "Thornton"
      row.build_cell "@fat"
    end

    body.build_row do |row|
      row.build_cell "3", scope: "row"
      row.build_cell "Larry"
      row.build_cell "Bird"
      row.build_cell "@twitter"
    end
  end
end

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td scope="row">1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>

    <tr>
      <td scope="row">2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>

    <tr>
      <td scope="row">3</td>
      <td>Larry</td>
      <td>Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Active #

Highlight a table row with the table-active class.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	Bird	@twitter

<%= table do |t| %>
  <% t.with_head do |head| %>
    <% head.with_row do |row| %>
      <% row.with_cell "#" %>
      <% row.with_cell "First" %>
      <% row.with_cell "Last" %>
      <% row.with_cell "Handle" %>
    <% end %>
  <% end %>

  <% t.with_body do |body| %>
    <% body.with_row do |row| %>
      <% row.with_cell "1", scope: "row" %>
      <% row.with_cell "Mark" %>
      <% row.with_cell "Otto" %>
      <% row.with_cell "@mdo" %>
    <% end %>
    <% body.with_row active: true do |row| %>
      <% row.with_cell "2", scope: "row" %>
      <% row.with_cell "Jacob" %>
      <% row.with_cell "Thornton" %>
      <% row.with_cell "@fat" %>
    <% end %>
    <% body.with_row do |row| %>
      <% row.with_cell "3", scope: "row" %>
      <% row.with_cell "Larry" %>
      <% row.with_cell "Bird" %>
      <% row.with_cell "@twitter" %>
    <% end %>
  <% end %>
<% end %>

new_table do |table|
  table.build_head do |head|
    head.build_row do |row|
      row.build_cell "#"
      row.build_cell "First"
      row.build_cell "Last"
      row.build_cell "Handle"
    end
  end

  table.build_body do |body|
    body.build_row do |row|
      row.build_cell "1", scope: "row"
      row.build_cell "Mark"
      row.build_cell "Otto"
      row.build_cell "@mdo"
    end

    body.build_row(active: true) do |row|
      row.build_cell "2", scope: "row"
      row.build_cell "Jacob"
      row.build_cell "Thornton"
      row.build_cell "@fat"
    end

    body.build_row do |row|
      row.build_cell "3", scope: "row"
      row.build_cell "Larry"
      row.build_cell "Bird"
      row.build_cell "@twitter"
    end
  end
end

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td scope="row">1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>

    <tr class="table-active">
      <td scope="row">2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>

    <tr>
      <td scope="row">3</td>
      <td>Larry</td>
      <td>Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Borders #

Add borders to your tables to create visual separation between cells and rows. Choose from bordered, borderless, or border-top styles.

Bordered #

Add borders on all sides of the table and cells.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	Bird	@twitter

<%= table(bordered: true) do |t| %>
  <% t.with_head do |head| %>
    <% head.with_row do |row| %>
      <% row.with_cell "#" %>
      <% row.with_cell "First" %>
      <% row.with_cell "Last" %>
      <% row.with_cell "Handle" %>
    <% end %>
  <% end %>

  <% t.with_body do |body| %>
    <% body.with_row do |row| %>
      <% row.with_cell "1", scope: "row" %>
      <% row.with_cell "Mark" %>
      <% row.with_cell "Otto" %>
      <% row.with_cell "@mdo" %>
    <% end %>
    <% body.with_row do |row| %>
      <% row.with_cell "2", scope: "row" %>
      <% row.with_cell "Jacob" %>
      <% row.with_cell "Thornton" %>
      <% row.with_cell "@fat" %>
    <% end %>
    <% body.with_row do |row| %>
      <% row.with_cell "3", scope: "row" %>
      <% row.with_cell "Larry" %>
      <% row.with_cell "Bird" %>
      <% row.with_cell "@twitter" %>
    <% end %>
  <% end %>
<% end %>

new_table(bordered: true) do |table|
  table.build_head do |head|
    head.build_row do |row|
      row.build_cell "#"
      row.build_cell "First"
      row.build_cell "Last"
      row.build_cell "Handle"
    end
  end

  table.build_body do |body|
    body.build_row do |row|
      row.build_cell "1", scope: "row"
      row.build_cell "Mark"
      row.build_cell "Otto"
      row.build_cell "@mdo"
    end

    body.build_row do |row|
      row.build_cell "2", scope: "row"
      row.build_cell "Jacob"
      row.build_cell "Thornton"
      row.build_cell "@fat"
    end

    body.build_row do |row|
      row.build_cell "3", scope: "row"
      row.build_cell "Larry"
      row.build_cell "Bird"
      row.build_cell "@twitter"
    end
  end
end

<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td scope="row">1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>

    <tr>
      <td scope="row">2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>

    <tr>
      <td scope="row">3</td>
      <td>Larry</td>
      <td>Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

No borders #

Remove all borders from the table.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	Bird	@twitter

<%= table(borderless: true) do |t| %>
  <% t.with_head do |head| %>
    <% head.with_row do |row| %>
      <% row.with_cell "#" %>
      <% row.with_cell "First" %>
      <% row.with_cell "Last" %>
      <% row.with_cell "Handle" %>
    <% end %>
  <% end %>

  <% t.with_body do |body| %>
    <% body.with_row do |row| %>
      <% row.with_cell "1", scope: "row" %>
      <% row.with_cell "Mark" %>
      <% row.with_cell "Otto" %>
      <% row.with_cell "@mdo" %>
    <% end %>
    <% body.with_row do |row| %>
      <% row.with_cell "2", scope: "row" %>
      <% row.with_cell "Jacob" %>
      <% row.with_cell "Thornton" %>
      <% row.with_cell "@fat" %>
    <% end %>
    <% body.with_row do |row| %>
      <% row.with_cell "3", scope: "row" %>
      <% row.with_cell "Larry" %>
      <% row.with_cell "Bird" %>
      <% row.with_cell "@twitter" %>
    <% end %>
  <% end %>
<% end %>

new_table(borderless: true) do |table|
  table.build_head do |head|
    head.build_row do |row|
      row.build_cell "#"
      row.build_cell "First"
      row.build_cell "Last"
      row.build_cell "Handle"
    end
  end

  table.build_body do |body|
    body.build_row do |row|
      row.build_cell "1", scope: "row"
      row.build_cell "Mark"
      row.build_cell "Otto"
      row.build_cell "@mdo"
    end

    body.build_row do |row|
      row.build_cell "2", scope: "row"
      row.build_cell "Jacob"
      row.build_cell "Thornton"
      row.build_cell "@fat"
    end

    body.build_row do |row|
      row.build_cell "3", scope: "row"
      row.build_cell "Larry"
      row.build_cell "Bird"
      row.build_cell "@twitter"
    end
  end
end

<table class="table table-borderless">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td scope="row">1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>

    <tr>
      <td scope="row">2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>

    <tr>
      <td scope="row">3</td>
      <td>Larry</td>
      <td>Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Small Tables #

Make tables more compact by reducing cell padding.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	Bird	@twitter

<%= table(small: true) do |t| %>
  <% t.with_head do |head| %>
    <% head.with_row do |row| %>
      <% row.with_cell "#" %>
      <% row.with_cell "First" %>
      <% row.with_cell "Last" %>
      <% row.with_cell "Handle" %>
    <% end %>
  <% end %>

  <% t.with_body do |body| %>
    <% body.with_row do |row| %>
      <% row.with_cell "1", scope: "row" %>
      <% row.with_cell "Mark" %>
      <% row.with_cell "Otto" %>
      <% row.with_cell "@mdo" %>
    <% end %>
    <% body.with_row do |row| %>
      <% row.with_cell "2", scope: "row" %>
      <% row.with_cell "Jacob" %>
      <% row.with_cell "Thornton" %>
      <% row.with_cell "@fat" %>
    <% end %>
    <% body.with_row do |row| %>
      <% row.with_cell "3", scope: "row" %>
      <% row.with_cell "Larry" %>
      <% row.with_cell "Bird" %>
      <% row.with_cell "@twitter" %>
    <% end %>
  <% end %>
<% end %>

new_table(small: true) do |table|
  table.build_head do |head|
    head.build_row do |row|
      row.build_cell "#"
      row.build_cell "First"
      row.build_cell "Last"
      row.build_cell "Handle"
    end
  end

  table.build_body do |body|
    body.build_row do |row|
      row.build_cell "1", scope: "row"
      row.build_cell "Mark"
      row.build_cell "Otto"
      row.build_cell "@mdo"
    end

    body.build_row do |row|
      row.build_cell "2", scope: "row"
      row.build_cell "Jacob"
      row.build_cell "Thornton"
      row.build_cell "@fat"
    end

    body.build_row do |row|
      row.build_cell "3", scope: "row"
      row.build_cell "Larry"
      row.build_cell "Bird"
      row.build_cell "@twitter"
    end
  end
end

<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td scope="row">1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>

    <tr>
      <td scope="row">2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>

    <tr>
      <td scope="row">3</td>
      <td>Larry</td>
      <td>Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Vertical Alignment #

Control the vertical alignment of table cells.

Top #

Heading 1	Heading 2	Heading 3
This cell has a lot of content that spans multiple lines to demonstrate vertical alignment behavior in table cells.	Short	Content

<%= table(align: :top) do |t| %>
  <% t.with_head do |head| %>
    <% head.with_row do |row| %>
      <% row.with_cell "Heading 1" %>
      <% row.with_cell "Heading 2" %>
      <% row.with_cell "Heading 3" %>
    <% end %>
  <% end %>

  <% t.with_body do |body| %>
    <% body.with_row do |row| %>
      <% row.with_cell "This cell has a lot of content that spans multiple lines to demonstrate vertical alignment behavior in table cells." %>
      <% row.with_cell "Short" %>
      <% row.with_cell "Content" %>
    <% end %>
  <% end %>
<% end %>

new_table(align: :top) do |table|
  table.build_head do |head|
    head.build_row do |row|
      row.build_cell "Heading 1"
      row.build_cell "Heading 2"
      row.build_cell "Heading 3"
    end
  end

  table.build_body do |body|
    body.build_row do |row|
      row.build_cell "This cell has a lot of content that spans multiple lines to demonstrate vertical alignment behavior in table cells."
      row.build_cell "Short"
      row.build_cell "Content"
    end
  end
end

<table class="table table-align-top">
  <thead>
    <tr>
      <th scope="col">Heading 1</th>
      <th scope="col">Heading 2</th>
      <th scope="col">Heading 3</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>This cell has a lot of content that spans multiple lines to demonstrate vertical alignment behavior in table cells.</td>
      <td>Short</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

Middle (Default)#

Heading 1	Heading 2	Heading 3
This cell has a lot of content that spans multiple lines to demonstrate vertical alignment behavior in table cells.	Short	Content

<%= table(align: :middle) do |t| %>
  <% t.with_head do |head| %>
    <% head.with_row do |row| %>
      <% row.with_cell "Heading 1" %>
      <% row.with_cell "Heading 2" %>
      <% row.with_cell "Heading 3" %>
    <% end %>
  <% end %>

  <% t.with_body do |body| %>
    <% body.with_row do |row| %>
      <% row.with_cell "This cell has a lot of content that spans multiple lines to demonstrate vertical alignment behavior in table cells." %>
      <% row.with_cell "Short" %>
      <% row.with_cell "Content" %>
    <% end %>
  <% end %>
<% end %>

new_table(align: :middle) do |table|
  table.build_head do |head|
    head.build_row do |row|
      row.build_cell "Heading 1"
      row.build_cell "Heading 2"
      row.build_cell "Heading 3"
    end
  end

  table.build_body do |body|
    body.build_row do |row|
      row.build_cell "This cell has a lot of content that spans multiple lines to demonstrate vertical alignment behavior in table cells."
      row.build_cell "Short"
      row.build_cell "Content"
    end
  end
end

<table class="table table-align-middle">
  <thead>
    <tr>
      <th scope="col">Heading 1</th>
      <th scope="col">Heading 2</th>
      <th scope="col">Heading 3</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>This cell has a lot of content that spans multiple lines to demonstrate vertical alignment behavior in table cells.</td>
      <td>Short</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

Bottom #

Heading 1	Heading 2	Heading 3
This cell has a lot of content that spans multiple lines to demonstrate vertical alignment behavior in table cells.	Short	Content

<%= table(align: :bottom) do |t| %>
  <% t.with_head do |head| %>
    <% head.with_row do |row| %>
      <% row.with_cell "Heading 1" %>
      <% row.with_cell "Heading 2" %>
      <% row.with_cell "Heading 3" %>
    <% end %>
  <% end %>

  <% t.with_body do |body| %>
    <% body.with_row do |row| %>
      <% row.with_cell "This cell has a lot of content that spans multiple lines to demonstrate vertical alignment behavior in table cells." %>
      <% row.with_cell "Short" %>
      <% row.with_cell "Content" %>
    <% end %>
  <% end %>
<% end %>

new_table(align: :bottom) do |table|
  table.build_head do |head|
    head.build_row do |row|
      row.build_cell "Heading 1"
      row.build_cell "Heading 2"
      row.build_cell "Heading 3"
    end
  end

  table.build_body do |body|
    body.build_row do |row|
      row.build_cell "This cell has a lot of content that spans multiple lines to demonstrate vertical alignment behavior in table cells."
      row.build_cell "Short"
      row.build_cell "Content"
    end
  end
end

<table class="table table-align-bottom">
  <thead>
    <tr>
      <th scope="col">Heading 1</th>
      <th scope="col">Heading 2</th>
      <th scope="col">Heading 3</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>This cell has a lot of content that spans multiple lines to demonstrate vertical alignment behavior in table cells.</td>
      <td>Short</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

Table Captions #

Add a caption to provide context for your table.

List of users
#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat

<%= table do |t| %>
  <% t.with_caption("List of users") %>

  <% t.with_head do |head| %>
    <% head.with_row do |row| %>
      <% row.with_cell "#" %>
      <% row.with_cell "First" %>
      <% row.with_cell "Last" %>
      <% row.with_cell "Handle" %>
    <% end %>
  <% end %>

  <% t.with_body do |body| %>
    <% body.with_row do |row| %>
      <% row.with_cell "1", scope: "row" %>
      <% row.with_cell "Mark" %>
      <% row.with_cell "Otto" %>
      <% row.with_cell "@mdo" %>
    <% end %>
    <% body.with_row do |row| %>
      <% row.with_cell "2", scope: "row" %>
      <% row.with_cell "Jacob" %>
      <% row.with_cell "Thornton" %>
      <% row.with_cell "@fat" %>
    <% end %>
  <% end %>
<% end %>

new_table do |table|
  table.build_caption("List of users")

  table.build_head do |head|
    head.build_row do |row|
      row.build_cell "#"
      row.build_cell "First"
      row.build_cell "Last"
      row.build_cell "Handle"
    end
  end

  table.build_body do |body|
    body.build_row do |row|
      row.build_cell "1", scope: "row"
      row.build_cell "Mark"
      row.build_cell "Otto"
      row.build_cell "@mdo"
    end

    body.build_row do |row|
      row.build_cell "2", scope: "row"
      row.build_cell "Jacob"
      row.build_cell "Thornton"
      row.build_cell "@fat"
    end
  end
end

<table class="table">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td scope="row">1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>

    <tr>
      <td scope="row">2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
  </tbody>
</table>

Bottom Caption #

List of users shown below
#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat

<%= table do |t| %>
  <% t.with_caption("List of users shown below", position: :bottom) %>

  <% t.with_head do |head| %>
    <% head.with_row do |row| %>
      <% row.with_cell "#" %>
      <% row.with_cell "First" %>
      <% row.with_cell "Last" %>
      <% row.with_cell "Handle" %>
    <% end %>
  <% end %>

  <% t.with_body do |body| %>
    <% body.with_row do |row| %>
      <% row.with_cell "1", scope: "row" %>
      <% row.with_cell "Mark" %>
      <% row.with_cell "Otto" %>
      <% row.with_cell "@mdo" %>
    <% end %>
    <% body.with_row do |row| %>
      <% row.with_cell "2", scope: "row" %>
      <% row.with_cell "Jacob" %>
      <% row.with_cell "Thornton" %>
      <% row.with_cell "@fat" %>
    <% end %>
  <% end %>
<% end %>

new_table do |table|
  table.build_caption("List of users shown below", position: :bottom)

  table.build_head do |head|
    head.build_row do |row|
      row.build_cell "#"
      row.build_cell "First"
      row.build_cell "Last"
      row.build_cell "Handle"
    end
  end

  table.build_body do |body|
    body.build_row do |row|
      row.build_cell "1", scope: "row"
      row.build_cell "Mark"
      row.build_cell "Otto"
      row.build_cell "@mdo"
    end

    body.build_row do |row|
      row.build_cell "2", scope: "row"
      row.build_cell "Jacob"
      row.build_cell "Thornton"
      row.build_cell "@fat"
    end
  end
end

<table class="table">
  <caption class="caption-bottom">List of users shown below</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td scope="row">1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>

    <tr>
      <td scope="row">2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
  </tbody>
</table>

Nesting #

Tables can be nested inside table cells.

Name

Details

John Doe

Project	Status
Project A	Complete
Project B	In Progress

Jane Smith

Project	Status
Project C	Complete

<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">Details</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>John Doe</td>
      <td>
        <table class="table table-sm table-bordered">
          <thead>
            <tr>
              <th>Project</th>
              <th>Status</th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td>Project A</td>
              <td>Complete</td>
            </tr>

            <tr>
              <td>Project B</td>
              <td>In Progress</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>

    <tr>
      <th scope="row">2</th>
      <td>Jane Smith</td>
      <td>
        <table class="table table-sm table-bordered">
          <thead>
            <tr>
              <th>Project</th>
              <th>Status</th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td>Project C</td>
              <td>Complete</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Responsive Tables #

Make tables scroll horizontally on small screens.

#	Heading 1	Heading 2	Heading 3	Heading 4	Heading 5	Heading 6	Heading 7	Heading 8	Heading 9
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

<%= table(responsive: true) do |t| %>
  <% t.with_head do |head| %>
    <% head.with_row do |row| %>
      <% row.with_cell "#" %>
      <% row.with_cell "Heading 1" %>
      <% row.with_cell "Heading 2" %>
      <% row.with_cell "Heading 3" %>
      <% row.with_cell "Heading 4" %>
      <% row.with_cell "Heading 5" %>
      <% row.with_cell "Heading 6" %>
      <% row.with_cell "Heading 7" %>
      <% row.with_cell "Heading 8" %>
      <% row.with_cell "Heading 9" %>
    <% end %>
  <% end %>

  <% t.with_body do |body| %>
    <% body.with_row do |row| %>
      <% row.with_cell "1", scope: "row" %>
      <% row.with_cell "Cell" %>
      <% row.with_cell "Cell" %>
      <% row.with_cell "Cell" %>
      <% row.with_cell "Cell" %>
      <% row.with_cell "Cell" %>
      <% row.with_cell "Cell" %>
      <% row.with_cell "Cell" %>
      <% row.with_cell "Cell" %>
      <% row.with_cell "Cell" %>
    <% end %>
    <% body.with_row do |row| %>
      <% row.with_cell "2", scope: "row" %>
      <% row.with_cell "Cell" %>
      <% row.with_cell "Cell" %>
      <% row.with_cell "Cell" %>
      <% row.with_cell "Cell" %>
      <% row.with_cell "Cell" %>
      <% row.with_cell "Cell" %>
      <% row.with_cell "Cell" %>
      <% row.with_cell "Cell" %>
      <% row.with_cell "Cell" %>
    <% end %>
    <% body.with_row do |row| %>
      <% row.with_cell "3", scope: "row" %>
      <% row.with_cell "Cell" %>
      <% row.with_cell "Cell" %>
      <% row.with_cell "Cell" %>
      <% row.with_cell "Cell" %>
      <% row.with_cell "Cell" %>
      <% row.with_cell "Cell" %>
      <% row.with_cell "Cell" %>
      <% row.with_cell "Cell" %>
      <% row.with_cell "Cell" %>
    <% end %>
  <% end %>
<% end %>

new_table(responsive: true) do |table|
  table.build_head do |head|
    head.build_row do |row|
      row.build_cell "#"
      row.build_cell "Heading 1"
      row.build_cell "Heading 2"
      row.build_cell "Heading 3"
      row.build_cell "Heading 4"
      row.build_cell "Heading 5"
      row.build_cell "Heading 6"
      row.build_cell "Heading 7"
      row.build_cell "Heading 8"
      row.build_cell "Heading 9"
    end
  end

  table.build_body do |body|
    body.build_row do |row|
      row.build_cell "1", scope: "row"
      row.build_cell "Cell"
      row.build_cell "Cell"
      row.build_cell "Cell"
      row.build_cell "Cell"
      row.build_cell "Cell"
      row.build_cell "Cell"
      row.build_cell "Cell"
      row.build_cell "Cell"
      row.build_cell "Cell"
    end

    body.build_row do |row|
      row.build_cell "2", scope: "row"
      row.build_cell "Cell"
      row.build_cell "Cell"
      row.build_cell "Cell"
      row.build_cell "Cell"
      row.build_cell "Cell"
      row.build_cell "Cell"
      row.build_cell "Cell"
      row.build_cell "Cell"
      row.build_cell "Cell"
    end

    body.build_row do |row|
      row.build_cell "3", scope: "row"
      row.build_cell "Cell"
      row.build_cell "Cell"
      row.build_cell "Cell"
      row.build_cell "Cell"
      row.build_cell "Cell"
      row.build_cell "Cell"
      row.build_cell "Cell"
      row.build_cell "Cell"
      row.build_cell "Cell"
    end
  end
end

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Heading 1</th>
        <th scope="col">Heading 2</th>
        <th scope="col">Heading 3</th>
        <th scope="col">Heading 4</th>
        <th scope="col">Heading 5</th>
        <th scope="col">Heading 6</th>
        <th scope="col">Heading 7</th>
        <th scope="col">Heading 8</th>
        <th scope="col">Heading 9</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td scope="row">1</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>

      <tr>
        <td scope="row">2</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>

      <tr>
        <td scope="row">3</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
    </tbody>
  </table>
</div>

Property Tables #

Specialized two-column tables for displaying object properties, database records, or key-value pairs. Property tables provide a clean layout for showing attributes with names and values.

Basic Usage #

A simple property table with name-value pairs.

Name	John Doe
Email	john.doe@example.com
Phone	+1 (555) 123-4567
Status	Active

<%= property_table striped: true, hover: true do |t| %>
  <% t.with_property "Name", "John Doe" %>
  <% t.with_property "Email", "john.doe@example.com" %>
  <% t.with_property "Phone", "+1 (555) 123-4567" %>
  <% t.with_property "Status", "Active" %>
<% end %>

new_property_table(striped: true, hover: true) do |t|
  t.build_property "Name", "John Doe"
  t.build_property "Email", "john.doe@example.com"
  t.build_property "Phone", "+1 (555) 123-4567"
  t.build_property "Status", "Active"
end

<table class="table-property table table-striped table-hover">
  <tbody>
    <tr>
      <th scope="row">Name</th>
      <td>John Doe</td>
    </tr>

    <tr>
      <th scope="row">Email</th>
      <td>john.doe@example.com</td>
    </tr>

    <tr>
      <th scope="row">Phone</th>
      <td>+1 (555) 123-4567</td>
    </tr>

    <tr>
      <th scope="row">Status</th>
      <td>Active</td>
    </tr>
  </tbody>
</table>

HTML Content #

Property values can contain HTML content by using a block.

Name	John Doe
Email	john.doe@example.com
Status	Active
Actions

<%= property_table do |t| %>
  <% t.with_property "Name", "John Doe" %>
  <% t.with_property "Email" do %>
    <%= link_to "john.doe@example.com", "mailto:john.doe@example.com" %>
  <% end %>
  <% t.with_property "Status" do %>
    <%= badge("Active", variant: "success") %>
  <% end %>
  <% t.with_property "Actions" do %>
    <%= button("Edit", variant: "primary", size: "sm") %>
    <%= button("Delete", variant: "danger", size: "sm") %>
  <% end %>
<% end %>

new_property_table do |t|
  t.build_property "Name", "John Doe"
  t.build_property("Email", link_to("john.doe@example.com", "mailto:john.doe@example.com"))
  t.build_property("Status", new_badge("Active", variant: "success"))
  t.build_property(
    "Actions",
    new_button("Edit", variant: "primary", size: "sm"),
    new_button("Delete", variant: "danger", size: "sm"),
  )
end

<table class="table-property table">
  <tbody>
    <tr>
      <th scope="row">Name</th>
      <td>John Doe</td>
    </tr>

    <tr>
      <th scope="row">Email</th>
      <td>
        <a href="mailto:john.doe@example.com">john.doe@example.com</a>
      </td>
    </tr>

    <tr>
      <th scope="row">Status</th>
      <td>
        <span class="badge badge-success">Active</span>
      </td>
    </tr>

    <tr>
      <th scope="row">Actions</th>
      <td>
        <button class="btn btn-primary btn-sm">Edit</button>
        <button class="btn btn-danger btn-sm">Delete</button>
      </td>
    </tr>
  </tbody>
</table>

Tables

On this page