Problem Aligning Values in ASP Table

[Tranz2]

I have an ASP:Table with 3 columns and 2 rows. In each cell a number displays. It's important that the numbers are vertically and horizontally aligned with each other. In the left column for both rows I also place a short label of 5 characters describing what that row is. My problem is that when I put the label(s) there, it forces the number in the first column up or down so that it then is not horizontally aligned with the numbers in the 2 other columns. Also, if the numbers display at a smaller font, then the first number gets shoved higher than the numbers to the right - but if the numbers display at a larger font, then the first number gets shoved downward in relation to the numbers in the right 2 columns. Also, I would say that the label and the values for columns 2 and 3 do not exactly line up horizontally. When the values are at a small font, then the label tends to be slightly lower than columns 2 and 3 - and when the values are at a larger font, the labels tend to be slightly higher than columns 2 or 3. But the main problem is the column 1 value being so much higher or lower than the values in the other columns.

I'll try to represent the page runs:

"Small value font":

---- COLUMN 1 ---- ---- COLUMN 2 ---- ---- COLUMN 2 ----

11
Label1 22 33
44
Label2 55 66

========================================================

"Large value font":

---- COLUMN 1 ---- ---- COLUMN 2 ---- ---- COLUMN 2 ----

Label1 22 33
11
Label2 55 66
44

=========================================================

"Without any labels":

11 22 33

44 55 66

==========================================================


Here is the pertinent ASP.NET code:

<style type="text/css">

.valuesAlign
{
margin-right: 70px;
text-align:right;
font-size:smaller;
}

.leftLabel
{
float:left;
margin-left: 10px;
padding: 0px;
text-align:left;
font-size: xx-large;
}

</style>




<asp:table
id="tbl"

Font="Arial"
Font-Size="12"
GridLines="Both"
CellPadding="10"
CellSpacing="50"
HorizontalAlign="Left"
Width="100%"
Height="400"
runat="server">


<asp:TableRow
horizontalAlign="Left">

<asp:TableHeaderCell HorizontalAlign = "Right">
<asp:Label ID="Label1" runat="server" Text="Label1" CssClass="leftLabel"></asp:Label>
<asp:TextBox ID="txtboxCol1Row1" runat="server" BorderStyle="None"
CssClass="valuesAlign" Wrap="False">11</asp:TextBox>
</asp:TableHeaderCell>

<asp:TableHeaderCell Width="33%" HorizontalAlign = "Right">
<asp:TextBox ID="txtboxCol2Row1" runat="server" BorderStyle="None"
CssClass="valuesAlign" Wrap="False">22</asp:TextBox>
</asp:TableHeaderCell>

<asp:TableHeaderCell Width="33%" HorizontalAlign = "Right">
<asp:TextBox ID="txtboxCol3Row1" runat="server" BorderStyle="None"
CssClass="valuesAlign" Wrap="False">33</asp:TextBox>
</asp:TableHeaderCell>
</asp:TableRow>


<asp:TableRow
horizontalAlign="Left">

<asp:TableHeaderCell HorizontalAlign = "Right">
<asp:Label ID="Label2" runat="server" Text="Label2" CssClass="leftLabel"></asp:Label>
<asp:TextBox ID="txtboxCol1Row2" runat="server" BorderStyle="None"
CssClass="valuesAlign" Wrap="False">44</asp:TextBox>
</asp:TableHeaderCell>

<asp:TableHeaderCell Width="33%" HorizontalAlign = "Right">
<asp:TextBox ID="txtboxCol2Row2" runat="server" BorderStyle="None"
CssClass="valuesAlign" Wrap="False">55</asp:TextBox>
</asp:TableHeaderCell>

<asp:TableHeaderCell Width="33%" HorizontalAlign = "Right">
<asp:TextBox ID="txtboxCol3Row2" runat="server" BorderStyle="None"
CssClass="valuesAlign" Wrap="False">66</asp:TextBox>
</asp:TableHeaderCell>
</asp:TableRow>

</asp:table>

 

[jmeckley]

why are you using so many server objects? this could all be done with html and a repeater.

<asp:repeater id="foo" runat="server">
   <headertemplate>
       <table>
           <caption>my table</caption>
           <colgroup>
              <col css="column 1 css" />
              <col css="column 2 css" />
              <col css="column 3 css" />
           </colgroup>
           <thead>
                <tr>
                   <th>column 1</th>
                   <th>column 2</th>
                   <th>column 3</th>
                </tr>
           </thead>
           <tbody>
   </headertemplate>
   <itemtemplate>
       <tr>
          <td><%=Eval("column1")%></td>
          <td><%=Eval("column2")%></td>
          <td><%=Eval("column3")%></td>
       </tr>
   </itemtemplate>
   <footertemplate>
       <table>
           </tbody>
           <tfoot>
              //if you need it
           </tfoot>
       </table>
   </footertemplate>
</asp:repeater>

Jason Meckley
Programmer

faq855-7190
faq732-7259

 

[Tranz2]

Because then I'd be posting here asking why my html and repeater don't work. But seriously, if you'd be so kind to post a detailed code snippet that can reproduce my functionality, then I'd be happy to try it. I should mention that I need vertical lines separating the columns. The reason I haven't set up a separate column to hold the label is that I don't want a vertical line separating the label and the first value.

 

[Tranz2]

Thanks for the code example. I'll have to learn more about these repeaters. I seemed to have fixed my problem in this bizarre way:


I though I'd try putting in a conventional html table of 2 columns and 1 row within the TableHeaderCell containing the label and textbox in question. I did that, and then put the label in the first html table "cell", and the textbox in the other cell. And it solved the problem! But the crazy thing is I only did this for the first row, not the second row - yet what I did fixed the alignment for the second row as well. Here is what the first TableHeaderCell in my example now looks like:

<asp:TableHeaderCell HorizontalAlign = "Right">
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Label1" CssClass="leftLabel"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtboxCol1Row1" runat="server" BorderStyle="None"
CssClass="valuesAlign" Wrap="False">11</asp:TextBox>
</td>
</tr>
</table>
</asp:TableHeaderCell>

 

[jmeckley]

I should mention that I need vertical lines separating the columns. The reason I haven't set up a separate column to hold the label is that I don't want a vertical line separating the label and the first value.

this is all formatting and doesn't have anything to do with how the data gets on screen. there are two aspects to html (and wpf for that matter)
1. data: what to display
2. layout: how to display it

when designed properly the 2 can change with little impact on one another. if you start using data to control the layout or the layout dictates what data is displayed you will end up with a big ball of mud.

final thought, tables are meant to display tabular data, they are not designed to control the layout. that's is the purpose of CSS.

Jason Meckley
Programmer

faq855-7190
faq732-7259

 

[ChrisHirst]

And of course it is NOT an ASP.NET problem at all, it is a HTML/CSS problem.

.NET simply produces the output (what to display), how it displays is the styling.

Look at the rendered HTML source code in the browser to find the problem and run a validation check to see if you have a unclosed element somewhere.


Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum