Responsive Html Table Using Footable

FooTable : How To Create Responsive Html Table Using FooTable

________________________________________________________


In this FooTable Tutorial we will see How To Create a Responsive Html Table To Display friendly In Desktop , Tablet And Mobile  Using FooTable .

I Use In This Tutorial:
- FooTable.
- Php.
- NetBeans IDE .
- XAMPP .
- PhpMyAdmin .





Source Code:

<!-- php code to get data from mysql database -->

<?php

$hostname = "localhost";
$username = "root";
$password = "";
$databaseName = "test_db";

$connect = mysqli_connect($hostname, $username, $password, $databaseName);
$query = "SELECT * FROM `users";
$result = mysqli_query($connect, $query);

?>

<!DOCTYPE html>
<html>
    <head>
        <title> Responsive Html Table Using FooTable </title>
        <link rel="stylesheet" href="css/footable.core.css"> 
        <link rel="stylesheet" href="css/footable.metro.css">
        <script src="js/jquery-1.11.3.min.js"></script>
        <script src="js/footable.js"></script>

    </head>
    
    <body>
        
        <!-- toggle-arrow-alt = icon name -->
        <!-- add toggle-medium for a medium size -->
        <!-- add toggle-large for a large size -->
        
        <table class="footable toggle-arrow-alt">
<thead>
<tr>
            <!-- data-toggle = where the toggle icon will appear -->
<th data-toggle="true">ID</th>
                        <!-- hide this column in tablet and mobile -->
<th data-hide="tablet,phone">First Name</th>
                        <!-- hide this column in mobile devices -->
<th data-hide="phone">Last Name</th>
<th>Age</th>
</tr>
</thead>
        <tbody>

            <!-- populate table from mysql database -->
            <?php while($row1 = mysqli_fetch_array($result)):;?>
            <tr>
                <td><?php echo $row1[0];?></td>
                <td><?php echo $row1[1];?></td>
                <td><?php echo $row1[2];?></td>
                <td><?php echo $row1[3];?></td>
            </tr>
            <?php endwhile;?>

        </tbody>
        </table>
    </body>
    <script type="text/javascript">
     $(document).ready(function(){
         
         $('.footable').footable();
         
     });
    </script>
</html>


///////////////OUTPUT: 




                                                           
                                                               
responsive html table in tablet
In Tablet

responsive html table in mobile
In Phone


See more Icon Styles




Share this

Related Posts

Previous
Next Post »

2 comments

comments
Ken
1 juin 2021 à 10:07 delete

I have followed the instructions to the letter. It does not work in my bootstrap site.

Reply
avatar