I have created a dummy DataTable and bounded that to the DataList.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DataList ID="dlContacts" runat="server" Font-Size="Small" RepeatLayout="Table"
RepeatColumns="1" CellPadding="2" CellSpacing="2">
<ItemTemplate>
<table style="width: 700px; height: 100px; border: dashed 2px green; background-color: #C2D69B">
<tr>
<td rowspan="5">
<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("ImagePath") %>' Height="150px"
Width="150px" />
</td>
<td colspan="2">
<b>
<%# Eval("FirstName")%></b><b>
<%# Eval("LastName")%></b>
</td>
</tr>
<tr>
<td colspan="2">
Lives in
<%# Eval("Name") %>,<%# Eval("City") %>
</td>
</tr>
<tr>
<td>
<%# Eval("Email")%>
</td>
</tr>
<tr>
<td>
Phone:
</td>
<td>
<%# Eval("Number")%>
</td>
</tr>
<tr>
<td>
Field:
</td>
<td>
<%# Eval("Field")%>
</td>
<td colspan="3" align="right">
<asp:LinkButton ID="LinkButton1" runat="server" ForeColor="#3399ff" CommandName="view">View complete profile</asp:LinkButton>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</div>
</form>
</body>
</html>
C#: here i have used the path of the image to show in the DataList as User profile pic.
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[8] {
new DataColumn("ImagePath",typeof(string)),
new DataColumn("FirstName",typeof(string)),
new DataColumn("LastName",typeof(string)),
new DataColumn("Name",typeof(string)),
new DataColumn("City",typeof(string)),
new DataColumn("Email",typeof(string)),
new DataColumn("Number",typeof(string)),
new DataColumn("Field",typeof(string))});
dt.Rows.Add("~/Images/Image1.jpg", "John", "Smith", "England", "London", "test@test.com", "123", "Pharmacy");
dt.Rows.Add("~/Images/Image2.jpg", "Micheal", "Smith", "Australia", "Perth", "test@test.com", "123", "Pharmacy");
dt.Rows.Add("~/Images/Image3.jpg", "Jack", "Mike", "Russia", "Mascow", "test@test.com", "123", "Pharmacy");
this.dlContacts.DataSource = dt;
this.dlContacts.DataBind();
}
}
Screenshot
As you can see all the Text are aligned properly although i have used your code. If you are not getting the same result then inspect the element in the browser. Use Firefox for that. For that you need to place the cursor at the particular point where you are having the design issue and right click on it and select Inspect Element to see What css is getting applied.
