How to fetch data from database in javascript and display in html table

In this article, we will see how we can display the records in an HTML table by fetching them from the MySQL database using PHP. 

Approach: Make sure you have XAMPP or WAMP server installed on your machine. In this article, we will be using the WAMP server.

WAMP Server is open-source software for the Microsoft Windows operating system, developed by Romain Bourdon. It is composed of an Apache web server, OpenSSL for SSL support, MySQL database and PHP programming language. Here, before going through the program, we need to create a MySQL database in our localhost server. Then, we are supposed to make an HTML table that is linked with PHP codes. PHP is used to connect with the localhost server and to fetch the data from the database table present in our localhost server by evaluating the MySQL queries. WAMP server helps to start Apache and MySQL and connect them with the PHP file. 

Follow the steps given below:

1. Creating Database: First, we will create a database named ‘geeksforgeeks’. You can use your existing database or create a new one.

create database “geeksforgeeks”

2. Create Table: Create a table named ‘userdata’. The table contains four fields:

  • username – varchar(100)
  • problems – int(11)
  • score – int(11)
  • articles – int(11)

Your table structure should look like this:

the table structure of “userdata”

Or you can create a table by copying and pasting the following code into the SQL panel of your PHPMyAdmin.

 `username` varchar(100) NOT NULL,
 `problems` int(11) NOT NULL,
 `score` int(11) NOT NULL,
 `articles` int(11) NOT NULL

To do this from the SQL panel refer to the following screenshot:

create a table ‘userdata” from the SQL panel

Insert records: We will now insert some records into our table. Here we are inserting 5 records. You can add multiple records.

Or copy and paste the following code into the SQL panel to insert records in the table.

INSERT INTO `userdata` 
(`username`, `problems`, `score`, `articles`) 
VALUES ('User-2', '100', '75', '30'), ('User-1', '150', '100', '30'), ('User-3', '200', '50', '10'), ('User-4', '50', '5', '2'), ('User-5', '0', '0', '1');

To do this from the SQL panel refer to the following screenshot:

inserting records

Creating folder and files:

We will now create our project folder named “GeeksForGeeks“. Create an index.php file. Keep your main project folder (for example here.. GeeksForGeeks) in the “C://wamp64/www/”, if you are using WAMP or “C://xampp/htdocs/” folder if you are using the XAMPP server respectively. The folder structure should look like this:

folder structure

Now, we have a database named geeksforgeeks, and a table named userdata. Now, here is the PHP code to fetch data from the database and display it in an HTML table. 



<!-- PHP code to establish connection with the localserver -->


$user = 'root';

$password = '';

$database = 'geeksforgeeks';


$mysqli = new mysqli($servername, $user,

                $password, $database);

if ($mysqli->connect_error) {

    die('Connect Error (' .

    $mysqli->connect_errno . ') '.



$sql = " SELECT * FROM userdata ORDER BY score DESC ";

$result = $mysqli->query($sql);



<!-- HTML code to display data in tabular format -->

<!DOCTYPE html>

<html lang="en">


    <meta charset="UTF-8">

    <title>GFG User Details</title>



        table {

            margin: 0 auto;

            font-size: large;

            border: 1px solid black;


        h2 {

            text-align: center;

            color: #006600;

            font-size: xx-large;

            font-family: 'Gill Sans', 'Gill Sans MT',

            ' Calibri', 'Trebuchet MS', 'sans-serif';


        td {

            background-color: #E4F5D4;

            border: 1px solid black;



        td {

            font-weight: bold;

            border: 1px solid black;

            padding: 10px;

            text-align: center;


        td {

            font-weight: lighter;







        <!-- TABLE CONSTRUCTION -->



                <th>GFG UserHandle</th>

                <th>Practice Problems</th>

                <th>Coding Score</th>

                <th>GFG Articles</th>


            <!-- PHP CODE TO FETCH DATA FROM ROWS -->






                <!-- FETCHING DATA FROM EACH

                    ROW OF EVERY COLUMN -->

                <td><?php echo $rows['username'];?></td>

                <td><?php echo $rows['problems'];?></td>

                <td><?php echo $rows['score'];?></td>

                <td><?php echo $rows['articles'];?></td>









Output: Finally, you should be able to display the records in an HTML table by fetching them from the database.


PHP is a server-side scripting language designed specifically for web development. You can learn PHP from the ground up by following this PHP Tutorial and PHP Examples.

How can we retrieve data from database to HTML table?

Display Data in an HTML Table Using PHP & MySQL.
Connect PHP to MySQL Database..
Insert Data Into PHPMyAdmin Table..
Fetch Data From MySQL Table..
Display Data in HTML Table..
Test Yourself to insert data..

How retrieve data from database and display it in table?

php $connect=mysql_connect('localhost', 'root', 'password'); mysql_select_db("name"); //here u select the data you want to retrieve from the db $query="select * from tablename"; $result= mysql_query($query); //here you check to see if any data has been found and you define the width of the table If($result){ echo "< ...

How send data from database to HTML?

Your comment on this answer:.
Step 1: Connection with Database. This is dbConn. ... .
Step 2: Creating HTML form and inserting data. Here's a simple HTML form which is index. ... .
Step 1: Creating HTML Form. First of all creating HTML form which is index. ... .
Step 2: Connection with Database. ... .
Step 3: Write PHP code for insert data..

How fetch data from database in JSP and display HTML table?

To do that, first we design a database of student data and then fetch it from JSP code on server..
Step 1: Create a new database. ... .
Step 2: Design the database. ... .
Step 3: Make DSN. ... .
Step 4: Create a New Project. ... .
Step 5: Choose Project. ... .
Step 6: Name and Location. ... .
Step 7: Server and Setting. ... .
Step 8:Select Framework..