Tables Last updated: 01.07.2020

Default Table Styling

Implementation:
The two classes within the wrapper div you see in the HTML Output are required to apply default Bootstrap styling with Thruline modifications to any table:

<div class="tl-table table">

HTML Output

<table class="tl-table table">
    <thead>
    <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</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>
&lt;table class=&quot;tl-table table&quot;&gt; &lt;thead&gt; &lt;tr&gt; &lt;th scope=&quot;col&quot;&gt;#&lt;/th&gt; &lt;th scope=&quot;col&quot;&gt;First&lt;/th&gt; &lt;th scope=&quot;col&quot;&gt;Last&lt;/th&gt; &lt;th scope=&quot;col&quot;&gt;Handle&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;th scope=&quot;row&quot;&gt;1&lt;/th&gt; &lt;td&gt;Mark&lt;/td&gt; &lt;td&gt;Otto&lt;/td&gt; &lt;td&gt;@mdo&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th scope=&quot;row&quot;&gt;2&lt;/th&gt; &lt;td&gt;Jacob&lt;/td&gt; &lt;td&gt;Thornton&lt;/td&gt; &lt;td&gt;@fat&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th scope=&quot;row&quot;&gt;3&lt;/th&gt; &lt;td&gt;Larry&lt;/td&gt; &lt;td&gt;the Bird&lt;/td&gt; &lt;td&gt;@twitter&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt;
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Header Modifier

Implementation:
To make the table's header standout, you can either apply a light or dark modifier. To do so, use the thead-light or thead-dark classes in the table's head tag.

<table class="tl-table table">
    <thead class="[thead-light OR thead-dark]">

HTML Output

<table class="tl-table table">
    <thead class="thead-dark">
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</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>
    </tbody>
</table>
&lt;table class=&quot;tl-table table&quot;&gt; &lt;thead class=&quot;thead-dark&quot;&gt; &lt;tr&gt; &lt;th scope=&quot;col&quot;&gt;#&lt;/th&gt; &lt;th scope=&quot;col&quot;&gt;First&lt;/th&gt; &lt;th scope=&quot;col&quot;&gt;Last&lt;/th&gt; &lt;th scope=&quot;col&quot;&gt;Handle&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;th scope=&quot;row&quot;&gt;1&lt;/th&gt; &lt;td&gt;Mark&lt;/td&gt; &lt;td&gt;Otto&lt;/td&gt; &lt;td&gt;@mdo&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th scope=&quot;row&quot;&gt;2&lt;/th&gt; &lt;td&gt;Jacob&lt;/td&gt; &lt;td&gt;Thornton&lt;/td&gt; &lt;td&gt;@fat&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt;

Example Dark

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat

Example Light

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat

Stripe Modifier

Implementation:
To help make tables a little more readable, you have the option of alternating striped backgrounds behind every-other row. To apply this striped styling, use the table-striped class within the table tag.

<table class="tl-table table table-striped">

HTML Output

<table class="tl-table table table-striped">
    <thead class="thead-dark">
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</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">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
    </tbody>
</table>
&lt;table class=&quot;tl-table table table-striped&quot;&gt; &lt;thead class=&quot;thead-dark&quot;&gt; &lt;tr&gt; &lt;th scope=&quot;col&quot;&gt;#&lt;/th&gt; &lt;th scope=&quot;col&quot;&gt;First&lt;/th&gt; &lt;th scope=&quot;col&quot;&gt;Last&lt;/th&gt; &lt;th scope=&quot;col&quot;&gt;Handle&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;th scope=&quot;row&quot;&gt;1&lt;/th&gt; &lt;td&gt;Mark&lt;/td&gt; &lt;td&gt;Otto&lt;/td&gt; &lt;td&gt;@mdo&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th scope=&quot;row&quot;&gt;2&lt;/th&gt; &lt;td&gt;Jacob&lt;/td&gt; &lt;td&gt;Thornton&lt;/td&gt; &lt;td&gt;@fat&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th scope=&quot;row&quot;&gt;2&lt;/th&gt; &lt;td&gt;Jacob&lt;/td&gt; &lt;td&gt;Thornton&lt;/td&gt; &lt;td&gt;@fat&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt;
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
2 Jacob Thornton @fat

Color Modifier

You have the option of coloring a full row or individual cell within a table. To do so, simply add a row-[color] or cell-[color] class to the appropriate row or cell.

**To change the color of the text within a row/cell, you can use the tl-text-[color] class, more on that here.

Implementation:
The classes you see sprinkled throughout the HTML Output rows and cells are just a few examples of how to apply backgrounds to any of your rows or cells:

<tr class="row-[color]">
<th/td class="cell-[color]">

Color Picker:
Color picker is disabled here since each individual row/cell are customizable rather than just a specific element.

HTML Output

<table class="table tl-table table-striped">
    <thead>
        <tr class="row-opd-lgreen tl-text-cjp-green">
            <th scope="col"></th>
            <th scope="col">Loan principal</th>
            <th scope="col">Annual<br>percentage Rate</th>
            <th scope="col">Lengths in Months</th>
            <th scope="col">Monthly Payment</th>
            <th scope="col">Total Interest</th>
            <th scope="col">Total paid</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row" class="text-white cell-gray-3">Loan#1</th>
            <td>$30,000</td>
            <td>5.00%</td>
            <td>60</td>
            <td>$566</td>
            <td>$3,968</td>
            <td class="cell-cjp-green tl-text-opd-lgreen">$33,968</td>
        </tr>
        <tr class="row-cjp-lblue">
            <th scope="row" class="text-white cell-gray-3">Loan#2</th>
            <td>$35,000</td>
            <td>5.00%</td>
            <td>60</td>
            <td>$660</td>
            <td>$4,630</td>
            <td class="cell-cjp-green tl-text-opd-lgreen">$39,630</td>
        </tr>
        <tr>
            <th scope="row" class="text-white cell-gray-3">Loan#4</th>
            <td class="cell-bsd-lpink">$35,000</td>
            <td class="cell-bsd-lpink">6.00%</td>
            <td class="cell-bsd-lpink">60</td>
            <td>$677</td>
            <td>$5,599</td>
            <td class="cell-cjp-green tl-text-opd-lgreen">$40,599</td>
        </tr>
    </tbody>
</table>
&lt;table class=&quot;table tl-table table-striped&quot;&gt; &lt;thead&gt; &lt;tr class=&quot;row-opd-lgreen tl-text-cjp-green&quot;&gt; &lt;th scope=&quot;col&quot;&gt;&lt;/th&gt; &lt;th scope=&quot;col&quot;&gt;Loan principal&lt;/th&gt; &lt;th scope=&quot;col&quot;&gt;Annual&lt;br&gt;percentage Rate&lt;/th&gt; &lt;th scope=&quot;col&quot;&gt;Lengths in Months&lt;/th&gt; &lt;th scope=&quot;col&quot;&gt;Monthly Payment&lt;/th&gt; &lt;th scope=&quot;col&quot;&gt;Total Interest&lt;/th&gt; &lt;th scope=&quot;col&quot;&gt;Total paid&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;th scope=&quot;row&quot; class=&quot;text-white cell-gray-3&quot;&gt;Loan#1&lt;/th&gt; &lt;td&gt;$30,000&lt;/td&gt; &lt;td&gt;5.00%&lt;/td&gt; &lt;td&gt;60&lt;/td&gt; &lt;td&gt;$566&lt;/td&gt; &lt;td&gt;$3,968&lt;/td&gt; &lt;td class=&quot;cell-cjp-green tl-text-opd-lgreen&quot;&gt;$33,968&lt;/td&gt; &lt;/tr&gt; &lt;tr class=&quot;row-cjp-lblue&quot;&gt; &lt;th scope=&quot;row&quot; class=&quot;text-white cell-gray-3&quot;&gt;Loan#2&lt;/th&gt; &lt;td&gt;$35,000&lt;/td&gt; &lt;td&gt;5.00%&lt;/td&gt; &lt;td&gt;60&lt;/td&gt; &lt;td&gt;$660&lt;/td&gt; &lt;td&gt;$4,630&lt;/td&gt; &lt;td class=&quot;cell-cjp-green tl-text-opd-lgreen&quot;&gt;$39,630&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th scope=&quot;row&quot; class=&quot;text-white cell-gray-3&quot;&gt;Loan#4&lt;/th&gt; &lt;td class=&quot;cell-bsd-lpink&quot;&gt;$35,000&lt;/td&gt; &lt;td class=&quot;cell-bsd-lpink&quot;&gt;6.00%&lt;/td&gt; &lt;td class=&quot;cell-bsd-lpink&quot;&gt;60&lt;/td&gt; &lt;td&gt;$677&lt;/td&gt; &lt;td&gt;$5,599&lt;/td&gt; &lt;td class=&quot;cell-cjp-green tl-text-opd-lgreen&quot;&gt;$40,599&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt;
  • -bsd-pink
  • -bsd-lpink
  • -bsd-purple
  • -bsd-lpurple
  • -bsd-red
  • -msw-dblue
  • -msw-lblue
  • -at-red
  • -at-blue
  • -link-blue
  • -text
  • -gray-1
  • -gray-2
  • -gray-3
  • -gray-4
  • -gray-5
  • -white
  • -black
  • reset
Loan principal Annual
percentage Rate		 Lengths in Months Monthly Payment Total Interest Total paid
Loan#1 $30,000 5.00% 60 $566 $3,968 $33,968
Loan#2 $35,000 5.00% 60 $660 $4,630 $39,630
Loan#4 $35,000 6.00% 60 $677 $5,599 $40,599

Alignment Modifier

By default, the text within a table is left aligned. To center align, use the text-center class on the table tag, to right align, use the text-right class.

Implementation:
Add your alignment class to the table tag:

<table class="tl-table table text-center">
<table class="tl-table table text-right">

HTML Output

<table class="tl-table table text-center">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</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>
&lt;table class=&quot;tl-table table text-center&quot;&gt; &lt;thead&gt; &lt;tr&gt; &lt;th scope=&quot;col&quot;&gt;#&lt;/th&gt; &lt;th scope=&quot;col&quot;&gt;First&lt;/th&gt; &lt;th scope=&quot;col&quot;&gt;Last&lt;/th&gt; &lt;th scope=&quot;col&quot;&gt;Handle&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;th scope=&quot;row&quot;&gt;1&lt;/th&gt; &lt;td&gt;Mark&lt;/td&gt; &lt;td&gt;Otto&lt;/td&gt; &lt;td&gt;@mdo&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th scope=&quot;row&quot;&gt;2&lt;/th&gt; &lt;td&gt;Jacob&lt;/td&gt; &lt;td&gt;Thornton&lt;/td&gt; &lt;td&gt;@fat&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th scope=&quot;row&quot;&gt;3&lt;/th&gt; &lt;td&gt;Larry&lt;/td&gt; &lt;td&gt;the Bird&lt;/td&gt; &lt;td&gt;@twitter&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt;
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Responsive Modifier

If you would like your tables to be responsive, which I'm sure you do, you'll need to add the Bootstrap wrapper around your table. Simply add a div with the table-responsive class around your table's HTML and it'll become responsive at smaller resolutions (scrolls horizontally).

Implementation:
Wrap your table in a responsive div:

<div class="table-responsive">
    <table class="tl-table table">

HTML Output

<div class="table-responsive">
    <table class="table tl-table">
        ...
    </table>
</div>
&lt;div class=&quot;table-responsive&quot;&gt; &lt;table class=&quot;table tl-table&quot;&gt; ... &lt;/table&gt; &lt;/div&gt;

WP DataTables

Create table using WPDataTable plugin

Copy and paste the given sample code in any of the word press site content editors to create a table as shown below.

Short Code Example:
                                <div class="tl-table-wrap tl-table-head-cyan tl-table-col-green tl-table-center">
  [wpdatatable id=1]
</div>

Use .tl-table-center class to align text center

Use .tl-table-head-cyan .tl-table-col-green classes to apply color for table head cells.



Steps to create table using WPDataTables plugin:


1. Navigate to "Create a Table" link under WPdata Tables menu.

screenshot1

2. Select "Create a table manually" option and click "Next" button.

screenshot2

3. Fill up table name and No. of columns for the table.

screenshot3

4. Enter Column head, Types and default values if any.

screenshot4

5. Click the button "Create the Table" and select "Standard Editor" to create table.

screenshot5

screenshot5_1

6. Click "New entry" link to create new rows for the table.

screenshot6

7. Click on tabs to configure the table based on the functionality.

screenshot7

8. To highlight the column header. Click the column settings button and add "column-head" class in the "CSS class(es)" text box.

screenshot8

screenshot8_1

9. Once the table is configured click Apply button to save.

screenshot9

10. Copy the Short code created by plugin with DIV structure mentioned above and paste in the word press editor to show in pages.


screenshot10

Note: Please make sure "WPDataTables" plugin is enabled in the wordpress sites