Javascript AJAX jQuery HTML PHP Example MORE

HTML table using Jquery

index.php

<html lang="en"> 

<head> 
	<meta charset="UTF-8"> 
	<title>GFG User Details</title> 

	<!-- INCLUDING JQUERY-->
	<script src= 
"https://code.jquery.com/jquery-3.5.1.js"> 
	</script> 

	<!-- CSS FOR STYLING THE PAGE -->
	<style> 
		table { 
			margin: 0 auto; 
			font-size: large; 
			border: 1px solid black; 
		} 

		h1 { 
			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; 
		} 

		th, 
		td { 
			font-weight: bold; 
			border: 1px solid black; 
			padding: 10px; 
			text-align: center; 
		} 

		td { 
			font-weight: lighter; 
		} 
	</style> 
</head> 

<body> 
	<section> 
		<h1>GeeksForGeeks</h1> 

		<!-- TABLE CONSTRUCTION-->
		<table id='table'> 
			<!-- HEADING FORMATION -->
			<tr> 
				<th>GFG UserHandle</th> 
				<th>Practice Problems</th> 
				<th>Coding Score</th> 
				<th>GFG Articles</th> 
			</tr> 

			<script> 
				$(document).ready(function () { 

					/* FETCHING DATA FROM JSON FILE */
					$.getJSON("gfgdetails.json", 
							function (data) { 
						var student = ''; 

						/* ITERATING THROUGH OBJECTS */
						$.each(data, function (key, value) { 

							/* CONSTRUCTION OF ROWS HAVING */
							/* DATA FROM JSON OBJECT */
							student += '<tr>'; 
							student += '<td>' + 
								value.GFGUserName + '</td>'; 

							student += '<td>' + 
								value.NoOfProblems + '</td>'; 

							student += '<td>' + 
								value.TotalScore + '</td>'; 

							student += '<td>' + 
								value.Articles + '</td>'; 

							student += '</tr>'; 
						}); 
						
						/* INSERTING ROWS INTO TABLE */
						$('#table').append(student); 
					}); 
				}); 
			</script> 
	</section> 
</body> 

</html> 

Run it yourself