Bootstrap framework, has many features built within it. One of the feature includes the responsive table. Out of the box, tables are not much responsive. But, if you are using Bootstrap for your WordPress theme development then, you can utilize this Bootstrap responsive table feature for your theme, to, represent the table properly in any of the devices viewed from.
What is tables in HTML?
So what tables are really in HTML? Well, the answer to it is, it is basically used to represent any data for your site. For eg: maybe you have store site and want to compare the prices and features of different brand of television. On this case, tables are very useful to represent those differences.
Similarly, if you are trying to maintain the details of one of your user in your site then, in this case too, tables are very useful to store their data’s. Well, similarly, there are many much more uses of the tables in regular basis.
How is table structured in HTML?
After reading about what is tables in HTML and in which context it is used, now, you may want to know about how the tables is represented in HTML form. So, why the wait on this. Let’s move ahead and create a bare table structure.
For this, you can add the below HTML code inside the post editor of your post or pages to represent the tables for your site as required.
<table>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>John</td>
<td>Doe</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
</tr>
<tr>
<th>2</th>
<td>Jahane</td>
<td>Doe</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
</tr>
<tr>
<th>3</th>
<td>John</td>
<td>Smith</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
</tr>
</tbody>
</table>
For that to add, you need to switch to the Text mode in post editor since we will provide the HTML code. Adding that in the Visual mode is of no use since in this mode, only text, images are accepted, not the HTML code.
Output of the HTML table code
Now, after you have added the provided HTML code as instructed inside your posts or pages, you may get similar result as our, which is below:
Now, you may also have noticed if you view that table via the mobile devices, then, it will probably expand the browser width. So, to remedy that, we will here discuss about how to integrate Bootstrap responsive table in your WordPress theme based on Bootstrap.
Bootstrap Table
Bootstrap, has its own way of styling and integrating the table for use. You can find about how to add the Bootstrap table here for your site. It also has the built in responsive table too, in which while you view the table in mobile devices, it will create a scroll-bar under the table to navigate all of the table content, making it more readable than before with bare HTML.
Assuming that you have visited that mentioned link to see how Bootstrap handles the table, you may notice that it is different. The default way of displaying the Bootstrap table is in this structure:
<table class="table">
<thead> ... </thead>
<tbody> ... </tbody>
</table>
That is for the simple table addition via Bootstrap. Now, for the Bootstrap responsive table, you will find the structure such as below:
<!-- For Bootstrap responsive table v3 -->
<div class="table-responsive">
<table class="table"> ... </table>
</div>
<!-- For Bootstrap responsive table v4 -->
<table class="table table-responsive"> ... </table>
Integrate Bootstrap responsive table feature for your WordPress theme
Now, since you have already learned about how the Bootstrap responsive table feature is obtained. Now, you may want to know about how to integrate it for your theme, right? So, why the wait. Let’s move ahead and work it our.
For that, since the structure is totally different than the normal HTML structure, you will have to use the str_replace() funtion of PHP. Here, you can find more detail on this function.
Assuming that you have learned about the mentioned function, now let’s move ahead and use that function to integrate Bootstrap responsive table feature for your theme. For that, what we will do is, we will utilize that mentioned function to remove the default way of representing the table to the structure that of the Bootstrap.
Since the way of representing the responsive table in Bootstrap 3 and 4 is different, hence here we will provide you with both the solution on each version.
For Bootstrap 3
You can add the below PHP code in the functions.php file of our theme:
function theme_prefix_bootstrap_responsive_table( $content ) {
$content = str_replace(
[ '<table>', '</table>' ],
[ '<div class="table-responsive"><table class="table table-bordered table-hover table-striped">', '</table></div>' ],
$content
);
return $content;
}
add_filter( 'the_content', 'theme_prefix_bootstrap_responsive_table' );For Bootstrap 4
You can add the below PHP code in the functions.php file of our theme:
function theme_prefix_bootstrap_responsive_table( $content ) {
$content = str_replace(
[ '<table>', '</table>' ],
[ '<table class="table table-bordered table-hover table-striped table-responsive">', '</table>' ],
$content
);
return $content;
}
add_filter( 'the_content', 'theme_prefix_bootstrap_responsive_table' );Output of the integration of Bootstrap responsive table
Now, if you have added that provided PHP code in the required file mentioned, then, you may see similar output on this in your site too as below:
You may also want to read:
Conclusion
If you have read this post properly and successfully integrated the Bootstrap responsive table feature for your WordPress theme, then, we can assume that you are now more familiar on this than ever before. But, if you are still confused on this and want to know more then, do drop the comment below in the comment box and we will follow it up.
