Tables

Tables can be used to represent tabular data using rows and columns. They can be created by adding the .table class to the <table> element.

# First Last Age
1 John Doe 25
2 Jane Violet 27
3 Jack Gates 33 
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th class="text-right">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>John</td>
      <td>Doe</td>
      <td class="text-right">25</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Jane</td>
      <td>Violet</td>
      <td class="text-right">27</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Jack</td>
      <td>Gates</td>
      <td class="text-right">33</td>
    </tr>
  </tbody>
</table>

It is generally a good idea to align numerical columns to the right. Hence, the .text-right utility class is on the Age column.

No outer padding #

The padding on the left of the first column and the padding on the right of the last column can be removed by adding the .table-no-outer-padding class to the <table> element.

# First Last Age
1 John Doe 25
2 Jane Violet 27
3 Jack Gates 33 
<!-- No outer padding -->
<table class="table table-no-outer-padding">
  <thead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th class="text-right">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>John</td>
      <td>Doe</td>
      <td class="text-right">25</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Jane</td>
      <td>Violet</td>
      <td class="text-right">27</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Jack</td>
      <td>Gates</td>
      <td class="text-right">33</td>
    </tr>
  </tbody>
</table>

Striped rows #

Tables can be created with zebra-striping by adding the .table-striped class.

# First Last Age
1 John Doe 25
2 Jane Violet 27
3 Jack Gates 33 
<!-- Striped rows -->
<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th class="text-right">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>John</td>
      <td>Doe</td>
      <td class="text-right">25</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Jane</td>
      <td>Violet</td>
      <td class="text-right">27</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Jack</td>
      <td>Gates</td>
      <td class="text-right">33</td>
    </tr>
  </tbody>
</table>

Hoverable rows #

A hover state can be enabled within table rows in the <tbody> element by adding the .table-hover class.

# First Last Age
1 John Doe 25
2 Jane Violet 27
3 Jack Gates 33 
<!-- Hoverable rows -->
<table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th class="text-right">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>John</td>
      <td>Doe</td>
      <td class="text-right">25</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Jane</td>
      <td>Violet</td>
      <td class="text-right">27</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Jack</td>
      <td>Gates</td>
      <td class="text-right">33</td>
    </tr>
  </tbody>
</table>

Bordered tables #

Bordered tables can be created using the following classes:

  • .table-bordered creates fully bordered tables (both outer and inner)
  • .table-outer-bordered creates tables with an outer border only.
  • .table-inner-bordered creates tables with inner borders only. This can be paired with cards with no padding for a great effect. Check out the responsive tables section to see how.
# First Last Age
1 John Doe 25
2 Jane Violet 27
3 Jack Gates 33 
<!-- Bordered table -->
<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th class="text-right">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>John</td>
      <td>Doe</td>
      <td class="text-right">25</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Jane</td>
      <td>Violet</td>
      <td class="text-right">27</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Jack</td>
      <td>Gates</td>
      <td class="text-right">33</td>
    </tr>
  </tbody>
</table>
# First Last Age
1 John Doe 25
2 Jane Violet 27
3 Jack Gates 33 
<!-- Outer bordered table -->
<table class="table table-outer-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th class="text-right">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>John</td>
      <td>Doe</td>
      <td class="text-right">25</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Jane</td>
      <td>Violet</td>
      <td class="text-right">27</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Jack</td>
      <td>Gates</td>
      <td class="text-right">33</td>
    </tr>
  </tbody>
</table>
# First Last Age
1 John Doe 25
2 Jane Violet 27
3 Jack Gates 33 
<!-- Inner bordered table -->
<table class="table table-inner-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th class="text-right">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>John</td>
      <td>Doe</td>
      <td class="text-right">25</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Jane</td>
      <td>Violet</td>
      <td class="text-right">27</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Jack</td>
      <td>Gates</td>
      <td class="text-right">33</td>
    </tr>
  </tbody>
</table>

Contextual classes #

Rows with context can be created by adding the appropriate class names to the <tr> elements. Please note that this only works for rows in the table's body, ie, <tbody>.

# Row type Heading
1 Default Cell
2 Primary Cell
3 Success Cell
4 Secondary Cell
5 Danger Cell 
<!-- Contextual classes -->
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Row type</th>
      <th>Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Default</td>
      <td>Cell</td>
    </tr>
    <tr class="table-primary">
      <th>2</th>
      <td>Primary</td>
      <td>Cell</td>
    </tr>
    <tr class="table-success">
      <th>3</th>
      <td>Success</td>
      <td>Cell</td>
    </tr>
    <tr class="table-secondary">
      <th>4</th>
      <td>Secondary</td>
      <td>Cell</td>
    </tr>
    <tr class="table-danger">
      <th>5</th>
      <td>Danger</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

Responsive tables #

Tables can be made responsive by adding the .table-responsive class to a container element containing a table.

# Heading Heading Heading Heading
1 Cell Cell Cell Cell
2 Cell Cell Cell Cell
3 Cell Cell Cell Cell
4 Cell Cell Cell Cell 
<!-- Responsive table -->
<div class="w-400 mw-full"> <!-- w-400 = width: 40rem (400px), mw-full = max-width: 100% -->
  <div class="card p-0 bg-very-dark-dm"> <!-- p-0 = padding: 0, bg-very-dark-dm = background-color: var(--dark-color-dark) only in dark mode -->
    <div class="table-responsive">
      <table class="table table-inner-bordered">
        <thead>
          <tr>
            <th>#</th>
            <th>Heading</th>
            <th>Heading</th>
            <th>Heading</th>
            <th>Heading</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>1</th>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
          </tr>
          <tr>
            <th>2</th>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
          </tr>
          <tr>
            <th>3</th>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
          </tr>
          <tr>
            <th>4</th>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
Up next: Form
On this page
Tables No outer padding Striped rows Hoverable rows Bordered tables Contextual classes Responsive tables

Help us grow

Our goal is to make Halfmoon the go-to framework for building dashboards and tools on the web. We are already working on things like a form validator, number input, datepicker, multi-select (think Select2 without jQuery), tabs component, JSX docs, and so much more. You can learn more in the project roadmap.

However, we need your help to grow. So if you truly believe in our goal, please consider supporting us through Patreon.

Gold sponsor

The following is the highest tier, with a maximum of 1 sponsor.
(Also seen at the top of the page)

Sponsors

The following is the normal tier, with a maximum of 10 sponsors.

Backers

The following people have generously decided to support Halfmoon.

Subscribe for updates


  • We will notify you when the framework gets a substantial update. No spam or marketing.
  • You can also follow us on Twitter and stay updated that way.
halfmoon-logo halfmoon-logo-white

Get in touch

Legal

Made with for developers

Scroll to top
© Copyright 2025, Halfmoon UI