MCR
Reputation: 1643
Tables in ASP.Net <tr><td>
I am making my first website with ASP.net and am having some trouble with the markup for formatting a table. I want to be able to have a user fill out a questionnaire. It is a multi-part questionnaire, so I'm using an accordion to conserve space. One of the questions in the first pane has a five-part answer. My table is giving me some unexpected behavior. About halfway down I attempt to display five labels above five text boxes. I insert these in the proper position in the table, but for some reason they appear at the bottom of the page. I cannot determine what is happening. Any ideas? Thanks in advance.
<%@ Page Title="About Us" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeFile="Questionnaire.aspx.cs" Inherits="About" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<style type="text/css">
.accordion
{
width: 950px;
}
.accordionHeader
{
border: 1px solid #2F4F4F;
color: white;
background-color: #2E4d7B;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}
.accordionHeaderSelected
{
border: 1px solid #2F4F4F;
color: white;
background-color: #5078B3;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}
.accordionContent
{
background-color: #D3DEEF;
border: 1px dashed #2F4F4F;
border-top: none;
padding: 5px;
padding-top: 10px;
}
.style1
{
width: 100%;
}
</style>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
Questionnaire
</h2>
<p>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</p>
<p>
</p>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Accordion ID="Accordion1" CssClass="accordion" HeaderCssClass="accordionHeader"
HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent"
runat="server" Height="100px" Width="950px">
<Panes>
<asp:AccordionPane ID="AccordionPane2" runat="server">
<Header>
General Business & Project Question</Header>
<Content>
<table class="style1">
<tr>
<asp:Label ID="lblQid2_1" runat="server"></asp:Label>
<asp:Label ID="lblQ2_1" runat="server"></asp:Label>
</tr>
<tr>
<asp:TextBox ID="txtQ2_1" runat="server"></asp:TextBox></tr>
<tr>
<asp:Label ID="lblQid2_2" runat="server"></asp:Label>
<asp:Label ID="lblQ2_2" runat="server"></asp:Label></tr>
<tr>
<asp:TextBox ID="txtQ2_2" runat="server"></asp:TextBox>
</tr>
<tr>
<asp:Label ID="lblQid2_3" runat="server"></asp:Label>
<asp:Label ID="lblQ2_3" runat="server"></asp:Label></tr>
<tr>
<asp:TextBox ID="txtQ2_3" runat="server"></asp:TextBox>
</tr>
<tr>
<asp:Label ID="lblQid2_4" runat="server"></asp:Label>
<asp:Label ID="lblQ2_4" runat="server"></asp:Label></tr>
<tr>
<asp:TextBox ID="txtQ2_4" runat="server"></asp:TextBox>
</tr>
<tr>
<asp:Label ID="lblQid2_5" runat="server"></asp:Label>
<asp:Label ID="lblQ2_5" runat="server"></asp:Label></tr>
<tr>
<asp:TextBox ID="txtQ2_5" runat="server"></asp:TextBox>
</tr>
<tr>
<asp:Label ID="lblQid2_5_1" runat="server"></asp:Label>
<asp:Label ID="lblQ2_5_1" runat="server"></asp:Label></tr>
<tr>
<asp:TextBox ID="txtQ2_5_1" runat="server"></asp:TextBox>
</tr>
<tr>
<asp:Label ID="lblQid2_5_2" runat="server"></asp:Label>
<asp:Label ID="lblQ2_5_2" runat="server"></asp:Label></tr>
<tr>
<asp:TextBox ID="txtQ2_5_2" runat="server"></asp:TextBox>
</tr>
<tr>
<asp:Label ID="lblQid2_5_3" runat="server"></asp:Label>
<asp:Label ID="lblQ2_5_3" runat="server"></asp:Label></tr>
<tr>
<asp:TextBox ID="txtQ2_5_3" runat="server"></asp:TextBox>
</tr>
<tr>
<asp:Label ID="lblQid2_6" runat="server"></asp:Label>
<asp:Label ID="lblQ2_6" runat="server"></asp:Label></tr>
<tr>
<asp:TextBox ID="txtQ2_6" runat="server"></asp:TextBox>
</tr>
<tr>
<asp:Label ID="lblQid2_7" runat="server"></asp:Label>
<asp:Label ID="lblQ2_7" runat="server"></asp:Label></tr>
<tr>
<asp:TextBox ID="txtQ2_7" runat="server"></asp:TextBox>
</tr>
<tr>
<asp:Label ID="lblQid2_8" runat="server"></asp:Label>
<asp:Label ID="lblQ2_8" runat="server"></asp:Label></tr>
<tr>
<td>
<asp:Label ID="Label1" Text="test" runat="server"></asp:Label>
</td>
<td>
<asp:Label ID="Label2" runat="server"></asp:Label>
</td>
<td>
<asp:Label ID="Label3" runat="server"></asp:Label>
</td>
<td>
<asp:Label ID="Label4" runat="server"></asp:Label>
</td>
<td>
<asp:Label ID="Label5" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="txtQ2_8" runat="server"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<asp:Label ID="lblQid2_9" runat="server"></asp:Label>
<asp:Label ID="lblQ2_9" runat="server"></asp:Label></tr>
<tr>
<asp:TextBox ID="txt2_9" runat="server"></asp:TextBox>
</tr>
<tr>
<asp:Label ID="lblQid2_10" runat="server"></asp:Label>
<asp:Label ID="lblQ2_10" runat="server"></asp:Label></tr>
<tr>
<asp:TextBox ID="txtQ2_10" runat="server"></asp:TextBox>
</tr>
<tr>
<asp:Label ID="lblQid2_11" runat="server"></asp:Label>
<asp:Label ID="lblQ2_11" runat="server"></asp:Label></tr>
<tr>
<asp:RadioButton ID="rboQ2_11y" Text="Yes" runat="server" AutoPostBack="True" GroupName="a"
OnCheckedChanged="rboQ2_11y_CheckedChanged" />
<asp:RadioButton ID="rboQ2_11n" Text="No" runat="server" AutoPostBack="True" GroupName="a"
OnCheckedChanged="rboQ2_11n_CheckedChanged" /></tr>
<tr>
<asp:Label ID="lblQid2_11_1" runat="server"></asp:Label>
<asp:TextBox ID="txtQ2_11_1" runat="server"></asp:TextBox>
</tr>
</table>
</Content>
</asp:AccordionPane>
<asp:AccordionPane ID="AccordionPane3" runat="server">
<Header>
Solution Architecture & Technical Questions</Header>
<Content>
<table class="style1">
<tr>
<asp:CheckBox ID="chb_1" runat="server" Text="Testing" /></tr>
</table>
</Content>
</asp:AccordionPane>
</Panes>
</asp:Accordion>
</ContentTemplate>
</asp:UpdatePanel>
<p>
<asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" />
<asp:Label ID="lblError" runat="server" Text=""></asp:Label>
</p>
<p>
</asp:Content>
Upvotes: 0
Views: 15898
Answers (3)
Brayden Vance
Reputation: 1
</tr><tr class="sg-asp-table-data-row">
<td>37781B - 1 </td><td>
<a href="#" onclick="OpenClassPopUp('31496'); return false;">Boys Basketball 7</a>
</td><td align="center">2 </td><td><a href="mailto:[email protected]">Rains, Jackson</a></td><td>GYM </td><td align="center">97 </td><td align="center">1 </td><td align="center"> </td><td align="center"> </td>
</tr><tr class="sg-asp-table-data-row">
<td>37754W - 1 </td><td>
<a href="#" onclick="OpenClassPopUp('31492'); return false;">Instrumental Music 7</a>
</td><td align="center">3 </td><td><a href="mailto:[email protected]">Messick, Douglas</a></td><td>BAND </td><td align="center">100 </td><td align="center">1 </td><td align="center"> </td><td align="center"> </td>
</tr><tr class="sg-asp-table-data-row">
<td>377210 - 3 </td><td>
<a href="#" onclick="OpenClassPopUp('31575'); return false;">Science 7</a>
</td><td align="center">4 </td><td><a href="mailto:[email protected]">Hall, Marty</a></td><td>8 </td><td align="center">64 </td><td align="center">1 </td><td align="center"> </td><td align="center"> </td>
</tr><tr class="sg-asp-table-data-row">
<td>399320 - 2 </td><td>
<a href="#" onclick="OpenClassPopUp('31832'); return false;">KeyCode</a>
</td><td align="center">5 </td><td><a href="mailto:[email protected]">Lee, Robbie</a></td><td>5 </td><td align="center">94 </td><td align="center">1 </td><td align="center"> </td><td align="center"> </td>
</tr><tr class="sg-asp-table-data-row">
<td>377310 - 3 </td><td>
<a href="#" onclick="OpenClassPopUp('31576'); return false;">Mathematics 7</a>
</td><td align="center">6 </td><td><a href="mailto:[email protected]">Tapang, Adam</a></td><td>4 </td><td align="center">78 </td><td align="center">1 </td><td align="center"> </td><td align="center"> </td>
</tr><tr class="sg-asp-table-data-row">
<td>377110 - 2 </td><td>
<a href="#" onclick="OpenClassPopUp('31573'); return false;">English 7</a>
</td><td align="center">8 </td><td><a href="mailto:[email protected]">Raycraft, Keri</a></td><td>6 </td><td align="center">90 </td><td align="center">2 </td><td align="center"> </td><td align="center"> </td>
</tr>
Comment Legend There are no comments entered for this student.
</form>
</div>
</div>
<script>
$(function () {
// Build the jQuery UI buttons
$('.sg-buttonset').buttonset();
$('.sg-button').button();
window.parent.$('.sg-legacy-iframe').height($('.sg-main-content').height()); // set the init size
// Increase length of smaller content windows to reduce cutoffs in dropdowns.
var iframeHeight = window.parent.$('.sg-legacy-iframe').height();
if (iframeHeight < 450)
{ window.parent.$('.sg-legacy-iframe').height($('.sg-main-content').height() + 200); }
})
</script>
Upvotes: 0
Luis
Reputation: 5914
You need to fix this:
<tr>
<asp:Label ID="lblQid2_1" runat="server"></asp:Label>
<asp:Label ID="lblQ2_1" runat="server"></asp:Label>
</tr>
For this on every line you have <tr> tags:
<tr>
<td>
<asp:Label ID="lblQid2_1" runat="server"></asp:Label>
<asp:Label ID="lblQ2_1" runat="server"></asp:Label>
<td>
</tr>
Or this, it depends on how many columns (<td>) per row (<tr>) you need:
<tr>
<td>
<asp:Label ID="lblQid2_1" runat="server"></asp:Label>
</td>
<td>
<asp:Label ID="lblQ2_1" runat="server"></asp:Label>
<td>
</tr>
Hope it helps!
Upvotes: 3
HatSoft
Reputation: 11201
your html table have <tr> table rows but no <td> table columns this might be the reason of your labels and textboes moving at the bottom of the page
Upvotes: 2
Related Questions
- how to display data in HTML table in asp.net
- Build a table (with rows & columns) in code-behind (ASPX page)
- ASP.NET Get table html
- Table usage in the webpage in asp.net(C#)
- Create asp:table inside an asp table
- Convert HTML table code to asp:table control
- HTML Table Rows
- Table formatting ASP.NET
- Converting <div> html to <table> html in asp.net
- Other options for creating table in ASP.NET