Asp.net ListView-ItemTemplate表格样式

我正在尝试使用4x3表创建ItemTemplate。我希望第一列包含图像，其他列中的单元格包含有关图像的信息。我正在使用下面的代码，但第一行在图像底部渲染，第二行在图像下面渲染。我做错了什么

提前谢谢

<LayoutTemplate>
        <table runat="server" cellpadding="2" id="tblBooks" style="">
          <tr runat="server">
              <td runat="server">
                  <table ID="itemPlaceholderContainer" runat="server" border="0" style="">
                      <tr ID="itemPlaceholder" runat="server">
                      </tr>
                  </table>
              </td>
          </tr>
            <tr runat="server">
                <td runat="server" style="">
                    <asp:DataPager ID="DataPager1" runat="server">
                        <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>
<ItemTemplate>
         <tr runat="server">
            <td rowspan="4">
                <asp:Image ID="Image1" runat="server" ImageUrl='<%# String.Format("~\\Static\\Images\\BookCovers\\{0}", Eval("CoverImageSmall")) %>' Height="120" Width="90"/>
            </td>
            <td colspan="2" style="font-size:large; padding-bottom:5px; padding-left:10px; color:Black;">
                <asp:Label runat="server" ID="TitleLabel" Text='<%# Eval("Title") %>' />
            </td>  
         </tr>
         <tr runat="server">
            <td colspan="2" style="padding-left:10px;">
                <asp:Label runat="server" ID="FirstNameLabel" Text='<%# Eval("FirstName") %>' />
                <asp:Label runat="server" ID="LastNameLabel" Text='<%# Eval("LastName") %>' />
            </td>
         </tr>
         <tr runat="server">
            <td colspan="2" style="padding-left:10px;">
            </td>
         </tr>
         <tr runat="server">
            <td>
            </td>
            <td>
            </td>
         </tr>
    </ItemTemplate>

但我得到的是：

______________________________________________
| _____________ |                             |
||   Image    | |                             |
||            | |                             |
||____________| |___________Title_____________|
|               |____________Name_____________|
|               |______Value_____|____Value___|
|_______________|______Value_____|____Value___|

---

CSS被重置。

行范围自动生成列，所有其他行/单元格将添加到列的周围。可以删除最后一行中的所有colspans和第二个td

<ItemTemplate>
     <tr runat="server">
        <td rowspan="4">
            <asp:Image ID="Image1" runat="server" ImageUrl='<%# String.Format("~\\Static\\Images\\BookCovers\\{0}", Eval("CoverImageSmall")) %>' Height="120" Width="90"/>
        </td>
        <td style="font-size:large; padding-bottom:5px; padding-left:10px; color:Black;">
            <asp:Label runat="server" ID="TitleLabel" Text='<%# Eval("Title") %>' />
        </td>  
     </tr>
     <tr runat="server">
        <td style="padding-left:10px;">
            <asp:Label runat="server" ID="FirstNameLabel" Text='<%# Eval("FirstName") %>' />
            <asp:Label runat="server" ID="LastNameLabel" Text='<%# Eval("LastName") %>' />
        </td>
     </tr>
     <tr runat="server">
        <td style="padding-left:10px;">
        </td>
     </tr>
     <tr runat="server">
        <td>
        </td>
     </tr>
</ItemTemplate>

我写下了一个简单的代码：

图像代码
标题




名称


值1
值2


<
用你的代码试试这个。希望它能如您所愿工作。
尝试过，但没有改变。第二列上的顶部单元格的行为仍然像是从第一列@Tsarl:继承了行span=“4”：这不是预期的行为吗？如果是，HTML是正确的。也许这与页面上的其他CSS有关，或者标签输出的内容有关？你能提供更详细的代码和/或输出吗？这正是我想要的，但有些事情似乎把它搞砸了。更新了问题。我不确定我是否理解你所说的输出是什么意思…@Tsarl:ASCII艺术版很有用，谢谢。我所说的输出是指最终生成的包含所有资产等的HTML。您的HTML代码段看起来是正确的，因此可能是与CSS规则的交互，或者是特定于“title”单元格中的内容使其如此庞大。仅从提供的HTML很难判断它可能是什么。你能尽可能简化页面并把它放在一个JSFIDLE中，在那里你可以复制它吗？@Tsarl:哦，我明白了。这是因为CSS重置时的垂直对齐。请参阅我上面的编辑，了解如何修复它。您在其他浏览器中测试过吗？相同或不同的行为？在IE和Firefox中，它们具有上述行为。然而，在chrome中，事情变得更加奇怪。。。标题单元格仍显示在同一位置，但名称单元格显示在其上方（如果一切正常，我希望它处于该位置）。感谢您的帮助，但我希望图像单元格有一行span=“4”。您的代码给出的表格式与我的目标略有不同。
<ItemTemplate>
     <tr runat="server">
        <td rowspan="4">
            <asp:Image ID="Image1" runat="server" ImageUrl='<%# String.Format("~\\Static\\Images\\BookCovers\\{0}", Eval("CoverImageSmall")) %>' Height="120" Width="90"/>
        </td>
        <td style="font-size:large; padding-bottom:5px; padding-left:10px; color:Black;">
            <asp:Label runat="server" ID="TitleLabel" Text='<%# Eval("Title") %>' />
        </td>  
     </tr>
     <tr runat="server">
        <td style="padding-left:10px;">
            <asp:Label runat="server" ID="FirstNameLabel" Text='<%# Eval("FirstName") %>' />
            <asp:Label runat="server" ID="LastNameLabel" Text='<%# Eval("LastName") %>' />
        </td>
     </tr>
     <tr runat="server">
        <td style="padding-left:10px;">
        </td>
     </tr>
     <tr runat="server">
        <td>
        </td>
     </tr>
</ItemTemplate>