How to shift row in the table? - html

I have this ASP code:
<asp:Repeater ID="PervousResultsList" runat="server" EnableViewState="False">
<ItemTemplate>
<div class="row1">
<table style="cursor: pointer; width: 100%">
<tr>
<td>text:
</td>
<td><%# Eval("Text") %>
</td>
</tr>
<tr>
<td rowspan="2">
<asp:Image ID="Image1" ImageUrl="~/Images/pushpinred.png" runat="server" Width="32"
Height="32" />
</td>
<td>X:
</td>
<td>
<%# Eval("Lon") %>
</td>
</tr>
<tr>
<td>Y:
</td>
<td>
<%# Eval("Lat") %>
</td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:Repeater>
Here how it looks in the view:
My question is how can I shift text row that it will look like that:


Forget what I said before, this is probably what you are looking for:
<asp:Repeater ID="PervousResultsList" runat="server" EnableViewState="False">
<ItemTemplate>
<div class="row1">
<table style="cursor: pointer; width: 100%">
<tr>
<td colspan="2">text:
</td>
<td ><%# Eval("Text") %>
</td>
</tr>
<tr>
<td rowspan="2">
<asp:Image ID="Image1" ImageUrl="~/Images/pushpinred.png" runat="server" Width="32"
Height="32" />
</td>
<td>X:
</td>
<td>
<%# Eval("Lon") %>
</td>
</tr>
<tr>
<td>Y:
</td>
<td>
<%# Eval("Lat") %>
</td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:Repeater>
Adding a colspan=2 attribute to your :text label/header field.

Related

Remove space on a table cell for a nested Table

I'm trying to do a nested-table I'm about to be finish on my first table
when this happen:
here Is my HTML markup:
<table class="quotationTable1">
<%--Primary table--%>
<tr>
<td>
<table>
<%--Second Table--%>
<tr>
<td style="width: 397px">
<table style="border-style: solid; border-color: inherit; border-width: medium; width: 452px;">
<%--Third Table--%>
<tr>
<th colspan="2" style="padding-top: 5px; background-color: black; color: white;">Job Quotation</th>
</tr>
<tr>
<td colspan="2" style="height: 26px;">
<asp:Label ID="lblDescCategory" runat="server" Text="Category:"></asp:Label>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="labelDescType" runat="server" Text="Type:"></asp:Label>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td style="width: 265px">
<asp:Label ID="lblDescAddress" runat="server" Text="Address:"></asp:Label>
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td style="width: 202px">
<asp:Label ID="lblDescContacts" runat="server" Text="Contacts:"></asp:Label>
<asp:Label ID="Label4" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2" style="height: 3px">
<asp:Label ID="lblDescJobdesc" runat="server" Text="Job Description:"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2" style="height: 59px">
<asp:Label ID="Label6" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="Label5" runat="server" Text="File: "></asp:Label>
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="Label7" runat="server" Text="Finishing:"></asp:Label></td>
</tr>
</table>
</td>
<td>
<table style="width: 373px; position:relative;"><%--fourth table--%>
<tr>
<th colspan="3" style="padding-bottom:5px; background-color: black; color: white; width: 400px;">Specification</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
How can I make my second table Specification remove all those spaces and
be on the same position as Job Quotation?

you need to add vertical-align:top to td
and don't use inline styles, use classes instead
td {
vertical-align: top
}
.w400 {
padding-bottom: 5px;
background-color: black;
color: white;
width: 400px
}
.w397 {
width: 397px
}
.w397 table {
border-style: solid;
border-color: inherit;
border-width: medium;
width: 452px
}
.w397.title {
padding-top: 5px;
background-color: black;
color: white;
}
.w373.relative {
width: 373px;
position: relative
}
.h59 {
height: 59px
}
.h26 {
height: 26px
}
.h3 {
height: 3px
}
<table class="quotationTable1">
<tr>
<td>
<table>
<tr>
<td class="w397">
<table class="w397 table">
<tr>
<th colspan="2" class="w397 title">Job Quotation</th>
</tr>
<tr>
<td colspan="2" class="w397 h26">
<asp:Label ID="lblDescCategory" runat="server" Text="Category:"></asp:Label>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="labelDescType" runat="server" Text="Type:"></asp:Label>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td class="w265">
<asp:Label ID="lblDescAddress" runat="server" Text="Address:"></asp:Label>
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td class="w202">
<asp:Label ID="lblDescContacts" runat="server" Text="Contacts:"></asp:Label>
<asp:Label ID="Label4" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2" class="h3">
<asp:Label ID="lblDescJobdesc" runat="server" Text="Job Description:"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2" class="h59">
<asp:Label ID="Label6" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="Label5" runat="server" Text="File: "></asp:Label>
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="Label7" runat="server" Text="Finishing:"></asp:Label>
</td>
</tr>
</table>
</td>
<td>
<table class="w373 relative">
<tr>
<th colspan="3" class="w400">Specification</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

You need to nest the table in a TR and TD within the parent table:
<table class="quotationTable1">
<%--Primary table--%>
<tr>
<td>
<table>
<%--Second Table--%>
<tr>
<td style="width: 397px">
<table style="border-style: solid; border-color: inherit; border-width: medium; width: 452px;">
<%--Third Table--%>
<tr>
<th colspan="2" style="padding-top: 5px; background-color: black; color: white;">Job Quotation</th>
</tr>
<tr>
<td colspan="2" style="height: 26px;">
<asp:Label ID="lblDescCategory" runat="server" Text="Category:"></asp:Label>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="labelDescType" runat="server" Text="Type:"></asp:Label>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td style="width: 265px">
<asp:Label ID="lblDescAddress" runat="server" Text="Address:"></asp:Label>
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td style="width: 202px">
<asp:Label ID="lblDescContacts" runat="server" Text="Contacts:"></asp:Label>
<asp:Label ID="Label4" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2" style="height: 3px">
<asp:Label ID="lblDescJobdesc" runat="server" Text="Job Description:"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
<table style="width: 373px; position:relative;"><%--fourth table--%>
<tr>
<th colspan="3" style="padding-bottom:5px; background-color: black; color: white; width: 400px;">Specification</th>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="height: 59px">
<asp:Label ID="Label6" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="Label5" runat="server" Text="File: "></asp:Label>
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="Label7" runat="server" Text="Finishing:"></asp:Label></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

How to change location of HTML element in the table

I have this HTML code:
<table style="cursor: pointer; width: 100%">
<asp:Repeater ID="PervousResultsList" runat="server" EnableViewState="False">
<ItemTemplate>
<tr>
<td rowspan="3">
<asp:Image ID="Image1" ImageUrl="~/Images/pushpinred.png" runat="server" Width="32" Height="32" />
</td>
<tr>
<td>X:</td>
<td>
<%# Eval("Lon") %>
</td>
</tr>
<tr>
<td>Y:</td>
<td>
<%# Eval("Lat") %>
</td>
</tr>
<td>
<input type="button" id="ddd" value="B" style="height: 30px;" />
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
Here how it looks in view:
I need to change the view, and I want it will look like that:
I need to pick up the element Button on the line above and move to the left as you see it on the screen shot above.

You can try this:
<tr>
<td rowspan="2">
<asp:Image ID="Image1" ImageUrl="~/Images/pushpinred.png" runat="server" Width="32" Height="32" />
</td>
<td>X:</td>
<td>
<%# Eval("Lon") %>
</td>
<td rowspan="2">
<input type="button" id="ddd" value="B" style="height: 30px;" />
</td>
</tr>
<tr>
<td>Y:</td>
<td>
<%# Eval("Lat") %>
</td>
</tr>
And if you want an empty row between items, you can define a SeparatorTemplate with:
<tr>
<td colspan="4"> </td>
</tr>

I want to create multiple columns in row(three columns) between rows(contains two columns) in html. how to do this?

Please guide. Image is attached.
I want make proper alignment for all rows and columns. I used this code to make this table. How to align and add fourth column in Deduction Mode row so that table rows and columns become align. Thank you.
<table width="100%" class="generalTable">
<tr>
<th colspan="3" class="clspopupheading"> Approval
</th>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
<tr>
<td style="width: 110px;">
<span class="mendatory">*</span>Employee ID:
</td>
<td colspan="2">
<input type="text" id='txtEmployeeID' runat="server" class="clsTxtDepartmentName" readonly="readonly"/>
<asp:RequiredFieldValidator ID="rfvDepartmentName" runat="server" ValidationGroup="Department"
ErrorMessage="*" Display="Dynamic" ControlToValidate="txtEmployeeID" CssClass="rfvDepartmentName">
</asp:RequiredFieldValidator>
<input type="hidden" id="hfDepartmentId" runat="server" class="hfDepartmentId" />
</td>
</tr>
<tr>
<td >
Approved Amount:
</td>
<td>
<input type="text" id='txtApprovedAmount' runat="server" class="clsTxtDepartmentName"/>
</td>
</tr>
<tr>
<td >
Deduction Mode:
</td>
<td >
<asp:RadioButton ID="fixedamount" GroupName="DeductionMethod" Text="Fixed Amount" Checked="true" runat="server" />
</td>
<td>
<asp:RadioButton ID="percentage" GroupName="DeductionMethod" Text="Percentage" runat="server" />
</td>
</tr>
<tr>
<td >
Deduction Amount/ Percentage:
</td>
<td colspan="3">
<input type="text" id='txtDeductionAmount' runat="server" class="clsTxtDepartmentName"/>
</td>
</tr>
<tr>
<td >
Deduction Mode:
</td>
<td>
<asp:RadioButton ID="rbtnApproval" GroupName="Approval" Text="Approve" Checked="true" runat="server" />
</td>
<td>
<asp:RadioButton ID="rbtnPending" GroupName="Approval" Text="Pending" runat="server" />
</td>
<td>
<asp:RadioButton ID="rbtnReject" GroupName="Approval" Text="Reject" runat="server" />
</td>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
<tr>
<td align="right" colspan="2">
<asp:Button ID="btnSave" Text="Save" runat="server" CssClass="button1 clsBtnSave"
ValidationGroup="Department" OnClick="btnSave_Click" />
<asp:Button ID="btnCancel" Text="Cancel" runat="server"
CssClass="button1 clsCancelButton" onclick="btnCancel_Click"
/>
</td>
</tr>
</table>

You want to throw the multiple choices into a table in one . Also, the colspans weren't quite right. Something like this.
<table width="100%" class="generalTable" border="2">
<tr>
Approval
</th>
</tr>
<tr>
<td colspan="4">
</td>
</tr>
<tr>
<td style="width: 110px;">
<span class="mendatory">*</span>Employee ID:
</td>
<td colspan="3">
<input type="text" id='txtEmployeeID' runat="server" class="clsTxtDepartmentName" readonly="readonly"/>
<asp:RequiredFieldValidator ID="rfvDepartmentName" runat="server" ValidationGroup="Department"
ErrorMessage="*" Display="Dynamic" ControlToValidate="txtEmployeeID" CssClass="rfvDepartmentName">
</asp:RequiredFieldValidator>
<input type="hidden" id="hfDepartmentId" runat="server" class="hfDepartmentId" />
</td>
</tr>
<tr>
<td >
Approved Amount:
</td>
<td colspan = 3>
<input type="text" id='txtApprovedAmount' runat="server" class="clsTxtDepartmentName"/>
</td>
</tr>
<tr>
<td >
Deduction Mode:
</td>
<td colspan = 3>
<table border="1">
<tr>
<td>
<asp:RadioButton ID="fixedamount" GroupName="DeductionMethod" Text="Fixed Amount" Checked="true" runat="server" />
</td>
<td>
<asp:RadioButton ID="percentage" GroupName="DeductionMethod" Text="Percentage" runat="server" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td >
Deduction Amount/ Percentage:
</td>
<td colspan="3">
<input type="text" id='txtDeductionAmount' runat="server" class="clsTxtDepartmentName"/>
</td>
</tr>
<tr>
<td >
Deduction Mode:
</td>
<td colspan = 3>
<table border="1">
<tr>
<td>
<asp:RadioButton ID="rbtnApproval" GroupName="Approval" Text="Approve" Checked="true" runat="server" />
</td>
<td>
<asp:RadioButton ID="rbtnPending" GroupName="Approval" Text="Pending" runat="server" />
</td>
<td>
<asp:RadioButton ID="rbtnReject" GroupName="Approval" Text="Reject" runat="server" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="4">
</td>
</tr>
<tr>
<td align="right" colspan="2">
<asp:Button ID="btnSave" Text="Save" runat="server" CssClass="button1 clsBtnSave"
ValidationGroup="Department" OnClick="btnSave_Click" />
<asp:Button ID="btnCancel" Text="Cancel" runat="server"
CssClass="button1 clsCancelButton" onclick="btnCancel_Click"
/>
</td>
</tr>
</table>

border does not extend - css

The bottom border is only till the end of textboxes. I am working in visual studio 2010. The same code works fine in another PC. Why
<div style="clear: both; max-width: 2400px">
<table style="border: 1px solid gray" width="100%">
<tr>
<td width="20%">
NAME
</td>
<td width="40%">
<asp:TextBox ID="TextBox1" runat="server" Width="98%"></asp:TextBox>
</td>
<td width="40%">
</td>
</tr>
<tr>
<td>
AGE
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" Width="98%"></asp:TextBox>
</td>
</tr>
</table>
</div>

You are missing third TD in second row. Insert it and it will show up.
<table style="border: 1px solid gray" width="100%">
<tr>
<td width="20%">
NAME
</td>
<td width="40%">
<asp:TextBox ID="TextBox1" runat="server" Width="98%"></asp:TextBox>
</td>
<td width="40%">
</td>
</tr>
<tr>
<td>
AGE
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" Width="98%"></asp:TextBox>
</td>
<td>
</td>
</tr>
</table>

You missed the third td in second tr
<div style="clear: both; max-width: 2400px">
<table style="border: 1px solid gray" width="100%">
<tr>
<td width="20%">
NAME
</td>
<td width="40%">
<asp:TextBox ID="TextBox1" runat="server" Width="98%"></asp:TextBox>
</td>
<td width="40%">
</td>
</tr>
<tr>
<td>
AGE
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" Width="98%"></asp:TextBox>
</td>
<td>
</td>
</tr>
</table>
</div>

You are indeed missing the third <td></td> or you can colspan= "2" one of the others

you missed the third td ,if you want to only have two td in second tr,use colspan="2" in that td tag :
<div style="clear: both; max-width: 2400px">
<table style="border: 1px solid gray" width="100%">
<tr>
<td width="20%">
NAME
</td>
<td width="40%">
<asp:TextBox ID="TextBox1" runat="server" Width="98%"></asp:TextBox>
</td>
<td width="40%">
</td>
</tr>
<tr>
<td>
AGE
</td>
<td colspan="2">
<asp:TextBox ID="TextBox2" runat="server" Width="98%"></asp:TextBox>
</td>
</tr>
</table>
</div>

Try this code...
<div style="clear: both; max-width: 2400px">
<table style="border: 1px solid gray" width="100%">
<tr>
<td width="20%">
NAME
</td>
<td width="40%">
<asp:TextBox ID="TextBox1" runat="server" Width="98%"></asp:TextBox>
</td>
</tr>
<tr>
<td>
AGE
</td>
<td width="40%">
<asp:TextBox ID="TextBox2" runat="server" Width="98%"></asp:TextBox>
</td>
</tr>
</table>
</div>
</div>

How to move button left inside table

I have this ASP code:
<asp:Repeater ID="PervousResultsList" runat="server" EnableViewState="False">
<ItemTemplate>
<div class="row1">
<table style="cursor: pointer; width: 100%">
<tr>
<td rowspan="4">
<asp:Image ID="Image1" ImageUrl="~/Images/pushpinred.png" runat="server" Width="32"
Height="32" /></td>
</tr>
<td rowspan="10">
<input type="button" id="ddd" value="B" style="height:30px" />
</td>
</tr>
<tr>
<td>text:</td>
<td rowspan="4">
<h1 style="color: gray"><%# Eval("Text") %></h1>
</td>
</tr>
<tr class="hidden">
<td>text:</td>
<td><%# Eval("Text") %></td>
</tr>
<tr class="hidden">
<td>X:</td>
<td><%# Eval("Lon") %></td>
</tr>
<tr class="hidden">
<td>Y:</td>
<td><%# Eval("Lat") %></td>
</tr>
<tr>
</table>
</div>
</ItemTemplate>
</asp:Repeater>
I bind a repeater in server side to the data source:
PervousResultsList.DataSource = _marker.GetPervousResults();
PervousResultsList.DataBind();
Here is how it looks in view:
How can I move button B to the left that it will looks like this:

<table style="cursor: pointer; width: 100%">
<asp:Repeater ID="PervousResultsList" runat="server" EnableViewState="False">
<itemtemplate>
<div class="row1">
<tr>
<td rowspan="10">
<input type="button" id="ddd" value="B" style="height:30px" />
</td>
<td rowspan="4">
<h1 style="color: gray"><%# Eval("Text") %></h1>
</td>
<td>text:</td>
<td rowspan="4">
<asp:Image ID="Image1" ImageUrl="~/Images/pushpinred.png" runat="server" Width="32"
Height="32" />
</td>
</tr>
<tr class="hidden">
<td>text:</td>
<td><%# Eval("Text") %></td>
</tr>
<tr class="hidden">
<td>X:</td>
<td><%# Eval("Lon") %></td>
</tr>
<tr class="hidden">
<td>Y:</td>
<td><%# Eval("Lat") %></td>
</tr>
</div>
</itemtemplate>
</asp:Repeater>
</table>

I Think what you could do is take the table definition outside of the repeater and define your table rows right.
Try this and let me know if it helps (I didn't test the code):
<table style="cursor: pointer; width: 100%">
<tr>
<td>Header</td>
<td>Header</td>
<td>Header</td>
<td>Header</td>
<td>Header</td>
<td>Header</td>
</tr>
<asp:Repeater ID="PervousResultsList" runat="server" EnableViewState="False">
<ItemTemplate>
<tr>
<td>
<input type="button" id="ddd" value="B" style="height:30px" />
</td>
<td>
<asp:Image ID="Image1" ImageUrl="~/Images/pushpinred.png" runat="server" Width="32" Height="32" />
</td>
<td>
<h1 style="color: gray"><%# Eval("Text") %></h1>
</td>
<td>
<%# Eval("Text") %>
</td>
<td>
<%# Eval("Lon") %>
</td>
<td>
<%# Eval("Lat") %>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
In the code the repeater will create only the table rows in each iteration. You define the table and header outside of the repeater because otherwise you would be creating a new table for each iteration. Aditionally, a <tr> defines a row.