[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 249
  • Last Modified:

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
0
r_kar
Asked:
r_kar
  • 5
  • 3
  • 2
  • +1
2 Solutions
 
HonorGodCommented:
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
 
HonorGodCommented:
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
 
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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:
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
 
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

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 5
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now