Dynamically Creating Tabs in PHP
By Andrew R
Views: 76270

In this tutorial you will learn how to create simple tabs in PHP. The code dynamically creates tabs from a PHP array. Click Here to view a demo

For improved version of php tabs please click :PHP Tabs

Dynamically Creating Tabs in PHP (Page 1 of 1)

The first step in creating a tabbed application is to design the tabs in an image editing application like Adobe Photoshop or any other application of your choice. A sample of the tabs we are going to create in this tutorial is shown below. I have created those tabs in Adobe Photoshop

The next step is to clip the corners of those tabs. Four images will be required, the two corners (left and right) of selected tab and two corners (left and right) of the normal tab. Center of the tab can be filled with color.

But in this example I have used glossy effect on the tabs so the center of the tab cannot be filled with color. A slice will be required for the middle as well, so a total of the following six images will be used in the tabbed interface

Left corner of selected tab
Image to be repeated in the center of selected tab
Right corner of selected tab
Left corner of normal tab
Image to be repeated in the center of normal tab
Right corner of normal tab

Below is the complete PHP code to create tabs.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Using Tabs With PHP</title>



  $links[]="Contact Us";

  <table cellpadding="0px" cellspacing="0">

      <td width="30px">&nbsp;</td>
      <td style="padding-left:3px">

  <table cellpadding="0" cellspacing="0">
    <tr height="28px">

      <td width="15px"><img src="images/selected-left.gif" /></td>
      <td style="background-image:url(images/selected.gif);" class="link"><?=$links[$i]?></td>

      <td width="15px"><img src="images/selected-right.gif" /></td>

      <? } else { ?>
      <td style="padding-left:3px">
  <table cellpadding="0" cellspacing="0">

    <tr height="28px">
      <td width="13px"><img src="images/tab-left.gif" /></td>

      <td style="background-image:url(images/tab.gif);"><a href="?id=<?=$i+1?>" class="link"><?=$links[$i]?></a></td>

      <td width="13px"><img src="images/tab-right.gif" /></td>

      <? } // else end
      }  //for end
      <td width="30px">&nbsp;</td>

      <td colspan="<?=$total_links+2?>" bgcolor="#1895D5">&nbsp;</td>

      <td colspan="<?=$total_links+2?>" style="border:1px #1895D5 solid;">
        <h1 style="color:#1895D5">The text for linkid<?=$id?> goes here ...</h1>


Have you ever tried converting a JQuery plugin (slider, menu, news ticker etc) into a PHP class? Implementing a JQuery plugin like this has a lot of benefits if you have to use the same plugin in more than one projects/websites. This article discusses the benefits of this technique . Read More Integrating JQuery/JavaScript with PHP


hello nice and simple code but if you code explain the code how does it work that will be great and if possible how do you add a form to generate the tabs


Your blog is interesting! Keep up the good work!


this dynamical form is a gud na


Good one.thanks ma


good work


it's so flexible , good look ,well work Thanks to Andrew R

James Moralde

Most tabs I commonly see are clickable anywhere within the tab. Your code here requires one to click on the text on the tab only. Anyway, it is cool enough to be able to create stylish tabs like this. Thanks.


James here is the version with full clickable tabs

king kane

how do i alter the code to direct the different pages to their different .php files that i have. I mean the syntax along the the line:

if(id == array[1]){



or something like that. Please help thanks!


Is it possible to use this great script without the ID's in the navigation but the menu names ?


I'm trying to figure it out, but can't fix it that fast.






Good php code. Thank you for sharing this code with everyone.

php custum developer

Guys you done a great job... i got your point of explanation...

Thank you guys!!!


That was what i needed. Thanks :)

Bashir Ahmed



The problem is that php tell me that there is a issue.

Undefined index: id ??

Any answer?

Posting comments has been disabled temporarily