asp.net - どのように設計するのですか？

Question

VS 2010 を使用して、写真のような Web ページをデザインしようとしています。これをどのようにデザインすればよいですか? 「M」を実行しましたが、ラベル「Financial reports」とアップロード コントロールが同じ行にありません。**「O」についてはわかりません。**私は asp.net を初めて使用するので、アイデアを教えてください。

    <table align="center" style="width: 1000px; margin-top: 0px; height: 100px;"> 
    <tr>
       <asp:Label ID="lblFinLabel" runat="server" Text="2.Financial Capabilities"  CssClass="label" Font-Bold="True"></asp:Label>

       <td colspan="2">
       <div style="float:left; width:250px">
       <asp:Label ID="lblFinReports" runat="server" Text="1) Financial Reports (last 2 years)" CssClass="label" Font-Bold="True" Font-Size="X-Small" ></asp:Label>
       </div>
       <div style ="float:right;width:100px">
           &nbsp;<asp:UpdatePanel ID="UpdatePanel1" runat="server">
           <ContentTemplate>
                <asp:ScriptManager ID="SM2" runat="server"> </asp:ScriptManager>
                <ajaxToolkit:AsyncFileUpload ID="AFU2" runat="server" width="450px" UploaderStyle="Modern" ClientIDMode="AutoID"
                                OnClientUploadStarted="UploadStarted"
                                OnClientUploadComplete="UploadComplete"
                                OnClientUploadError="UploadError" 
                                OnUploadedComplete="AFUCmpCertificate_UploadedComplete" 
                                OnUploadedFileError="AFUCmpCertificate_UploadedFileError"/>
               <asp:Label ID="lblFinStatus" runat="server" ForeColor="#660033"></asp:Label>
          </ContentTemplate>
         </asp:UpdatePanel>
        </div>
        <div style="clear:both"></div> 
       </td>
     </tr>
     <tr>
     <td>
        <asp:Label ID="lblturnover" runat="server" Text="2) Turn-Over" CssClass="label" Font-Bold="True" Font-Size="X-Small" ></asp:Label>
     </td>
     </tr>
     <tr>
        <td colspan="2">
            <div style="float:left; width:278px">
             &nbsp;&nbsp;
            <asp:Label ID="lblAvg5" runat="server" Text="a) Average annual Turn-Over last 5 years" CssClass="label" Font-Bold="True" Font-Size="X-Small"></asp:Label>
            &nbsp;
            </div>
         <div>
            <asp:TextBox ID="txtAvgAnnual" runat="server" MaxLength="13" CssClass="textbox"></asp:TextBox>
        </div>
      </td>
     </tr>
     <tr>
       <td>
          &nbsp;&nbsp;&nbsp;
          <asp:Label ID="lblTO" runat="server" Text="b) Turn-Over last 5 years" CssClass="label" Font-Bold="True" Font-Size="X-Small"></asp:Label>
       </td>
     </tr>
     </table>

Answer 1

HTMLは完全にフォーマットされていません。テーブル内にすべてのコントロールを追加する必要があり、インラインスタイルの代わりにスタイルシートクラスを使用することをお勧めします。

HTMLコードをフォーマットする方法を示すために、次のように作成しようとしました。

        <table class="tableCss">
        <colgroup>            
            <col style="width: 25%; white-space: nowrap;" />
            <col />
        </colgroup>
        <tr>
            <th>
                <asp:Label ID="lblFinReports" runat="server" Text="1) Financial Reports (last 2 years)"
                    CssClass="label"></asp:Label>
            </th>
            <td colspan="2">
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:ScriptManager ID="SM2" runat="server">
                        </asp:ScriptManager>
                        <ajaxtoolkit:asyncfileupload id="AFU2" runat="server" width="450px" uploaderstyle="Modern"
                            clientidmode="AutoID" onclientuploadstarted="UploadStarted" onclientuploadcomplete="UploadComplete"
                            onclientuploaderror="UploadError" onuploadedcomplete="AFUCmpCertificate_UploadedComplete"
                            onuploadedfileerror="AFUCmpCertificate_UploadedFileError" />
                        <asp:Label ID="lblFinStatus" runat="server" ForeColor="#660033"></asp:Label>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </td>
        </tr>
        <tr>
            <th>
                <asp:Label ID="lblturnover" runat="server" Text="2) Turn-Over" CssClass="label"></asp:Label>
            </th>
            <td>
            </td>
        </tr>
        <tr>
            <th>
                &nbsp;&nbsp;
                <asp:Label ID="lblAvg5" runat="server" Text="a) Average annual Turn-Over last 5 years"
                    CssClass="label"></asp:Label>
            </th>
            <td>
                <asp:TextBox ID="txtAvgAnnual" runat="server" MaxLength="13" CssClass="textbox"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <th>
                &nbsp;&nbsp;&nbsp;
                <asp:Label ID="lblTO" runat="server" Text="b) Turn-Over last 5 years" CssClass="label"></asp:Label>
            </th>
            <td>
            </td>
        </tr>
    </table>

また、次のスタイルをWebサイトスタイルシートのページヘッダーに追加する必要があります。

<style type="text/css">
        .tableCss
        {
            text-align:left;
            width: 100%; 
            height: 100%;
        }
        .tableCss th
        {
            text-align:left;
            font-size:x-small;
        }
    </style>