Tables

Table is a great way to display some related information together. In this page, we show how you can use different type of tables supported in theDocs.

  1. Basic Tables
  2. Options Table
  3. Information Table
  4. Changelog Table

Basic Tables

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.

Optional table caption.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 

<table class="table">
  <caption>Optional table caption.</caption>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Options Table

Options table can be used for describing a function, event, class, etc. Make sure you'll wrap your table indside .table-responsive and your table has classes of .table, .table-bordered and .table-striped.

Name type default description
interval number 5000 The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
pause string "hover" Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.
delay number | object 0 Delay showing and hiding the popover (ms) - does not apply to manual trigger type if a number is supplied, delay is applied to both hide/show object structure is: delay: { "show": 500, "hide": 100 }
wrap boolean true Whether the carousel should cycle continuously or have hard stops.
keyboard boolean true Whether the carousel should react to keyboard events. 

<div class="table-responsive">
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>Name</th>
        <th>type</th>
        <th>default</th>
        <th>description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>interval</td>
        <td>number</td>
        <td>5000</td>
        <td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td>
      </tr>
      <tr>
        <td>pause</td>
        <td>string</td>
        <td>"hover"</td>
        <td>Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.</td>
      </tr>
      <tr>
        <td>delay</td>
        <td>number | object</td>
        <td>0</td>
        <td>
          <p>Delay showing and hiding the popover (ms) - does not apply to manual trigger type</p>
          <p>If a number is supplied, delay is applied to both hide/show</p>
          <p>Object structure is: <code>delay: { "show": 500, "hide": 100 }</code></p>
        </td>
      </tr>
      <tr>
        <td>wrap</td>
        <td>boolean</td>
        <td>true</td>
        <td>Whether the carousel should cycle continuously or have hard stops.</td>
      </tr>
      <tr>
        <td>keyboard</td>
        <td>boolean</td>
        <td>true</td>
        <td>Whether the carousel should react to keyboard events.</td>
      </tr>
    </tbody>
  </table>
</div>

Information Table

You can use this type of table to describe several related key-value-paired options. Your table has to include these classes: .table, .table-bordered, .table-striped and .table-info.

Theme name: theDocs
Description: A starter theme for developing your next software documentation. It's based on Twitter Bootstrap and has basic elements that you'll fequently use them.
Created: 05 September 2015
Last Update: 05 September 2015
Documentation: Well documented
Layout: Responsive 

<table class="table table-bordered table-striped table-info">
  <tbody>
    <tr>
      <td>Theme name:</td>
      <td>theDocs</td>
    </tr>
    <tr>
      <td>Description:</td>
      <td>A starter theme for developing your next software documentation. It's based on Twitter Bootstrap and has basic elements that you'll fequently use them.</td>
    </tr>
    <tr>
      <td>Created:</td>
      <td>05 September 2015</td>
    </tr>
    <tr>
      <td>Last Update:</td>
      <td>05 September 2015</td>
    </tr>
    <tr>
      <td>Documentation:</td>
      <td>Well documented</td>
    </tr>
    <tr>
      <td>Layout:</td>
      <td>Responsive</td>
    </tr>
  </tbody>
</table>

Changelog Table

Your product will update regularly? Of course yes! So you need to keep track of your changelog and show them to your customers. Use this table to simply creat a changelog table. Including .table-changelog to your table is mandatory.

Action Details
When you have added a new feature to your application
When you have improved a feature or updated a plugin to new version
When a bug has fixed
When a file or feature has removed from application
When two or several files/features have merged together
When a file or peace of code moved to another place 

<table class="table table-bordered table-striped table-changelog">
  <thead>
    <tr>
      <th>Action</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span class="change change-added"></span></td>
      <td>When you have added a new feature to your application</td>
    </tr>
    <tr>
      <td><span class="change change-updated"></span></td>
      <td>When you have improved a feature or updated a plugin to new version</td>
    </tr>
    <tr>
      <td><span class="change change-fixed"></span></td>
      <td>When a bug has fixed</td>
    </tr>
    <tr>
      <td><span class="change change-removed"></span></td>
      <td>When a file or feature has removed from application</td>
    </tr>
    <tr>
      <td><span class="change change-merged"></span></td>
      <td>When two or several files/features have merged together</td>
    </tr>
    <tr>
      <td><span class="change change-moved"></span></td>
      <td>When a file or peace of code moved to another place</td>
    </tr>
  </tbody>
</table>

Changelog list

If you need more clean and easy making changelog component, you can use changelog lists.

  • When you have added a new feature to your application
  • When you have improved a feature or updated a plugin to new version
  • When a bug has fixed
  • When a file or feature has removed from application
  • When two or several files/features have merged together
  • When a file or peace of code moved to another place

<ul class="changelog">
  <li class="ch-added">When you have added a new feature to your application</li>
  <li class="ch-updated">When you have improved a feature or updated a plugin to new version</li>
  <li class="ch-fixed">When a bug has fixed</li>
  <li class="ch-removed">When a file or feature has removed from application</li>
  <li class="ch-merged">When two or several files/features have merged together</li>
  <li class="ch-moved">When a file or peace of code moved to another place</li>
</ul>