<b-table :items="items"></b-table>
<script>
  data () {
    return {
      items: [
        { '#': '1', first: 'Mark', last: 'Otto', handle: '@mdo' },
        { '#': '2', first: 'Jacob', last: 'Thornton', handle: '@fat' },
        { '#': '3', first: 'Larry', last: 'the Bird', handle: '@twitter' }
      ]
    }
  }
}
</script>

                    
<b-table :items="items" head-variant="dark"></b-table>
<b-table :items="items" head-variant="light"></b-table>
<script>
  data () {
    return {
      items: [
        { '#': '1', first: 'Mark', last: 'Otto', handle: '@mdo' },
        { '#': '2', first: 'Jacob', last: 'Thornton', handle: '@fat' },
        { '#': '3', first: 'Larry', last: 'the Bird', handle: '@twitter' }
      ]
    }
  }
}
</script>

                    
<b-table :items="items" borderless></b-table>
<p><code class="highlighter-rouge">.table-borderless</code> can also be used on dark tables.</p>
<b-table :items="items" table-variant="dark" borderless></b-table>
<script>
  data () {
    return {
      items: [
        { '#': '1', first: 'Mark', last: 'Otto', handle: '@mdo' },
        { '#': '2', first: 'Jacob', last: 'Thornton', handle: '@fat' },
        { '#': '3', first: 'Larry', last: 'the Bird', handle: '@twitter' }
      ]
    }
  }
}
</script>

                    
<b-table small :items="items"></b-table>
<b-table small :items="items" table-variant="dark"></b-table>
<script>
  data () {
    return {
      items: [
        { '#': '1', first: 'Mark', last: 'Otto', handle: '@mdo' },
        { '#': '2', first: 'Jacob', last: 'Thornton', handle: '@fat' },
        { '#': '3', first: 'Larry', last: 'the Bird', handle: '@twitter' }
      ]
    }
  }
}
</script>

                    
<b-table :items="items">
  <template v-slot:table-caption>List of users</template>
</b-table>
<script>
  data () {
    return {
      items: [
        { '#': '1', first: 'Mark', last: 'Otto', handle: '@mdo' },
        { '#': '2', first: 'Jacob', last: 'Thornton', handle: '@fat' },
        { '#': '3', first: 'Larry', last: 'the Bird', handle: '@twitter' }
      ]
    }
  }
}
</script>

                    
<b-table :items="items" table-variant="dark"></b-table>
<script>
  data () {
    return {
      items: [
        { '#': '1', first: 'Mark', last: 'Otto', handle: '@mdo' },
        { '#': '2', first: 'Jacob', last: 'Thornton', handle: '@fat' },
        { '#': '3', first: 'Larry', last: 'the Bird', handle: '@twitter' }
      ]
    }
  }
}
</script>

                    
<b-table :items="items" striped></b-table>
<b-table :items="items" table-variant="dark" striped></b-table>
<script>
  data () {
    return {
      items: [
        { '#': '1', first: 'Mark', last: 'Otto', handle: '@mdo' },
        { '#': '2', first: 'Jacob', last: 'Thornton', handle: '@fat' },
        { '#': '3', first: 'Larry', last: 'the Bird', handle: '@twitter' }
      ]
    }
  }
}
</script>

                    
<b-table :items="items" hover></b-table>
<b-table :items="items" table-variant="dark" hover></b-table>
<script>
  data () {
    return {
      items: [
        { '#': '1', first: 'Mark', last: 'Otto', handle: '@mdo' },
        { '#': '2', first: 'Jacob', last: 'Thornton', handle: '@fat' },
        { '#': '3', first: 'Larry', last: 'the Bird', handle: '@twitter' }
      ]
    }
  }
}
</script>

                    
<b-table-simple>
  <b-thead>
    <b-th>Variant</b-th>
    <b-th>Heading</b-th>
    <b-th>Heading</b-th>
  </b-thead>
  <b-tbody>
    <b-tr variant="active">
      <b-th>Active</b-th>
      <b-td>Cell</b-td>
      <b-td>Cell</b-td>
    </b-tr>
    <b-tr>
      <b-th>Default</b-th>
      <b-td>Cell</b-td>
      <b-td>Cell</b-td>
    </b-tr>
    <b-tr variant="primary">
      <b-th>Primary</b-th>
      <b-td>Cell</b-td>
      <b-td>Cell</b-td>
    </b-tr>
    <b-tr variant="secondary">
      <b-th>Secondary</b-th>
      <b-td>Cell</b-td>
      <b-td>Cell</b-td>
    </b-tr>
    <b-tr variant="success">
      <b-th>Success</b-th>
      <b-td>Cell</b-td>
      <b-td>Cell</b-td>
    </b-tr>
    <b-tr variant="danger">
      <b-th>Danger</b-th>
      <b-td>Cell</b-td>
      <b-td>Cell</b-td>
    </b-tr>
    <b-tr variant="warning">
      <b-th>Warning</b-th>
      <b-td>Cell</b-td>
      <b-td>Cell</b-td>
    </b-tr>
    <b-tr variant="info">
      <b-th>Info</b-th>
      <b-td>Cell</b-td>
      <b-td>Cell</b-td>
    </b-tr>
  </b-tbody>
</b-table-simple>
<p>Regular table background variants are not available with the dark table, however, you may use <a href="https://getbootstrap.com/" target="_blank">text or background utilities</a> to achieve similar styles.</p>
<b-table-simple table-variant="dark">
  <b-thead>
    <b-th>#</b-th>
    <b-th>Heading</b-th>
    <b-th>Heading</b-th>
  </b-thead>
  <b-tbody>
    <b-tr class="bg-primary">
      <b-th>1</b-th>
      <b-td>Cell</b-td>
      <b-td>Cell</b-td>
    </b-tr>
    <b-tr>
      <b-th>2</b-th>
      <b-td>Cell</b-td>
      <b-td>Cell</b-td>
    </b-tr>
    <b-tr class="bg-success">
      <b-th>3</b-th>
      <b-td>Cell</b-td>
      <b-td>Cell</b-td>
    </b-tr>
    <b-tr>
      <b-th>4</b-th>
      <b-td>Cell</b-td>
      <b-td>Cell</b-td>
    </b-tr>
    <b-tr class="bg-info">
      <b-th>5</b-th>
      <b-td>Cell</b-td>
      <b-td>Cell</b-td>
    </b-tr>
    <b-tr>
      <b-th>6</b-th>
      <b-td>Cell</b-td>
      <b-td>Cell</b-td>
    </b-tr>
    <b-tr class="bg-warning">
      <b-th>7</b-th>
      <b-td>Cell</b-td>
      <b-td>Cell</b-td>
    </b-tr>
    <b-tr>
      <b-th>8</b-th>
      <b-td>Cell</b-td>
      <b-td>Cell</b-td>
    </b-tr>
    <b-tr class="bg-danger">
      <b-th>9</b-th>
      <b-td>Cell</b-td>
      <b-td>Cell</b-td>
    </b-tr>
  </b-tbody>
</b-table-simple>