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>
  <tgroup cols="2">
    <thead>
      <row>
        <entry>Animal</entry>
        <entry>Gestation</entry>
      </row>
    </thead>
    <tbody>
      <row>
        <entry>Elephant (African and Asian)</entry>
        <entry>19-22 months</entry>
      </row>
      <row>
        <entry>Giraffe</entry>
        <entry>15 months</entry>
      </row>
      <row>
        <entry>Rhinoceros</entry>
        <entry>14-16 months</entry>
      </row>
      <row>
        <entry>Hippopotamus</entry>
        <entry>7 1/2 months</entry>
      </row>
    </tbody>
  </tgroup>
</table>

<table>
  ...etc
</table>

Variants

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

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

<table color="primary" padding="1" width="100">
  <tgroup cols="2">
    <thead>
      <row>
        <entry>Animal</entry>
        <entry>Gestation</entry>
      </row>
    </thead>
    <tbody>
      <row color="info">
        <entry>Elephant (African and Asian)</entry>
        <entry>19-22 months</entry>
      </row>
      <row color="success">
        <entry>Giraffe</entry>
        <entry>15 months</entry>
      </row>
      <row>
        <entry>Rhinoceros</entry>
        <entry color="danger">14-16 months</entry>
      </row>
      <row>
        <entry>Hippopotamus</entry>
        <entry>7 1/2 months</entry>
      </row>
    </tbody>
  </tgroup>
</table>

<table outputclass="table-primary p-1 w-100">
  <tgroup cols="2">
    <thead>
      <row>
        <entry>Animal</entry>
        <entry>Gestation</entry>
      </row>
    </thead>
    <tbody>
      <row outputclass="table-info">
        <entry>Elephant (African and Asian)</entry>
        <entry>19-22 months</entry>
      </row>
      <row outputclass="table-success">
        <entry>Giraffe</entry>
        <entry>15 months</entry>
      </row>
      <row>
        <entry>Rhinoceros</entry>
        <entry outputclass="table-danger">14-16 months</entry>
      </row>
      <row>
        <entry>Hippopotamus</entry>
        <entry>7 1/2 months</entry>
      </row>
    </tbody>
  </tgroup>
</table>

Striped rows

Use @striped="yes" 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 striped="yes">
  ...etc
</table>

<table outputclass="table-striped">
  ...etc
</table>

Striped columns

Use @striped-columns="yes" to add zebra-striping to any table column 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 striped-columns="yes">
  ...etc
</table>

<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>

<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>

<table rowsep="0" colsep="0">
  ...etc
</table>

Small tables

Add @compact="yes" to 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 compact="yes">
  ...etc
</table>

<table outputclass="table-sm">
  ...etc
</table>

Table group dividers

Add a thicker border, darker between table groups—<thead> and <tbody>, with @divider="yes" on the table.

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

<table divider="yes">
  ...
  <tbody>
  ...etc
  </tbody>
</table>

<tbody outputclass="table-group-divider">
  ...etc
</tbody>

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">
    <thead>
      <row>
        <entry valign="top">...</entry>
        <entry valign="bottom">...</entry>
        <entry valign="middle">...</entry>
        <entry>...</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 outputclass="align-middle">
  <tgroup cols="4">
    <thead>
      <row>
        <entry valign="top">...</entry>
        <entry valign="bottom">...</entry>
        <entry valign="middle">...</entry>
        <entry>...</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 @color="light" or @color="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 color="light">
      ...etc
    </thead>
  </tgroup>
</table>

<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 color="dark">
      ...etc
    </thead>
  </tgroup>
</table>

<table>
  <tgroup>
    <thead outputclass="table-dark">
      ...etc
    </thead>
  </tgroup>
</table>