嵌套HTML表格

时间:2018-06-22 13:05:30

标签: html

我目前正在处理一个html表,其中所附屏幕快照中该表的B和C磁贴将合并为一个磁贴。 请找到随附的屏幕截图和代码。我已将代码附加为stackoverflow片段,请检查。这里有人可以帮我解决这个问题吗?

预先感谢!

<TABLE style="WIDTH: 100%; TEXT-ALIGN: left; MARGIN-LEFT: auto; MARGIN-RIGHT: auto" border=0 cellSpacing=0>
  <TBODY>
    <TR>
      <TD style="FONT-FAMILY: Arial; COLOR: white; TEXT-ALIGN: left; PADDING-TOP: 4px; PADDING-LEFT: 4px; PADDING-RIGHT: 4px; BACKGROUND-COLOR: rgb(139,198,100)" colSpan=2>
        <FONT size=2 style="FONT-SIZE: 18px; FONT-WEIGHT: bold; COLOR: white">
          <STRONG><FONT color=#ffffff size=2>Select a Study:</FONT></STRONG>
        </FONT>
      </TD>
    </TR>
  </TBODY>
</TABLE>
<TABLE style="HEIGHT: 35%; WIDTH: 100%; TEXT-ALIGN: left; MARGIN-LEFT: auto; MARGIN-RIGHT: auto" border=0 cellSpacing=0>
  <TBODY>
    <TR>
      <TD style="BORDER-TOP: rgb(247,243,247) 0pt solid; FONT-FAMILY: Arial; BORDER-RIGHT: rgb(247,243,247) 2px solid; WIDTH: 30%; BORDER-BOTTOM: rgb(247,243,247) 2px solid; PADDING-BOTTOM: 6px; TEXT-ALIGN: center; PADDING-TOP: 6px; PADDING-LEFT: 6px; BORDER-LEFT: rgb(247,243,247) 2px solid; PADDING-RIGHT: 6px">
        <FONT color=#007cc2 size=2>
          <STRONG><FONT size=4>A</FONT> <BR></STRONG>
        </FONT>
        <FONT size=4>
          <STRONG><SPOTFIRECONTROL id=cc25934ac4de4386ad7ce45aed675335 /></STRONG>
        </FONT>
      </TD>
      <TD style="BORDER-TOP: rgb(247,243,247) 0pt solid; FONT-FAMILY: Arial; BORDER-RIGHT: rgb(247,243,247) 2px solid; WIDTH: 30%; BORDER-BOTTOM: rgb(247,243,247) 2px solid; PADDING-BOTTOM: 6px; TEXT-ALIGN: center; PADDING-TOP: 6px; PADDING-LEFT: 6px; BORDER-LEFT: rgb(247,243,247) 2px solid; PADDING-RIGHT: 6px">
        <FONT color=#007cc2 size=4>
          <STRONG>D<BR></STRONG>
        </FONT>
        <STRONG><SPOTFIRECONTROL id=8da4f7a82bbe46cd8eafbbcec7189995 /></STRONG>
      </TD>
      <TD style="BORDER-TOP: rgb(247,243,247) 0pt solid; FONT-FAMILY: Arial; BORDER-RIGHT: rgb(247,243,247) 2px solid; HEIGHT: 300%; WIDTH: 25%; BORDER-BOTTOM: rgb(247,243,247) 2px solid; PADDING-BOTTOM: 6px; TEXT-ALIGN: center; PADDING-TOP: 6px; PADDING-LEFT: 6px; BORDER-LEFT: rgb(247,243,247) 2px solid; PADDING-RIGHT: 6px">
        <FONT color=#007cc2 size=4>
          <STRONG>E<BR></STRONG>
        </FONT>
        <STRONG><SPOTFIRECONTROL id=eb17e9a209314097b6519af8e8adfe5b /></STRONG>
      </TD>
    </TR>
  </TBODY>
</TABLE>


<TABLE style="HEIGHT: 30%; WIDTH: 100%; TEXT-ALIGN: left; MARGIN-LEFT: auto; MARGIN-RIGHT: auto" border=0 cellSpacing=0>
  <TBODY>
    <TR>
      <TD style="BORDER-TOP: rgb(247,243,247) 0pt solid; FONT-FAMILY: Arial; BORDER-RIGHT: rgb(247,243,247) 2px solid; WIDTH: 30%; BORDER-BOTTOM: rgb(247,243,247) 2px solid; PADDING-BOTTOM: 6px; TEXT-ALIGN: center; PADDING-TOP: 6px; PADDING-LEFT: 6px; BORDER-LEFT: rgb(247,243,247) 2px solid; PADDING-RIGHT: 6px">
        <FONT color=#007cc2 size=2>
          <STRONG><FONT size=4>B*</FONT> <BR></STRONG>
        </FONT>
        <FONT size=4>
          <STRONG><SPOTFIRECONTROL id=cc25934ac4de4386ad7ce45aed675335 /></STRONG>
        </FONT>
      </TD>
      <TD style="BORDER-TOP: rgb(247,243,247) 0pt solid; FONT-FAMILY: Arial; BORDER-RIGHT: rgb(247,243,247) 2px solid; WIDTH: 30%; BORDER-BOTTOM: rgb(247,243,247) 2px solid; PADDING-BOTTOM: 6px; TEXT-ALIGN: center; PADDING-TOP: 6px; PADDING-LEFT: 6px; BORDER-LEFT: rgb(247,243,247) 2px solid; PADDING-RIGHT: 6px">
        <FONT color=#007cc2 size=4>
          <STRONG>F<BR></STRONG>
        </FONT>
        <STRONG><SPOTFIRECONTROL id=8da4f7a82bbe46cd8eafbbcec7189995 /></STRONG>
      </TD>
      <TD style="BORDER-TOP: rgb(247,243,247) 0pt solid; FONT-FAMILY: Arial; BORDER-RIGHT: rgb(247,243,247) 2px solid; HEIGHT: 300%; WIDTH: 25%; BORDER-BOTTOM: rgb(247,243,247) 2px solid; PADDING-BOTTOM: 6px; TEXT-ALIGN: center; PADDING-TOP: 6px; PADDING-LEFT: 6px; BORDER-LEFT: rgb(247,243,247) 2px solid; PADDING-RIGHT: 6px">
        <FONT color=#007cc2 size=4>
          <STRONG>G<BR></STRONG>
        </FONT>
        <STRONG><SPOTFIRECONTROL id=eb17e9a209314097b6519af8e8adfe5b /></STRONG>
      </TD>
    </TR>
  </TBODY>
</TABLE>



<TABLE style="HEIGHT: 35%; WIDTH: 100%; TEXT-ALIGN: left; MARGIN-LEFT: auto; MARGIN-RIGHT: auto" border=0 cellSpacing=0>
  <TBODY>
    <TR>
      <TD style="BORDER-TOP: rgb(247,243,247) 0pt solid; FONT-FAMILY: Arial; BORDER-RIGHT: rgb(247,243,247) 2px solid; WIDTH: 30%; BORDER-BOTTOM: rgb(247,243,247) 2px solid; PADDING-BOTTOM: 6px; TEXT-ALIGN: center; PADDING-TOP: 6px; PADDING-LEFT: 6px; BORDER-LEFT: rgb(247,243,247) 2px solid; PADDING-RIGHT: 6px">
        <FONT color=#007cc2 size=2>
          <STRONG><FONT size=4>C*</FONT> <BR></STRONG>
        </FONT>
        <FONT size=4>
          <STRONG><SPOTFIRECONTROL id=cc25934ac4de4386ad7ce45aed675335 /></STRONG>
        </FONT>
      </TD>
      <TD style="BORDER-TOP: rgb(247,243,247) 0pt solid; FONT-FAMILY: Arial; BORDER-RIGHT: rgb(247,243,247) 2px solid; WIDTH: 30%; BORDER-BOTTOM: rgb(247,243,247) 2px solid; PADDING-BOTTOM: 6px; TEXT-ALIGN: center; PADDING-TOP: 6px; PADDING-LEFT: 6px; BORDER-LEFT: rgb(247,243,247) 2px solid; PADDING-RIGHT: 6px">
        <FONT color=#007cc2 size=4>
          <STRONG>H<BR></STRONG>
        </FONT>
        <STRONG><SPOTFIRECONTROL id=8da4f7a82bbe46cd8eafbbcec7189995 /></STRONG>
      </TD>
      <TD style="BORDER-TOP: rgb(247,243,247) 0pt solid; FONT-FAMILY: Arial; BORDER-RIGHT: rgb(247,243,247) 2px solid; HEIGHT: 300%; WIDTH: 25%; BORDER-BOTTOM: rgb(247,243,247) 2px solid; PADDING-BOTTOM: 6px; TEXT-ALIGN: center; PADDING-TOP: 6px; PADDING-LEFT: 6px; BORDER-LEFT: rgb(247,243,247) 2px solid; PADDING-RIGHT: 6px">
        <FONT color=#007cc2 size=4>
          <STRONG>I<BR></STRONG>
        </FONT>
        <STRONG><SPOTFIRECONTROL id=eb17e9a209314097b6519af8e8adfe5b /></STRONG>
      </TD>
    </TR>
  </TBODY>
</TABLE>

why they do this

1 个答案:

答案 0 :(得分:2)

您可以合并到一个表中并使用rowspan =“ 2”

<form name="form1" method="post" action="/calls/call_log.asp?LogID=&ContactID=16440">
 <select name="CallType" id="select3"><option value="0">Select</option><option value="5">Accounts</option><option value="58">Autoclave Service</option>
 </select>
 <input name="Submit" type="submit" id="Submit"  value="Save" onClick="return checkCallLogIsValid(0);">
</form>