你如何在HTML表中使用colspan和rowspan？

Question

我不知道如何在HTML表中合并行和列.

你可以帮我用HTML制作这样的表格吗？

Answer 1

如果您对表格布局的工作方式感到困惑,那么它们基本上从x = 0,y = 0开始,然后一直工作.让我们用图形来解释,因为它们非常有趣!

当你开始一张桌子时,你会制作一个网格.您的第一行和单元格将位于左上角.可以把它想象成一个数组指针,用x的每个递​​增值向右移动,然后用每个递增的y值向下移动.

对于第一行,您只定义了两个单元格.一个跨越2行,一个跨越4列.所以当你到达第一行的末尾时,它看起来像这样:

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
</table>

现在该行已经结束,"数组指针"跳转到下一行.由于x位置0已被前一个单元占用,因此x跳转到位置1以开始填充单元格.*请参阅关于rowpans之间差异的说明.

该行中有四个单元格,它们都是1x1块,填充在它上面的行的相同宽度.

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

下一行是所有1x1单元格.但是,例如,如果你添加了一个额外的单元格怎么办？好吧,它会弹出右边的边缘.

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

*但是如果我们改为(而不是添加额外的单元格)使所有这些单元格的行数为2？你需要考虑的是,即使你不打算在下一行添加任何更多的单元格,行仍然必须存在(即使它是一个空行).如果您确实尝试在之后的行中添加新单元格,您会注意到它会开始将它们添加到底行的末尾.

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

享受创造桌子的美妙世界!

Answer 2

我建议:

table {
    empty-cells: show;
    border: 1px solid #000;
}

table td,
table th {
    min-width: 2em;
    min-height: 2em;
    border: 1px solid #000;
}

<table>
    <thead>
        <tr>
            <th rowspan="2"></th>
            <th colspan="4">&nbsp;</th>
        </tr>
        <tr>
            <th>I</th>
            <th>II</th>
            <th>III</th>
            <th>IIII</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
         </tr>
    </tbody>
</table>

参考文献:

• td元素.
• th元素.
• tbody元素.
• thead元素.
• table元素.

Answer 3

如果有人在左侧和右侧都要查找行数,请按以下步骤操作:

table { 
    border-collapse: collapse;
}

td {
    padding: 20px; 
    border: 1px solid black; 
    text-align: center;
}

<table>
    <tbody>
    <tr>
        <td rowspan="2">LEFT</td>
        <td> 1 </td>
        <td> 2 </td>
        <td> 3 </td>
        <td> 4 </td>
        <td rowspan="2">RIGHT</td>
    </tr>
    <tr>
        <td> 5 </td>
        <td> 6 </td>
        <td> 7 </td>
        <td> 8 </td>
    </tr>
    <tr>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
    </tr>
    </tbody>
</table>

或者,如果要将LEFT和RIGHT添加到现有行集,可以通过将它们colspan放入以下之间折叠来实现相同的结果:

table {
    border-collapse: collapse;
}

td {
    padding: 20px; 
    border: 1px solid black; 
    text-align: center;
}

<table>
    <tbody>
    <tr>
        <td rowspan="3">LEFT</td>
        <td colspan="4" style="padding: 0; border-bottom: solid 1px transparent;"></td>
        <td rowspan="3">RIGHT</td>
    </tr>
    <tr>
        <td> 1 </td>
        <td> 2 </td>
        <td> 3 </td>
        <td> 4 </td>
    </tr>
    <tr>
        <td> 5 </td>
        <td> 6 </td>
        <td> 7 </td>
        <td> 8 </td>
    </tr>
    <tr>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
    </tr>
    </tbody>
</table>

Answer 4

使用rowspan,如果你想向下延伸细胞和colspan跨延长.