How to change location of HTML element in the table

Question

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.

Answer 1

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">&nbsp;</td>
</tr>