简体   繁体   English

HTML表格如何在第二列中拆分行?

[英]HTML table how to split rows in second column?

And align by center? 并按中心对齐?

In my case I need something like this: 就我而言,我需要这样的东西:

在此处输入图片说明

in the place where square is, I want to put picture, aligned in center. 在正方形的地方,我想把图片对准中心。 I try to do it in table, but I can split only first rows like this: 我尝试在表中执行此操作,但是我只能像这样拆分第一行:

<div>
    <asp:Panel>

       <table>
        <tr> 
         <td rowspan="2" bgcolor="#FBF0DB">Cell 1</td>
         <td>Cell 2</td>
        </tr>
        <tr> 
         <td>Cell 3</td>
        </tr>
       </table>

    <!-- here other markup -->
    </asp:Panel>
</div>

在此处输入图片说明

But if I swap(td from first tr with second), cell from right is not splitted or not aligned by center: 但是如果我交换(从第一个tr到第二个td的td),则右边的单元格不会被拆分或未按中心对齐:

在此处输入图片说明

How to split from right side and align by center? 如何从右侧拆分并按中心对齐?

Just do something like this and you'll be fine. 只要做这样的事情,你会没事的。

<div>
<asp:Panel>

   <table>
    <tr> 
     <td bgcolor="#FBF0DB">Cell 1</td>
     <td rowspan="2">Cell 2</td>
    </tr>
    <tr> 
     <td >Cell 3</td>
    </tr>
   </table>

<!-- here other markup -->
</asp:Panel>

The principle is simply telling the second column on the first row to occupy two rows in place of the default which is one. 原理是简单地告诉第一行的第二列占用两行,而不是默认值一。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM