Link to home
Start Free TrialLog in
Avatar of r_kar
r_kar

asked on

modify this design?

Hi,

can anyone moify the  following code in a professional way?

<HTML>
<HEAD>
<TITLE> html </TITLE>
</HEAD>
<BODY>
<TABLE border="1" cellpadding="7" cellspacing="0" width="100%">
<TR bgcolor="#c3d3e3">
      <TD nowrap>Field 1</TD>
      <TD nowrap>Field 2</TD>
      <TD nowrap>Field 3</TD>
      <TD nowrap>Field 4</TD>
      <TD nowrap>Field 5</TD>
      <TD nowrap>Field 6</TD>
      <TD nowrap>Field 7</TD>
</TR>
<TR>
      <TD><input type="text" size="10"></TD>
      <TD><input type="text" size="10"></TD>
      <TD><input type="text" size="10"></TD>
      <TD><input type="text" size="10"></TD>
      <TD><input type="text" size="10"></TD>
      <TD><input type="text" size="10"></TD>
      <TD><input type="text" size="10"></TD>
</TR>
</TABLE>
<TABLE border="1" cellpadding="4" cellspacing="0" width="100%">
<TR  bgcolor="#c3d3e3">
      <TD nowrap>Field 11 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Field 12&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Field 13</TD>
      <TD nowrap>Field 14</TD>
      <TD nowrap>Field 15</TD>
      <TD nowrap>Field 16</TD>
</TR>
<TR>
      <TD><input type="text" size="10">&nbsp;<input type="text" size="10">&nbsp;
      <input type="text" size="10"></TD>
      <TD><input type="text" size="10"></TD>
      <TD><input type="text" size="10"></TD>
      <TD><input type="text" size="10"></TD>
      
</TR>
</TABLE>
<TABLE border="1" cellpadding="3" cellspacing="0" width="100%">
<TR  bgcolor="#c3d3e3">
      <TD nowrap>Field 21</TD>
      <TD nowrap>Field 22</TD>
      <TD nowrap>Field 23</TD>
      
</TR>
<TR>
      <TD><input type="text" size="10"></TD>
      <TD><input type="text" size="10"></TD>
      <TD><input type="text" size="10"></TD>
            
</TR>
</TABLE>
</BODY>
</HTML>


I am using three different table having different <TD> structure... Is there any good code that will not tamper the page in IE browser..

Thanks
Avatar of HonorGod
HonorGod
Flag of United States of America image

Here's one way to do it (i.e., using loops):
----------------------------------------------------------------------
<html>
<head>
<title> html </title>
</head>
<body>
<table border="1" cellpadding="7" cellspacing="0" width="100%">
  <script type='text/javascript'>
    var fields = 'Field 1,Field 2,Field 3,Field 4,Field 5,Field 6,Field 7'.split( ',' );
    document.write( '<tr bgcolor="#c3d3e3">' );
    for ( var i = 0; i < fields.length; ++i ) {
      document.write( '<td nowrap>' + fields[ i ] + '</td>' );
    }
    var inputField = '<input type="text" size="10"></input>';
    document.write( '</tr><tr>' );
    for ( var i = 0; i < fields.length; ++i ) {
      document.write( '<td>' + inputField + '</td>' );
    }
    document.write( '</tr>' );
  </script>
</table>

<table border="1" cellpadding="4" cellspacing="0" width="100%">
  <script type='text/javascript'>
    var fields = 'Field 11,Field 12,Field 13'.split( ',' );
    var filler = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
    document.write( '<tr bgcolor="#c3d3e3"><td nowrap>' );
    for ( var i = 0; i < fields.length; ++i ) {
      document.write( fields[ i ] + filler );
    }
    document.write( '</td>' );
    var fields = 'Field 14,Field 15,Field 16'.split( ',' );
    for ( var i = 0; i < fields.length; ++i ) {
      document.write( '<td nowrap>' + fields[ i ] + '</td>' );
    }
    var inputField = '<input type="text" size="10"></input>';
    document.write( '</tr><tr><td>' );
    for ( var i = 0; i < 3; ++i ) {
      document.write( inputField + '&nbsp;' );
    }
    document.write( '</td>' );
    for ( var i = 0; i < fields.length; ++i ) {
      document.write( '<td>' + inputField + '</td>' );
    }
    document.write( '</tr>' );
  </script>
</table>

<table border="1" cellpadding="3" cellspacing="0" width="100%">
  <script type='text/javascript'>
    var fields = 'Field 21,Field 22,Field 23'.split( ',' );
    document.write( '<tr bgcolor="#c3d3e3">' );
    for ( var i = 0; i < fields.length; ++i ) {
      document.write( '<td nowrap>' + fields[ i ] + '</td>' );
    }
    var inputField = '<input type="text" size="10"></input>';
    document.write( '</tr><tr>' );
    for ( var i = 0; i < fields.length; ++i ) {
      document.write( '<td>' + inputField + '</td>' );
    }
    document.write( '</tr>' );
  </script>
</table>
</body>
</html>
SOLUTION
Avatar of HonorGod
HonorGod
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of r_kar
r_kar

ASKER

Hi HonorGod ,
Thanks for the response.
Actually I want to modify my existing HTML code. Now I am using 3 tables to display the following page.
My intension is to get good simplified code .... Can I get same design Using table inside table like that? And proper alignment for each field etc...

My previous question was not clear to EE Experts. Hope, now I explained my question

Thanks
Give this a try.  I've used some styling, but not sure if you'll like the textboxes:
<HTML>
<HEAD>
<TITLE> html </TITLE>
<style type=text/css>
.table_withgrid {
  border-collapse: collapse;
  border-spacing: 0;
  border-right: solid #a9a9a9 1px;
  border-top: solid #a9a9a9 1px;
}
.table_withnogrid {
  border-collapse: collapse;
  border-spacing: 0;
}
.table_withgrid td  {
  border-left: solid #a9a9a9 1px ;
  border-bottom: solid #a9a9a9 1px;
  border-right: solid #a9a9a9 0px;
  border-top: solid #a9a9a9 0px;
      PADDING-RIGHT: 5px; PADDING-LEFT: 5px;
}
.table_withnogrid td  {
      PADDING-RIGHT: 5px; PADDING-LEFT: 5px;
}
.tr_blue  {
  background-color=#c3d3e3;
}
.input_text1 {
 FONT-SIZE: 11px;
 FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;  
 COLOR: #000000;
 BACKGROUND-COLOR: #FFFFFF;
 border: 1px solid #a9a9a9;
}
</style>

</HEAD>
<BODY>
<TABLE class=table_withgrid border="0" cellpadding="2" cellspacing="0" width="100%">
<TR class=tr_blue>
     <TD nowrap>Field 1</TD>
     <TD nowrap>Field 2</TD>
     <TD nowrap>Field 3</TD>
     <TD nowrap>Field 4</TD>
     <TD nowrap>Field 5</TD>
     <TD nowrap>Field 6</TD>
     <TD nowrap>Field 7</TD>
</TR>
<TR>
     <TD><input type="text" class=input_text1 size="10"></TD>
     <TD><input type="text" class=input_text1 size="10"></TD>
     <TD><input type="text" class=input_text1 size="10"></TD>
     <TD><input type="text" class=input_text1 size="10"></TD>
     <TD><input type="text" class=input_text1 size="10"></TD>
     <TD><input type="text" class=input_text1 size="10"></TD>
     <TD><input type="text" class=input_text1 size="10"></TD>
</TR>
</TABLE>
<TABLE class=table_withgrid border="0" cellpadding="2" cellspacing="0" width="100%">
<TR class=tr_blue>
     <TD nowrap>Field 11 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Field 12&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Field 13</TD>
     <TD nowrap>Field 14</TD>
     <TD nowrap>Field 15</TD>
     <TD nowrap>Field 16</TD>
</TR>
<TR>
     <TD><input type="text" class=input_text1 size="10">&nbsp;<input type="text" class=input_text1 size="10">&nbsp;
     <input type="text" class=input_text1 size="10"></TD>
     <TD><input type="text" class=input_text1 size="10"></TD>
     <TD><input type="text" class=input_text1 size="10"></TD>
     <TD><input type="text" class=input_text1 size="10"></TD>
     
</TR>
</TABLE>
<TABLE class=table_withgrid border="0" cellpadding="2" cellspacing="0" width="100%">
<TR class=tr_blue>
     <TD nowrap>Field 21</TD>
     <TD nowrap>Field 22</TD>
     <TD nowrap>Field 23</TD>
     
</TR>
<TR>
     <TD><input type="text" class=input_text1 size="10"></TD>
     <TD><input type="text" class=input_text1 size="10"></TD>
     <TD><input type="text" class=input_text1 size="10"></TD>
         
</TR>
</TABLE>
</BODY>
</HTML>

------------------------------------------------------------------------------------------------------------

Question:  Do the tables need to be horizontal?  Why not something like this:

<HTML>
<HEAD>
<TITLE> html </TITLE>
<style type=text/css>
.table_withgrid {
  border-collapse: collapse;
  border-spacing: 0;
  border-right: solid #a9a9a9 1px;
  border-top: solid #a9a9a9 1px;
}
.table_withnogrid {
  border-collapse: collapse;
  border-spacing: 0;
}
.table_withgrid td  {
  border-left: solid #a9a9a9 1px ;
  border-bottom: solid #a9a9a9 1px;
  border-right: solid #a9a9a9 0px;
  border-top: solid #a9a9a9 0px;
      PADDING-RIGHT: 5px; PADDING-LEFT: 5px;
}
.table_withnogrid td  {
      PADDING-RIGHT: 5px; PADDING-LEFT: 5px;
}
.tr_blue  {
  background-color=#c3d3e3;
}
.td_blue  {
  background-color=#c3d3e3;
}
.input_text1 {
 FONT-SIZE: 11px;
 FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;  
 COLOR: #000000;
 BACKGROUND-COLOR: #FFFFFF;
 border: 1px solid #a9a9a9;
}
</style>

</HEAD>
<BODY>
<TABLE class=table_withgrid border="0" cellpadding="2" cellspacing="0" width=400px>
<TR>
     <TD class=td_blue nowrap colspan=2 width=140px>Section 1</TD>
</TR>
<TR>
     <TD class=td_blue nowrap width=140px>Field 1</TD>
     <TD><input type="text" class=input_text1 size="30" width=260px></TD>
</TR>
<TR>
     <TD class=td_blue nowrap>Field 2</TD>
     <TD><input type="text" class=input_text1 size="30"></TD>
</TR>
<TR>
     <TD class=td_blue nowrap>Field 3</TD>
     <TD><input type="text" class=input_text1 size="30"></TD>
</TR>
<TR>
     <TD class=td_blue nowrap>Field 4</TD>
     <TD><input type="text" class=input_text1 size="30"></TD>
</TR>
<TR>
     <TD class=td_blue nowrap>Field 5</TD>
     <TD><input type="text" class=input_text1 size="30"></TD>
</TR>
<TR>
     <TD class=td_blue nowrap>Field 6</TD>
     <TD><input type="text" class=input_text1 size="30"></TD>
</TR>
<TR>
     <TD class=td_blue nowrap>Field 7</TD>
     <TD><input type="text" class=input_text1 size="30"></TD>
</TR>
</TABLE>
<br>

<TABLE class=table_withgrid border="0" cellpadding="2" cellspacing="0" width=400px>
<TR>
     <TD class=td_blue nowrap colspan=2 width=140px>Section 2</TD>
</TR>
<TR>
     <TD class=td_blue nowrap width=140px>Field 11</TD>
     <TD><input type="text" class=input_text1 size="30" width=260px></TD>
</TR>
<TR>
     <TD class=td_blue nowrap>Field 12</TD>
     <TD><input type="text" class=input_text1 size="30"></TD>
</TR>
<TR>
     <TD class=td_blue nowrap>Field 13</TD>
     <TD><input type="text" class=input_text1 size="30"></TD>
</TR>
<TR>
     <TD class=td_blue nowrap>Field 14</TD>
     <TD><input type="text" class=input_text1 size="30"></TD>
</TR>
<TR>
     <TD class=td_blue nowrap>Field 15</TD>
     <TD><input type="text" class=input_text1 size="30"></TD>
</TR>
<TR>
     <TD class=td_blue nowrap>Field 16</TD>
     <TD><input type="text" class=input_text1 size="30"></TD>
</TR>
</TABLE>
<br>

<TABLE class=table_withgrid border="0" cellpadding="2" cellspacing="0" width=400px>
<TR>
     <TD class=td_blue nowrap colspan=2 width=140px>Section 3</TD>
</TR>
<TR>
     <TD class=td_blue nowrap width=140px>Field 21</TD>
     <TD><input type="text" class=input_text1 size="30" width=260px></TD>
</TR>
<TR>
     <TD class=td_blue nowrap>Field 22</TD>
     <TD><input type="text" class=input_text1 size="30"></TD>
</TR>
<TR>
     <TD class=td_blue nowrap>Field 23</TD>
     <TD><input type="text" class=input_text1 size="30"></TD>
</TR>
</TABLE>
<br></BODY>
</HTML>


ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I looks even better when setting that font to bold on that td style:

.td_blue  {
  background-color: #c3d3e3;
  COLOR: #FFFFFF;
  FONT-SIZE: 13px;
  FONT-WEIGHT: bold;
}
you should not use tables and use <fieldset> and <label> instead.  then use CSS to lay it out the way you want.
the final result will be very different from your current layout, but that's how you're supposed to code forms.
Hey, GrandSchtroumpf, can you please provide a working example.  I'd love to see an alternative to using tables for this type of form...

Preece
Preece, the question is "can anyone moify the  following code in a professional way?"
The only professional way is to let go the tables...
The form is just a bunch of sections (fieldsets) that contain text fields with their corresponding labels... that's the most common type of form.
For examples you can google "css form example".
I'm not challenging your idea, I'm actually interested in it!  If it is a better solution what I proposed, then great.  If I like it, I'll begin using it!  So, I'll go google if you don't want to paste in some code....  :-<

Preece
It's not that i don't want to paste some code, it's more like i don't have anthing specific to post.
The first google result http://jeffhowden.com/code/css/forms/ is a good place to start.