How we can convert table based PHP website into responsive (Part-1)

Published on : April 27, 2026

Author: wahid

Category: Responsive Design

In this blog I am going to describe what types of problems I faced when I convert table based PHP website into responsive website and how I solve those problems.

Problem #1

First Problem I faced into header. The previous site used an image inside td tag and apply inline css for that image

[sourcecode]</pre>
<img src="dti_images/header.png" alt="Dallas diamond jewelry store and Dallas fine jeweler" width="993" height="134" />
<pre>

[/sourcecode]

Solution

To make it responsive firstly I remove inline css for the image.

[sourcecode]</pre>
<img src="dti_images/header.png" alt="Dallas diamond jewelry store and Dallas fine jeweler" />
<pre>

[/sourcecode]

Now you need to write css for that image. I use fixed height of image for all window.

[sourcecode]
.headertop img{
width:100%;
height:134px;
}
[/sourcecode]

Problem #2

Next problem is in previous code they used a background for menu.

Solution

To make responsive you can not use those image. That’s why I made design using css.

Html

[sourcecode]</pre>
<div id="menu"></div>
<pre>
[/sourcecode]

CSS

[sourcecode]
.dropmenu {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
border:0px solid #ffffff;
border-right: none;
}

.dropmenu li a, .dropmenu li{
float: left;
}

.dropmenu li{
list-style: none;
position: relative;
background:url(./images/menu-line.gif) top left no-repeat;
line-height:29px;
}
.dropmenu li:first-child {
background:none;
}
[/sourcecode]

Problem #3

Our next problem is about slider image. The previous site used inline css for image.

Solution

At first I remove inline css for the image. Then I add CSS for slider image

[sourcecode]
img {
border:none;
border-width:0px;
-moz-border-image: 0 0 0 0;
max-width:100%;
height:auto;
}
[/sourcecode]

Problem #4

Next problem is about body. In previous code the used fixed width for the like as 993 px

Solution

I used ‘ % ‘ at width when for that device which is smaller than 1024px;

CSS

[sourcecode]
@media screen and (max-width: 1024px) {
#framebody {
width: 100%;
}
}
[/sourcecode]

I will describe my rest of the problems and solution in my next blog.