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
r_karAsked:
Who is Participating?
 
PreeceCommented:
If you don't mind the vertical layout, this is looking even better yet:

<HTML>
<HEAD>
<TITLE> html </TITLE>
<style type=text/css>
body {
  FONT-FAMILY: arial, helvetica, verdana, sans-serif;
}
.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;
      COLOR: #FFFFFF;
      FONT-SIZE: 13px;

}
.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>Section 1</TD>
</TR>
<TR>
     <TD class=td_blue nowrap width=100px>Field 1</TD>
     <TD><input type="text" class=input_text1 size="30" width=300px></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>Section 2</TD>
</TR>
<TR>
     <TD class=td_blue nowrap width=100px>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>Section 3</TD>
</TR>
<TR>
     <TD class=td_blue nowrap width=100px>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>
0
 
HonorGodSoftware EngineerCommented:
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>
0
 
HonorGodSoftware EngineerCommented:
In fact, the first and third tables could be done using a function:
----------------------------------------------------------------------
<html>
<head>
<title> html </title>
  <script type='text/javascript'>
    function tableRows( data ) {
      var fields = data.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>
</head>
<body>
<table border="1" cellpadding="7" cellspacing="0" width="100%">
  <script type='text/javascript'>
    tableRows( 'Field 1,Field 2,Field 3,Field 4,Field 5,Field 6,Field 7' );
  </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'>
    tableRows( 'Field 21,Field 22,Field 23' );
  </script>
</table>
</body>
</html>
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
r_karAuthor Commented:
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
0
 
PreeceCommented:
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>


0
 
PreeceCommented:
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;
}
0
 
GrandSchtroumpfCommented:
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.
0
 
PreeceCommented:
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
0
 
GrandSchtroumpfCommented:
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".
0
 
PreeceCommented:
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
0
 
GrandSchtroumpfCommented:
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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.