How to get this ListView as a two-column table? - asp.net

Question

I am a new ASP.NET developer and I am struggling in getting the ListView that I am working on it as the image shown below:
How to do that?
My ASP.NET Code:
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" >
<ItemTemplate>
<tr style="">
<td>
<p>
<asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />
</p>
</th>
<td>
<p>
<asp:Label ID="UsernameLabel" runat="server"
Text='<%# Eval("Username") %>' />
</p>
</td>
<td>
<p>
<asp:Label ID="JobTitleLabel" runat="server" Text='<%# Eval("JobTitle") %>' />
</p>
</td>
<td>
<p>
<asp:Label ID="DivisionLabel" runat="server" Text='<%# Eval("DivisionName") %>' />
</p>
</td>
<td>
<p>
<asp:Label ID="RoleLabel" runat="server" Text='<%# Eval("RoleName") %>' />
</p>
</td>
</tr>
</ItemTemplate>
<LayoutTemplate>
<table id="Table2" runat="server">
<tr id="Tr5" runat="server">
<td id="Td4" runat="server">
<table ID="itemPlaceholderContainer" runat="server" border="1" style="">
<tr id="Tr6" runat="server">
<td id="Td6" runat="server" colspan="3">
<center>Personal Information</center>
</td>
</tr>
<tr id="Tr9" runat="server" style="">
<th id="Th3" runat="server">
Name</th>
</tr>
<tr id="Tr10" runat="server">
<th id="Th4" runat="server">
Username</th>
</tr>
<tr id="Tr11" runat="server">
<th id="Th5" runat="server">
JobTitle</th>
</tr>
<tr id="Tr12" runat="server">
<th id="Th6" runat="server">
Badge Number</th>
</tr>
<tr id="Tr13" runat="server">
<th id="Th7" runat="server">
Division</th>
</tr>
<tr id="Tr14" runat="server">
<th id="Th8" runat="server">
Role</th>
</tr>
<tr ID="itemPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr id="Tr8" runat="server">
<td id="Td7" runat="server" style="">
<asp:DataPager ID="DataPager1" runat="server" PageSize="5">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True"
ShowNextPageButton="False" ShowPreviousPageButton="False" />
<asp:NumericPagerField />
<asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="True"
ShowNextPageButton="False" ShowPreviousPageButton="False" />
</Fields>
</asp:DataPager>
</td>
</tr>
</table>
</LayoutTemplate>
</asp:ListView>
What I am getting right now is listing the headers or titles on the left column and the retreived values underneath them in a one instead of showing each value with its header. Here's a snapshot of what I am getting right now:
UPDATE:
UPDATE #2:
I am still struggling with this issue and getting the same result as in the snapshot.

Answer 1

Your html is so massive.
<tr style="">
**<td>**
<p>
<asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />
</p>
**</th>**
see a mark **.Open td and closing with th.
<tr style="">
<td>
<p>
<asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />
</p>
</th>
<td>
<p>
<asp:Label ID="UsernameLabel" runat="server"
Text='<%# Eval("Username") %>' />
</p>
</td>
Close your tr after above code and reopen your tr for next row.

Answer 2

HERE IS THE JSFIDDLE: http://jsfiddle.net/collabcoders/xSbyG/
Okay. I reworked it and tested it. This is the result I get:
First I add some css to clean the code and formatting.
<style>
.rightcolumn {
text-align:right;
height:25px;
text-overflow:ellipsis;
overflow: hidden;
white-space:nowrap;
font-weight:bold;
}
.leftcolumn {
text-align:left;
height:25px;
text-overflow:ellipsis;
overflow: hidden;
white-space:nowrap;
}
</style>
Then the ListView Template and Layout:
<asp:listview id="ListView1" runat="server" datasourceid="SqlDataSource1">
<ItemTemplate>
<table style="width:200px;">
<tr>
<td class="leftcolumn">
<asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />
</td>
</tr>
<tr>
<td class="leftcolumn">
<asp:Label ID="UsernameLabel" runat="server" Text='<%# Eval("Username") %>' />
</td>
</tr>
<tr>
<td class="leftcolumn">
<asp:Label ID="JobTitleLabel" runat="server" Text='<%# Eval("JobTitle") %>' />
</td>
</tr>
<tr>
<td class="leftcolumn">
<asp:Label ID="BadgeNumberLabel" runat="server" Text='<%# Eval("BadgeNumber") %>' />
</td>
</tr>
<tr>
<td class="leftcolumn">
<asp:Label ID="DivisionLabel" runat="server" Text='<%# Eval("DivisionName") %>' />
</td>
</tr>
<tr>
<td class="leftcolumn">
<asp:Label ID="RoleLabel" runat="server" Text='<%# Eval("RoleName") %>' />
</td>
</tr>
</table>
</ItemTemplate>
<LayoutTemplate>
<table id="outertable" border="1" runat="server">
<tr>
<td colspan="2" style="font-weight:bold;">
<center>Personal Information</center>
</td>
</tr>
<tr>
<td>
<table id="itemPlaceholderContainer" style="width:150px;" runat="server">
<tr>
<td class="rightcolumn">
Name
</td>
</tr>
<tr>
<td class="rightcolumn">
Username
</td>
</tr>
<tr>
<td class="rightcolumn">
Job Title
</td>
</tr>
<tr>
<td class="rightcolumn">
Badge Number
</td>
</tr>
<tr>
<td class="rightcolumn">
Division
</td>
</tr>
<tr>
<td class="rightcolumn">
Role
</td>
</tr>
</table>
</td>
<td id="itemPlaceholder" runat="server">
<!---List Item Template Goes Here--->
</td>
</tr>
<tr>
<td colspan="2">
<asp:DataPager ID="DataPager1" runat="server" PageSize="5">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" ShowNextPageButton="False"
ShowPreviousPageButton="False" />
<asp:NumericPagerField />
<asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="True" ShowNextPageButton="False"
ShowPreviousPageButton="False" />
</Fields>
</asp:DataPager>
</td>
</tr>
</table>
</LayoutTemplate>
</asp:listview>