Create tables with custom styling

Tables are not always pleasant to look at, but with the Influential theme, I’ve given you some table styling enhancements that you can use to spice up your tables with a few custom styles.

Default Table

All you need to do with this one is create a standard HTML table.

table1

Striped Table

To get this style, add the class table-striped to your table tag like this:
<table class="table-striped">

table2

Bordered and Striped Table

To get this style, add the classe table-striped-bordered to your table tag like this:
<table class="table-striped-bordered">

table3

Table with Colour

To get this style, add two classes bordered-striped blue to your table tag like this:
 <table class="table-striped-bordered blue">

table4

You also get a couple additional colours you can apply to your table instead of the “Blue” that you see above:

  1. blue
  2. orange
  3. green

Table Sample Code

To give you a starting point in creating a table like you see above, here is some HTML code for a default table…

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

NOTE If you want to know more about tables, check out the W3Schools website

Making a Table Responsive

If you need your table to be responsive so that the full width of its content can be viewed in a mobile device, you need to wrap your table in a div using the class “table-responsive” which will add a horizontal scroll bar on the outer wrapper:

<div class="table-responsive">
<table>
<tr>
<td>your content here</td>
</tr>
</table>
</div>