首页 文章

试图在html中布局表格

提问于
浏览
0

我正在尝试布局一个包含四列的表:第1列单元格深达6行;第2列单元格为六行深;第3列包含一个深四行的单元格,以及一行深的2个单元格;第4列包含一个三行深的单元格和一行深的单元格,列中的最后两个单元格为空且未指定 .

ABCD
ABCD
ABCD
ABCE
ABFx
ABGx

我试着遵循我认为这样做的规则,即:第一行<tr>包含第一行中所有内容的<td>;第二个<tr>包含<td>(s)来填充第一个非指定列的列[在这种情况下称为“E”的单元格],接下来的两个<tr>包含一个< td>每个用于“F”和“G” .

以下代码是我的尝试:

<table border='1'>
        <tr>
            <td rowspan='6'>A
A
A
A
A<br>A</td> <td rowspan='6'>B
B
B
B
B<br>B</td> <td rowspan='4'>C
C
C
C</td> <td rowspan='3'>D
D
D</td> </tr> <tr> <td>E</td> </tr> <tr> <td>F</td> </tr> <tr> <td>G</td> </tr> </table>

这给了我:

ABCDx
ABCDx
ABCDE
ABCDF
ABCGx

如果我用不需要的列“引导它”:

1ABCD
2ABCD
3ABCD
4ABCE
5ABF
6ABG

使用:

<table border='1'>
        <tr>
            <th>1</th>
            <td rowspan='6'>A
A
A
A
A<br>A</td> <td rowspan='6'>B
B
B
B
B<br>B</td> <td rowspan='4'>C
C
C
C</td> <td rowspan='3'>D
D
D</td> </tr> <tr> <th>2</th> </tr> <tr> <th>3</th> </tr> <tr> <th>4</th> <td>E</td> </tr> <tr> <th>5</th> <td>F</td> </tr> <tr> <th>6</th> <td>G</td> </tr> </table>

它按预期出现 . 那么我做错了什么?

2 回答

  • 0

    在包含 E 的行之前添加两个空行

    <table border='1'>
        <tr>
            <td rowspan='6'>A
    A
    A
    A
    A<br>A</td> <td rowspan='6'>B
    B
    B
    B
    B<br>B</td> <td rowspan='4'>C
    C
    C
    C</td> <td rowspan='3'>D
    D
    D</td> </tr> <tr></tr> <tr></tr> <tr> <td>E</td> </tr> <tr> <td>F</td> </tr> <tr> <td>G</td> </tr> </table>
  • 0

    首先,要激活6个行,你需要6个非空行,就像http://codepen.io/Toomean/pen/dMeaqd

    <table border='1'>
      <tr>
        <td rowspan='6'>A
    A
    A
    A
    A<br>A</td> <td rowspan='6'>B
    B
    B
    B
    B<br>B</td> <td rowspan='4'>C
    C
    C
    C</td> <td rowspan='3'>D
    D
    D</td> </tr> <tr></tr> <tr></tr> <tr> <td>E</td> </tr> <tr> <td>F</td> </tr> <tr> <td>G</td> </tr> </table>

相关问题