Tabla

Muestra tu información ordenada en tablas

Estructura

table: Etiqueta contenedora
- thead: Cabecera de la tabla (opcional)
- tbody: Cuerpo de la tabla
  - tr: Fila de la tabla
    - th: Celda del tipo cabecera
    - td: Celda general

Uso básico

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>

Con bordes

Muestra una tabla con todos los elementos con borde usando la clase is-bordered junto a la clase table

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

Para mostrar las filas impares con un color neutral usar la clase is-striped

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>

Colores

Para mostrar con otro color el striped usa la clase is-{COLOR} donde COLOR es uno de los valores de colores. Para más información visita la documentación de personalización de colores

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

Para mostrar un color neutral cuando se pase el mouse (hover) puedes usar la clase is-hoverable junto a la clase table

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>

Colores

Para mostrar con otro color la fila con estado hover usa la clase is-{COLOR} donde COLOR es uno de los valores de colores. Para más información visita la documentación de personalización de colores

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>

Tamaños

Muestra las tablas con diferentes paddings usando las clases is-sm, is-md(por defecto), is-lg junto con la clase table

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>

Tabla responsiva

Si deseas que la tabla tenga un scroll horizontal se tiene que agregar un contenedor con la clase table-responsive

Preview
Code

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

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

Estructura​

Uso básico​

Con bordes​

Striped​

Colores​

color: primary

color: error

Highlight on Hover​

Colores​

Tamaños​

size: sm

size: md

size: lg

Tabla responsiva​

Estructura

Uso básico

Con bordes

Striped

Colores

Highlight on Hover

Colores

Tamaños

Tabla responsiva