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.
Striped Table
To get this style, add the class table-striped to your table tag like this:
<table class="table-striped">
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">
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">
You also get a couple additional colours you can apply to your table instead of the “Blue” that you see above:
- blue
- orange
- 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>