Table

Displays your information sorted in tables.

Structure

table: Container tag
- thead: Table header (optional)
- tbody: Table body
  - tr: Table row
    - th: Header cell
    - td: General cell

Basic Usage

ID	Nombre	Apellido
1	Mario	Bross
2	Luigi	Bross
3	Koopa	Troopa
4	Donkey	Kong
5	Princesa	Peach

<table class="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Nombre</th>
      <th>Apellido</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mario</td>
      <td>Bross</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Luigi</td>
      <td>Bross</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Koopa</td>
      <td>Troopa</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Donkey</td>
      <td>Kong</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Princesa</td>
      <td>Peach</td>
    </tr>
  </tbody>
</table>

Bordered

Displays a table with all elements bordered using the is-bordered class along with the table class.

Preview
Code

ID	Nombre	Apellido
1	Mario	Bross
2	Luigi	Bross
3	Koopa	Troopa
4	Donkey	Kong
5	Princesa	Peach

<table class="table is-bordered">
  <thead>
    <tr>
      <th>ID</th>
      <th>Nombre</th>
      <th>Apellido</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mario</td>
      <td>Bross</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Luigi</td>
      <td>Bross</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Koopa</td>
      <td>Troopa</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Donkey</td>
      <td>Kong</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Princesa</td>
      <td>Peach</td>
    </tr>
  </tbody>
</table>

Striped

To display odd rows with a neutral color, use the is-striped class.

Preview
Code

ID	Nombre	Apellido
1	Mario	Bross
2	Luigi	Bross
3	Koopa	Troopa
4	Donkey	Kong
5	Princesa	Peach

<table class="table is-striped">
  <thead>
    <tr>
      <th>ID</th>
      <th>Nombre</th>
      <th>Apellido</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mario</td>
      <td>Bross</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Luigi</td>
      <td>Bross</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Koopa</td>
      <td>Troopa</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Donkey</td>
      <td>Kong</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Princesa</td>
      <td>Peach</td>
    </tr>
  </tbody>
</table>

Colors

To display the striped rows with another color, use the is-{COLOR} class, where COLOR is one of the color values. For more information, visit the color customization documentation.

Preview
Code

color: primary

ID	Nombre	Apellido
1	Mario	Bross
2	Luigi	Bross
3	Koopa	Troopa
4	Donkey	Kong
5	Princesa	Peach

color: error

ID	Nombre	Apellido
1	Mario	Bross
2	Luigi	Bross
3	Koopa	Troopa
4	Donkey	Kong
5	Princesa	Peach

<div class="is-stack">
  <h6>color: primary</h6>
  <table class="table is-primary is-striped is-bg-white">
    <thead>
      <tr>
        <th>ID</th>
        <th>Nombre</th>
        <th>Apellido</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mario</td>
        <td>Bross</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Luigi</td>
        <td>Bross</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Koopa</td>
        <td>Troopa</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Donkey</td>
        <td>Kong</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Princesa</td>
        <td>Peach</td>
      </tr>
    </tbody>
  </table>

  <h6>color: error</h6>
  <table class="table is-error is-striped is-bg-white">
    <thead>
      <tr>
        <th>ID</th>
        <th>Nombre</th>
        <th>Apellido</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mario</td>
        <td>Bross</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Luigi</td>
        <td>Bross</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Koopa</td>
        <td>Troopa</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Donkey</td>
        <td>Kong</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Princesa</td>
        <td>Peach</td>
      </tr>
    </tbody>
  </table>
</div>

Highlight on Hover

To display a neutral color when hovering over a row, you can use the is-hoverable class along with the table class.

Preview
Code

ID	Nombre	Apellido
1	Mario	Bross
2	Luigi	Bross
3	Koopa	Troopa
4	Donkey	Kong
5	Princesa	Peach

<table class="table is-striped is-hoverable">
  <thead>
    <tr>
      <th>ID</th>
      <th>Nombre</th>
      <th>Apellido</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mario</td>
      <td>Bross</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Luigi</td>
      <td>Bross</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Koopa</td>
      <td>Troopa</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Donkey</td>
      <td>Kong</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Princesa</td>
      <td>Peach</td>
    </tr>
  </tbody>
</table>

Colors

To display the row with another color on hover, use the is-{COLOR} class, where COLOR is one of the color values. For more information, visit the color customization documentation.

Preview
Code

ID	Nombre	Apellido
1	Mario	Bross
2	Luigi	Bross
3	Koopa	Troopa
4	Donkey	Kong
5	Princesa	Peach

<table class="table is-primary is-striped is-hoverable">
  <thead>
    <tr>
      <th>ID</th>
      <th>Nombre</th>
      <th>Apellido</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mario</td>
      <td>Bross</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Luigi</td>
      <td>Bross</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Koopa</td>
      <td>Troopa</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Donkey</td>
      <td>Kong</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Princesa</td>
      <td>Peach</td>
    </tr>
  </tbody>
</table>

Sizes

Displays tables with different paddings using the is-sm, is-md (default), and is-lg classes along with the table class.

Preview
Code

size: sm

ID	Nombre	Apellido
1	Mario	Bross
2	Luigi	Bross

size: md

ID	Nombre	Apellido
1	Mario	Bross
2	Luigi	Bross

size: lg

ID	Nombre	Apellido
1	Mario	Bross
2	Luigi	Bross

<div class="is-stack">
  <h6>size: sm</h6>
  <table class="table is-sm is-bg-white">
    <thead>
      <tr>
        <th>ID</th>
        <th>Nombre</th>
        <th>Apellido</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mario</td>
        <td>Bross</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Luigi</td>
        <td>Bross</td>
      </tr>
    </tbody>
  </table>

  <h6>size: md</h6>
  <table class="table is-md is-bg-white">
    <thead>
      <tr>
        <th>ID</th>
        <th>Nombre</th>
        <th>Apellido</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mario</td>
        <td>Bross</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Luigi</td>
        <td>Bross</td>
      </tr>
    </tbody>
  </table>

  <h6>size: lg</h6>
  <table class="table is-lg is-bg-white">
    <thead>
      <tr>
        <th>ID</th>
        <th>Nombre</th>
        <th>Apellido</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mario</td>
        <td>Bross</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Luigi</td>
        <td>Bross</td>
      </tr>
    </tbody>
  </table>
</div>

Responsive Table

If you want the table to have a horizontal scroll, you need to add a container with the table-responsive class.

Preview
Code

Header	Header	Header	Header	Header	Header	Header	Header	Header	Header	Header	Header	Header	Header	Header	Header	Header	Header	Header	Header
Cell 1	Cell 2	Cell 3	Cell 4	Cell 5	Cell 6	Cell 7	Cell 8	Cell 9	Cell 10	Cell 11	Cell 12	Cell 13	Cell 14	Cell 15	Cell 16	Cell 17	Cell 18	Cell 19	Cell 20
Cell 1	Cell 2	Cell 3	Cell 4	Cell 5	Cell 6	Cell 7	Cell 8	Cell 9	Cell 10	Cell 11	Cell 12	Cell 13	Cell 14	Cell 15	Cell 16	Cell 17	Cell 18	Cell 19	Cell 20
Cell 1	Cell 2	Cell 3	Cell 4	Cell 5	Cell 6	Cell 7	Cell 8	Cell 9	Cell 10	Cell 11	Cell 12	Cell 13	Cell 14	Cell 15	Cell 16	Cell 17	Cell 18	Cell 19	Cell 20

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Structure​

Basic Usage​

Bordered​

Striped​

Colors​

color: primary

color: error

Highlight on Hover​

Colors​

Sizes​

size: sm

size: md

size: lg

Responsive Table​

Structure

Basic Usage

Bordered

Striped

Colors

Highlight on Hover

Colors

Sizes

Responsive Table