I have a Table based layout. I want to migrate it to a DIV based structure .
Here is my sample Jsfiddle code:
Could you please suggest me migration steps ?
Should I replace td tag with div tag ?
Should I replace tr tag with each div tag ?
Should I replace table tag with with div tag ?
Is there anything else to consider ?
Could you please suggest an easy workaround ?
Hi,
You shouldn’t use label elements unless they refer to form elements. Use something more semantic. The name and reason fields are almost tabular data so you could get away with using a table for them but not that monstrosity that you were using.
A simple styled table would have done.
Another way to do it would be to use a DL list for the name and reason fields.
Something like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0
}
body { font-family: Verdana, Arial, Helvetica, sans-serif; }
.pay {
font-size:69%;
padding:20px;
}
.pay dl, .pay dt, .pay dd { margin:0; }
.pay dt, .pay dd {
display:inline-block;
*display:inline;/* ie7/6 hack for inline block*/
zoom:1.0;/* "" */
vertical-align:middle;
width:25%;
margin:0 0 20px;
}
.pay dd { width:70%; }
.pay h3 {
text-align:center;
margin:1em 0;
}
.pay form div {
padding-left:25%;
margin-top:-10px;
}
</style>
</head>
<body>
<div class="pay">
<h3>Lorem ipsum dolor sit</h3>
<dl>
<dt>Name:</dt>
<dd>B & khtuurs in rhoncus ujetp </dd>
<dt>Reason:</dt>
<dd>Test</dd>
<dt>Due amount</dt>
<dd>200.00</dd>
</dl>
<form>
<div>
<input type="submit" value="Pay" name="method:getPaymentConfirmation" id="getPaymentServicesViewAction__getPaymentConfirmation">
<input type="submit" value="Back" id="getPaymentServicesViewAction_0">
</div>
</form>
</div>
</body>
</html>
Of course it all depends on what happens next as there are many ways to go about this.
If you have form and input fields you can use the same process but without the dl as such.
e.g.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0
}
body { font-family: Verdana, Arial, Helvetica, sans-serif; }
.pay {
font-size:69%;
padding:20px;
}
.pay label, .inp {
display:inline-block;
*display:inline;/* ie7/6 hack for inline block*/
zoom:1.0;/* "" */
vertical-align:middle;
width:25%;
margin:0;
}
.pay label{text-align:right;}
.inp { width:50%;margin-left:1em }
.pay-button {
padding-left:25%;
margin-top:-10px;
}
.pay-button input{margin-left:1em}
.inprow {
clear:both;
margin:20px 0;
}
</style>
</head>
<body>
<div class="pay">
<form>
<fieldset>
<legend>Lorem ipsum dolor sit</legend>
<div class="inprow">
<label for="name">Name:</label>
<input class="inp" type="text" name="name" id="name">
</div>
<div class="inprow">
<label for="reason">Reason:</label>
<input class="inp" type="text" name="reason" id="reason">
</div>
<div class="inprow">
<label for="amount">Due Amount:</label>
<input class="inp" type="text" name="amount" id="amount">
</div>
<div class="pay-button">
<input type="submit" value="Pay" name="method:getPaymentConfirmation" id="getPaymentServicesViewAction__getPaymentConfirmation">
<input type="submit" value="Back" id="getPaymentServicesViewAction_0">
</div>
</fieldset>
</form>
</div>
</body>
</html>
Thanks paul,
Can any GuI editor help me doing this ?
I have many existing pages where I want to this. Is there any editor which could help me converting things visually …instead of typing one by one…any time saver approach ?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0
}
body { font-family: Verdana, Arial, Helvetica, sans-serif; }
.pay {
font-size:69%;
padding:20px;
}
.pay label, .inp {
display:inline-block;
*display:inline;/* ie7/6 hack for inline block*/
zoom:1.0;/* "" */
vertical-align:middle;
width:25%;
margin:0;
}
.pay label{text-align:right;}
.inp { width:50%;margin-left:1em }
.pay-button {
padding-left:25%;
margin-top:-10px;
}
.pay-button input{margin-left:1em}
.inprow {
clear:both;
margin:20px 0;
}
</style>
</head>
<body>
<div class="pay">
<form>
<fieldset>
<legend>Lorem ipsum dolor sit</legend>
<div class="inprow">
<label for="name">Name:</label>
<input class="inp" type="text" name="name" id="name">
</div>
<div class="inprow">
<label for="reason">Reason:</label>
<input class="inp" type="text" name="reason" id="reason">
</div>
<div class="inprow">
<label for="amount">Due Amount:</label>
<input class="inp" type="text" name="amount" id="amount">
</div>
<div class="pay-button">
<input type="submit" value="Pay" name="method:getPaymentConfirmation" id="getPaymentServicesViewAction__getPaymentConfirmation">
<input type="submit" value="Back" id="getPaymentServicesViewAction_0">
</div>
</fieldset>
</form>
</div>
</body>
</html>
Hi,
Unfortunately there is no quick approach to converting an old style table layout into a CSS layout.
The issue is that if the site is old and table based then you should be doing a full redesign anyway and bring it up to scratch and not a patch and repair job. If you want patch and repair job then leave it as it is and just fix what’s wrong.
You mentioned something about converting to div because you want the page to remain the size when you resize the window but that doesn’t really make sense and indeed these days you should be designing with responsive web design in mind anyway. Notwithstanding the above you can make the table layout behave more or less as you want anyway and can fix the width if needed without problem. It all depends on what you are trying to achieve?
yes…you are right. i want to do this conversion to div because i want the page to remain the size when you resize the window…i thought table can not be fixed to remain the size when i resize the window…and so was thinking about migration to div.
Notwithstanding the above you can make the table layout behave more or less as you want anyway and can fix the width if needed without problem. It all depends on what you are trying to achieve?
yes…exactly… thats my requirement indeed ….what piece of code can help me to keep the same size when i resize the browser window whenever I am using table layout in the page ?
Forget about divs and work out what tags semantically identify your content.
Start by marking up your content with the most semantically correct tag for each section of the content. Only use divs for blocks of content where there isn’t a more semantic tag to use.
Don’t worry about appearance when writing the HTML. You can style the HTML in all sorts of different ways for different devices using CSS once the HTML is written properly.
It sounds like you are saying that you want your page/table to have a fixed width. Your table currently has a width of 100% which is fluid. Change that to a fixed number of pixels or ems and the width of the table will not change (if that’s what you really want).
.tbl {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
width: [color=red]100%[/color]; /* CHANGE to a fixed width such as 900px or whatever width you wish */
I want … when browser window is re-sized , entire table to remain visible to the user.
anyway, I checked your suggestion…this does not work.
If this works for you , please post code so that I can test the same here.
I think there is some language confusion here
I want … when browser window is re-sized , entire table to remain visible to the user.
You seem to be asking for a fixed pixel width table in one breath but in another you are saying you want the table resized to fit the window.
If the table is in percentage then it will stretch with the window as required but there will come a point when it can’t get any smaller due to the content it holds and then will stay fixed at that size.
If the table is a fixed pixel width (say 900px) then it will always remain at 900px no matter the window size which means that on viewport widths smaller than 900px you will get a scrollbar triggered to view the content that is outside the viewport.
I think you may need to show some screenshots of what you want or what you don’t want as I’m a little confused now
About the language confusion:
The word “fixed” has in css the special meaning “locked size, in px or another unit”.
2. Do you mean “I thought a table can not be made in a way that the design of the table will remain when I resize the window”?
You can see the scaling of the tables in a normal online page, if you change the browser-window (it’s difficult to see in the JSfiddle window).
[CENTER]
mobile in landscape orientation (480*320px)
If you don’t want that the table is spread very wide on larger screens, you can give the main table a maximum width. In case the screen width is under the maximimum, the 100% is working. - If you set the margin-left and -right into “auto”, the whole table will be centered on the page at large screens:
.tbl {
...
width: 100%;
max-width: 700px;
margin: 0 auto;
}
[CENTER]
see isse in video: 
see html code
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<script src="/PaymentServices/js/bootstrap.min.js"></script>
<link href="/PaymentServices/css/bootstrap.min.css" rel="stylesheet">
<link href="/PaymentServices/css/common.css" rel="stylesheet">
<script src="/PaymentServices/js/jquery.js"></script>
</head>
<body>
<div id="es-container" class="container_css" style="margin: auto;width:860px;height:100%;">
<script type="text/javascript">
var min = 10;
var reset = 12;
var max = 14;
function increaseAllFont() {
increaseFontSize('input');
increaseFontSize('td');
increaseFontSize('a');
increaseFontSize('select');
increaseFontSize('span');
increaseFontSize('textarea');
increaseFontSize('th');
increaseFontSize('label');
}
function decreaseAllFont() {
decreaseFontSize('input');
decreaseFontSize('td');
decreaseFontSize('a');
decreaseFontSize('select');
decreaseFontSize('span');
decreaseFontSize('textarea');
decreaseFontSize('th');
decreaseFontSize('label');
}
function resetAllFont() {
defaultFontSize('input');
defaultFontSize('td');
defaultFontSize('a');
defaultFontSize('select');
defaultFontSize('span');
defaultFontSize('textarea');
defaultFontSize('th');
defaultFontSize('label');
}
function increaseFontSize(elem) {
var p = document.getElementsByTagName(elem);
var unit = "px";
for(i = 0; i < p.length; i++) {
if(p[i].style.fontSize) {
if(p[i].style.fontSize.search("px")>0)
{
var s = parseInt(p[i].style.fontSize.replace("px",""));
}
else if(p[i].style.fontSize.search("pt")>0)
{
var s = parseInt(p[i].style.fontSize.replace("pt",""));
unit = "pt";
}
else{
var s = reset;
}
} else {
var s = reset;
}
if(s != max) {
s += 1;
}
p[i].style.fontSize = s + unit ;
}
}
function defaultFontSize(elem) {
var p = document.getElementsByTagName(elem);
var unit = "px";
var s = reset;
for(i=0; i<p.length; i++) {
if(p[i].style.fontSize) {
if(p[i].style.fontSize.search("pt")>0)
{
unit = "pt";
}
p[i].style.fontSize = s+ unit ;
}
}
}
function decreaseFontSize(elem) {
var p = document.getElementsByTagName(elem);
var unit = "px";
for(i=0; i<p.length; i++) {
if(p[i].style.fontSize) {
if(p[i].style.fontSize.search("px")>0)
{
var s = parseInt(p[i].style.fontSize.replace("px",""));
}
else if(p[i].style.fontSize.search("pt")>0)
{
var s = parseInt(p[i].style.fontSize.replace("pt",""));
unit = "pt";
}
else {
var s = reset;
}
} else {
var s = reset;
}
if(s != min) {
s -= 1;
}
p[i].style.fontSize = s + unit ;
}
}
function changeLocale(locale) {
var url = "view/index.action?lang=" + locale;
window.location = url;
}
</script>
<style type="text/css">
#es_header_top {
background: url("/PaymentServices/images/slbfe_header.jpg") repeat-x top left;
height: 90px;
width: 860px;
}
#es_header_navbar {
background-color: #33559B;
}
</style>
<div id="es-header">
<header>
<div id="es_header_top"></div>
<div id="es_header_navbar">
<table style="width:100%; height: 40px">
<tr>
<td style="width:20%; padding-left: 20px">
<a href="#" target="_blank"><font color="white">Home</font></a>
</td>
<td id="font_controller" style="font-size:13px"></td>
<td align="right">
<a href="#" onclick="changeLocale('xy')"><img src="/PaymentServices/images/xy.gif" /></a>
<a href="#" onclick="changeLocale('abc')"><img src="/PaymentServices/images/abc.gif" /></a>
<a href="#" onclick="changeLocale('def')"><img src="/PaymentServices/images/def.gif" /></a>
<a href="#" target="_blank"><img src="/PaymentServices/images/sinhala.jpg"/></a>
<a href="#" target="_blank"><img src="/PaymentServices/images/tamil.jpg" /></a>
<a href="#" onclick="increaseAllFont()"><img src="/PaymentServices/images/1.jpg" /></a>
<a href="#" onclick="decreaseAllFont()"><img src="/PaymentServices/images/2.jpg" /></a>
<a href="#" onclick="resetAllFont()"><img src="/PaymentServices/images/3.jpg" /></a>
<a href="#" target="_blank"><img src="/PaymentServices/images/gov.png" /></a>
</td>
</tr>
</table>
</div>
</header>
</div>
<div id="es-content">
<form id="getPaymentServicesViewAction" name="getPaymentServicesViewForm" action="/PaymentServices/view/getPaymentServicesViewAction.action" method="post">
<table class="tbl">
<tr class="portletHeaderBg">
<td>
<div class="portletHeader">
<div class="portletTitle"></div>
</div>
</td>
</tr>
<tr class="bg_errormsg">
<td colspan="2">
</td>
</tr>
<tr class="bg_errormsg">
<td colspan="2">
</td>
</tr>
<tr class="bg_errormsg">
<td colspan="2">
</td>
</tr>
<tr>
<td style="padding-left:8px;font-weight: bold;">
Pellentesque habitant Vestibulum tortor quam, feugiat vitae
</td>
</tr>
<tr>
<td>
<div>
<table class="tbl">
<tr>
<td>
<table class="tbl">
<tr>
<td class="space_height10" colspan="2">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae.<br><br>Pellentesque habitant morbi tristique senect.<br></td>
</tr>
<tr>
<td class="space_height10" colspan="2"></td>
</tr>
<tr>
<td class="space_height10" width="100%" colspan="2" style="font-weight: bold;">Pellentesque <span class="req_field">*</span>
: <select name="paymentTypeId" id="paymentType" style="border:1px #912429 solid;">
<option value="-1"
>Select</option>
<option value="1">Pellentesque habitant morbi</option>
<option value="2">Pellentesque habitant morbi</option>
<option value="3">Pellentesque habitant morbi</option>
<option value="4">Pellentesque habitant morbi</option>
<option value="5">Pellentesque habitant morbi</option>
<option value="6">Pellentesque habitant morbi</option>
</select>
<input type="submit" id="getPaymentServicesViewAction__getInputRefNo" name="method:getInputRefNo" value="Submit" style="background-color:#DFF4FF;border:1px #912429 solid;height:20px;width:80px;"/>
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="actionbutton"></td>
</tr>
</table>
<table class="tbl">
<tr>
<td></td>
</tr>
</table>
</form>
</div>
<div id="es-footer" class="fixed-bottom">
<table>
<tr>
<td valign="top" height="60" id="footer_td" colspan="2" align="center">
<div id="footer_menu_div" >
<a href="/index.php">
</a><a href="index.php">Pellentesque </a>|<a href="news.php">Pellentesque</a>|<a href="/article.php?article=23">Pellentesque</a>|<a href="/article.php?article=28">Pellentesque </a>|<a href="/article.php?article=48">Pellentesque </a>|<a href="/article.php?article=32">Pellentesque </a>|<a href="/article.php?article=68">Pellentesque </a>|<a href="/article.php?article=58">Pellentesque </a>|<a href="/article.php?article=67">Pellentesque </a></div>
<div id="footer_text_div">
© Pellentesque Pellentesque Pellentesque - Pellentesque
</div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
The first <div> inside the <body> has a fixed width assigned. Delete that fixed width and see what changes (or change it to [size=+1][color=blue]max-width:860px;[/color][/size]).
<div id="es-container" class="container_css" style="margin: auto;[color=red]width:860px;[/color]height:100%;">
Also, in your on-page CSS, delete or change another appearance of that same width value.
#es_header_top {
background: url("/PaymentServices/images/slbfe_header.jpg") repeat-x top left;
height: 90px;
[color=red]width: 860px;[/color]
}
It does not work. I have tested it.
Did you replace BOTH of those red properties with the blue property that I suggested? BOTH of them?
I am unable to access your common.css stylesheet, so there may be other code in the common.css stylesheet that is also setting a fixed width on the page. Please include a link to the common.css stylesheet.
I tried it too, and I was able to narrow the width of the page and the table narrowed with it without triggering a scrollbar… in Firefox. Please post a link to the code that you have tested, or post new code again along with a screen shot showing how it does not work. ALSO please describe how it fails. Do not just say, “it does not work”, describe HOW it does not work.
Thank you.
Yes…but I missed footer part.
This works now … fixed.
Thanks.
You’re welcome. Glad it’s fixed.