Avatar of BeckyBair
BeckyBair
Flag for United States of America

asked on 

HTML Table not merge cells correctly

I have an example html page below.  What I'm trying to do is merge the cell with the Model Input box in it with the one to the right of it and still keep the Model Input box over the Label Input and Checkbox below it.  I hope that makes sense...  

I have attached a pic file to show what I want it to look like

Thank you in advance for any and all help...
<HTML>
<HEAD>
<TITLE>New Page 1</TITLE>
<STYLE>
.tabCtrl
   {
   height:100%;
   color:windowtext;
   background-color:buttonface;
   font:normal 8pt Tahoma;
   cursor:default;
   padding:2px 2px 2px 2px;
   }
 
.tabBody
   {
   height:100%;
   border-left:1px solid buttonhighlight;
   border-right:1px solid buttonshadow;
   border-top:1px solid buttonhighlight;
   }
</STYLE>
</HEAD>
<BODY>
 
<TABLE class="tabCtrl"  border="1" width="951">
  <TR>
   <TD width="99">Category:</TD>
   <TD width="122"><INPUT readonly style="width:114; height:22" size="0" value="Category Input" /></TD>
   <TD width="53">Model:</TD>
   <TD width="185"><INPUT readonly style="width:159; height:22" size="0" value="Model Input" /></TD>
   <TD width="452">*this text will not be here - empty here when merged - Want to join this column with Model Input column without moving where the Input starts 
     - still want the input to overlap the Label Inputs and Checkboxes below*</TD>
   <TD width="13">&nbsp;</TD>
  </TR>
  <TR>
   <TD width="99">Label:</TD>
   <TD colspan="3"><INPUT readonly style="width:356" size="0" value="Label Input" /></TD>
   <TD width="452"><INPUT type="checkbox" disabled="" value="ON">Checkbox</INPUT></TD>
   <TD width="13">&nbsp;</TD>
  </TR>
  <TR>
   <TD width="99">Label:</TD>
   <TD colspan="3"><INPUT readonly style="width:356" size="0" value="Label Input" /></TD>
   <TD width="452"><INPUT type="checkbox" disabled="" value="ON">Checkbox</INPUT></TD>
   <TD width="13">&nbsp;</TD>
  </TR>
  <TR>
   <TD style="padding:3 0 0 0" colspan="6">
     <DIV style="height:82;overflow:auto;border:1px inset;padding:0 3 3 3;">
       Cell 3<BR>Cell 1<BR>Cell 1<BR>kjh dkfjhkjsdhf jdsfjd skjfhdskfj hsdkjfhdfkdsjhf dksjhfdksjfh kjdfh kdsjhf kjdshf dsjfkhkjd
       kjhd fkjhdk jfdkjfh jdfkjhd kjfhd fkjdh fkjhdkhf kjdh fkjd
     </DIV>
   </TD>
  </TR>
</TABLE>
 
</BODY>
 
</HTML>

Open in new window

HTML-Table-Merge-Cells.jpg
HTML

Avatar of undefined
Last Comment
BeckyBair

8/22/2022 - Mon