Tables

Documentation and examples for styling DITA tables with Bootstrap classes.

Overview

Due to the widespread use of <table> elements across third-party widgets like calendars and date pickers, Bootstrap’s tables are opt-in. Extend with optional modifier output classes or custom styles. All table styles are not inherited in Bootstrap, meaning any nested tables can be styled independent from the parent.

Using the most basic table markup, here’s how the default DITA Bootstrap .table-based tables look in Bootstrap.

Animal Gestation
Elephant (African and Asian) 19-22 months
Giraffe 15 months
Rhinoceros 14-16 months
Hippopotamus 7 1/2 months 
<table>
  ...etc
</table>

Variants

Use contextual classes to color tables, table rows or individual cells.

Class Heading Heading
Default Cell Cell
Primary Cell Cell
Secondary Cell Cell
Success Cell Cell
Danger Cell Cell
Warning Cell Cell
Info Cell Cell
Light Cell Cell
Dark Cell Cell 
<!-- On tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>

<!-- On rows -->
<row class="table-primary">...</tr>
<row class="table-secondary">...</tr>
<row class="table-success">...</tr>
<row class="table-danger">...</tr>
<row class="table-warning">...</tr>
<row class="table-info">...</tr>
<row class="table-light">...</tr>
<row class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<row>
  <entry outputclass="table-primary">...</td>
  <entry outputclass="table-secondary">...</td>
  <entry outputclass="table-success">...</td>
  <entry outputclass="table-danger">...</td>
  <entry outputclass="table-warning">...</td>
  <entry outputclass="table-info">...</td>
  <entry outputclass="table-light">...</td>
  <entry outputclass="table-dark">...</td>
</row>

Striped rows

Use @outputclass and add table-striped to add zebra-striping to any table row within the <tbody>.

Animal Gestation
Elephant (African and Asian) 19-22 months
Giraffe 15 months
Rhinoceros 14-16 months
Hippopotamus 7 1/2 months 
<table outputclass="table-striped">
  ...etc
</table>

Striped columns

Use @outputclass and add table-striped-columns to add zebra-striping to any table row within the <tbody>.

Animal Gestation
Elephant (African and Asian) 19-22 months
Giraffe 15 months
Rhinoceros 14-16 months
Hippopotamus 7 1/2 months 
<table outputclass="table-striped-columns">
  ...etc
</table>

Bordered tables

Add @rowsep="1" and @colsep="1" for borders on all sides of the table and cells.

Animal Gestation
Elephant (African and Asian) 19-22 months
Giraffe 15 months
Rhinoceros 14-16 months
Hippopotamus 7 1/2 months 
<table rowsep="1" colsep="1">
  ...etc
</table>

Tables without borders

Add @rowsep="0" and @colsep="0" for a table without borders.

Animal Gestation
Elephant (African and Asian) 19-22 months
Giraffe 15 months
Rhinoceros 14-16 months
Hippopotamus 7 1/2 months 
<table rowsep="0" colsep="0">
  ...etc
</table>

Small tables

Add @outputclass="table-sm" make any table more compact by cutting all cell padding in half.

Animal Gestation
Elephant (African and Asian) 19-22 months
Giraffe 15 months
Rhinoceros 14-16 months
Hippopotamus 7 1/2 months 
<table outputclass="table-sm">
  ...etc
</table>

Table group dividers

Add a thicker border, darker between table groups—<thead> and <tbody>, with @outputclass="table-group-divider".

Animal Gestation
Elephant (African and Asian) 19-22 months
Giraffe 15 months
Rhinoceros 14-16 months
Hippopotamus 7 1/2 months 
<table outputclass="table-group-divider">
  ...etc
</table>

Vertical alignment

Table cells of <thead> are always vertical aligned to the bottom. Table cells in <tbody> inherit their alignment from <table> and are aligned to the top by default. Use the @valign attribute to re-align where needed.

Heading 1 Heading 2 Heading 3 Heading 4 - here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the headers
This cell inherits @outputclass="align-middle" from the table This cell inherits @outputclass="align-middle" from the table This cell inherits @outputclass="align-middle" from the table This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
This cell inherits @valign="bottom" from the table row This cell inherits @valign="bottom" from the table row This cell inherits @valign="bottom" from the table row This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
This cell inherits @outputclass="align-middle" from the table This cell inherits @outputclass="align-middle" from the table This cell is aligned to the top. This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. 
<table outputclass="align-middle">
  <tgroup cols="4">
    <colspec colname="COLSPEC0"/>
    <colspec colname="COLSPEC1"/>
    <colspec colname="COLSPEC2"/>
    <colspec colname="COLSPEC3"/>
    <thead>
      <row>
        <entry colname="COLSPEC0" valign="top">...</entry>
        <entry colname="COLSPEC1" valign="bottom">...</entry>
        <entry colname="COLSPEC2" valign="middle">...</entry>
        <entry colname="COLSPEC3" valign="middle">...</entry>
      </row>
    </thead>
    <tbody>
      <row>
        ...
      </row>
      <row valign="bottom">
        ...
      </row>
      <row>
        <entry>...</entry>
        <entry>...</entry>
        <entry valign="top">...</entry>
        <entry>...</entry>
      </row>
    </tbody>
  </tgroup>
</table>

Table head

Similar to tables and dark tables, use the modifier @outputclass="table-light" or @outputclass="table-dark" to make <thead> elements appear light or dark gray.

Animal Gestation
Elephant (African and Asian) 19-22 months
Giraffe 15 months
Rhinoceros 14-16 months
Hippopotamus 7 1/2 months 
<table>
  <tgroup>
    <thead outputclass="table-light">
      ...etc
    </thead>
  <tgroup>
</table>
Animal Gestation
Elephant (African and Asian) 19-22 months
Giraffe 15 months
Rhinoceros 14-16 months
Hippopotamus 7 1/2 months 
<table>
  <tgroup>
    <thead outputclass="table-dark">
      ...etc
    </thead>
  </tgroup>
</table>