Home » PHP » PHP HTML Table Example

About Olayemi Odunayo

I am a programmer and web developer, who has experience in developing websites and writing desktop and mobile applications. I have worked with both schematic and schemaless databases. I am also familiar with third party API and working with cloud servers. I do programming on the client side with Java, JavaScript, html, Ajax and CSS while I use PHP for server side programming.

PHP HTML Table Example

In this example we shall show you how to create html tables with dynamic php. PHP is a server-side scripting language used by most web developers for creating dynamic and responsive web pages(A dynamic webpage is one whose content change automatically each time the page is viewed).

Html is simply a language used to describe webpages. Html tables allow web developers arrange data into rows and columns also html tables also allow web developers display structured data in a web page.

For this example we would use

  1. A computer with PHP 5.5 installed
  2. notepad++

2 Getting Started

To explain dynamic PHP and html tables we are going to develop a trivial web app which allows a teacher record the scores of students on a remote server. The server counts the number of records it has received, after the third count it outputs the received record in an html table and resets its counter. Before we continue let’s start by explaining some concepts.

2.1 Forms

Html forms are used to collect user input. We are going to use forms to collect each student details(firstname, lastname, subject and score) and submit it

index.html

<form action=action.php  method=post onsubmit="return validateForm()">
<input type=text placeholder=FirstName id=firstname name=first required><br>
<input type=text placeholder=LastName id=lastname name=last required><br>
<input type=text placeholder=Subject id=subject name=subject required><br>
<input type=text placeholder="Student Score" id=score name=score required><br>

<input type=submit value=submit id=sub>


</form>


This code displays a form to the user, the required attribute in each textbox tells the browser that this field is required and must be filled while the placeholder is just a short hint that describes the expected input. The validateForm() function that is called when the form is submitted checks if the user has entered all the required fields. If the user entered all the required fields it returns true and the form is submitted else the function returns false and halts the submission process alerting the user to the error encountered.

index.html

 

function validateForm(){
var firstname=document.getElementById("firstname").value.trim();
var lastname=document.getElementById("lastname").value.trim();
var subject=document.getElementById("subject").value.trim();
var score =document.getElementById("score").value.trim();
if(firstname==""||lastname==""||subject==""||score==""){
alert("All Fields Must be Filled")
return false;
}

return true;
}

2.2 Session in php

We need store each student record processed by our php script, to do this we will make use of php session(in an advanced and scalable web app we would store all records in a database but for the sake of simplicity we would use php session)
Simply put a session is a way to store information, which can be accessed across mutiple webpages.When the form is submitted our script access each data submitted and saves it in session variables

action.php

 
<?php
session_start();
if($_SESSION['num']==null)//check if the num variable is empty
$_SESSION['num']=1;// if it is empty set it to 1
?>

To use session in php we call the session_start()function before anything else is output to the browser. All session variable values are stored in the global $_SESSION associative array. Assigning a session variable is as simple as writing $_SESSION['num']=1 and we can read from it the same way we would read from a normal variable. We use the $_SESSION['num'] variable as a counter to store the number of times the script has received a record.

action.php

if($_SESSION['num']==1){
$_SESSION['num']++;
 $_SESSION['first']=$_POST['first'];
 $_SESSION['last']= $_POST['last'];
 $_SESSION['subject']=$_POST['subject'];
 $_SESSION['score']=$_POST['score'];
include("index.html");
}
else if($_SESSION['num']==2){
$_SESSION['num']++;
 $_SESSION['first1']=$_POST['first'];
 $_SESSION['last1']= $_POST['last'];
 $_SESSION['subject1']=$_POST['subject'];
 $_SESSION['score1']=$_POST['score'];
include("index.html");
}
else if($_SESSION['num']>=3){
$_SESSION['num']=1;
 $_SESSION['first2']=$_POST['first'];
 $_SESSION['last2']= $_POST['last'];
 $_SESSION['subject2']=$_POST['subject'];
 $_SESSION['score2']=$_POST['score'];
?>
<!DOCTYPE html>
<html lang=eng>
<head>
<title>
Dynamic php and html table testing
</title>
<style>
html, body{
	width:100%;
	height:100%;
	margin:0%;
	font-family:"helvetica","verdana","calibri", "san serif";
	overflow:hidden;
	padding:0%;
	border:0%;
	}
	table{
	width:50%;
	border:2px solid #343434;
	margin-left:auto;
	margin-right:auto;
	}
	td{
	text-align:center;
    width:25%;
	border:2px solid #343434;
	}
	#he{
height:10%;
background-color:#343434;
margin-bottom:2%;
}
	</style>
	</head>
	<body bgcolor="#e5a010">
	<div id=he>


</div>
	<div >
	<table>
	<thead>
	Student Result Score
	</thead>
	<tbody>
	<tr>
	<th>Firstname</th><th>Lastname</th><th>Subject</th><th>Score</th>
	</tr>
	<tr>
 <?php
 echo "<td>" . $_SESSION['first']. "</td>";
 echo "<td>" . $_SESSION['last']. "</td>";
 echo "<td>" . $_SESSION['subject']. "</td>";
 echo "<td>" . $_SESSION['score']. "</td>";
 echo "</tr>";
 
 echo "<tr>";
 echo "<td>" . $_SESSION['first1']. "</td>";
 echo "<td>" . $_SESSION['last1']. "</td>";
 echo "<td>" . $_SESSION['subject1']. "</td>";
 echo "<td>" . $_SESSION['score1']. "</td>";
 echo "</tr>";
 
 echo "<tr>";
 echo "<td>" . $_SESSION['first2']. "</td>";
 echo "<td>" . $_SESSION['last2']. "</td>";
 echo "<td>" . $_SESSION['subject2']. "</td>";
 echo "<td>" . $_SESSION['score2']. "</td>";
 echo "</tr>";
//this removes all the session variable
 session_unset();
 //this functions destroys the session
 session_destroy();
}
?>
<tbody>
</table>
</div>
</body>
</html>

We check how many times our script has received a record, if it’s not up to three we increment our counter variable, store each record received in our session array and display the form to the teacher(we do this by calling the include("index.html") function). After three records has been submitted we reset the counter variable and output an html table containing each student record to the browser. It is considered good practice to clean up after using session. we call php session_unset() to delete all session data and session_destroy() to the destroy the session.

2.3 Html Tables

Let’s start by explaining each tag used in our example

  1. The <table> tag: it is used to define/create a table in html
  2. The <thead>tag: it is used to define an header for a table.
  3. The <tbody> tag: it is used in conjunction with the <thead>and <tfoot> tag to describe a table. It always comes after the <thead> tag and before the <tfoot> tag
  4. The <tr> tag: it is used to define a row in an html table
  5. The <th> tag: This tag defines a table header.
  6. The <td> tag: This tag defines a cell in an html table

2.4 Other table tags worthy of mention

  1. <caption> tag : This is an optional tag, it gives the title of the table. It is always the first descendant of the <table> tag.
  2. <tfoot> : This tag defines a set of rows summarizing the columns of the table.

3. Summary

In this example we have learnt about dynamic php and html tables(what they mean and how to use them). we also discussed about html forms and php sessions(how to create and destroy them).

4. Download the source code

Download
You can download the full source code of this example here:  Phphtmltableexample

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook

 

and many more ....

 

I have read and agree to the terms & conditions

 

Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments