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

时间：2012-03-22 21:05:24

标签： html html-table

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

Example

你能帮我用HTML制作这样的表吗？

11 个答案:

答案 0 :(得分：110)

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

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

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

Preview #0001 

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

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

此行中有四个单元格，均为1x1块，填充其上方行的相同宽度。

Preview #0002 

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

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

Preview #0003 

<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？你需要考虑的是，即使你不打算在下一行添加任何更多的单元格，行仍然必须存在（即使它是一个空行）。如果您确实尝试在之后立即在行中添加新单元格，您会注意到它会开始将它们添加到底行的末尾。

Preview #0004 

<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>

享受创造桌子的奇妙世界！

答案 1 :(得分：106)

我建议：

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

table td,
table th {
    min-width: 2em;
    min-height: 2em;
    border: 1px solid #000;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

参考文献：

答案 2 :(得分：13)

如果有人在左侧和右侧都在寻找行距， 这是你如何做到的：

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>

答案 3 :(得分：5)

如果您想要延长细胞并rowspan延伸细胞，请使用colspan。

答案 4 :(得分：3)

您可以在td元素上使用rowspan="n"使其跨越n行，并在td元素上使用colspan="m"以使其跨越m列。

看起来你的第一个td需要rowspan="2"而下一个td需要colspan="4"。

答案 5 :(得分：3)

您要查找的第一个td的属性是rowspan： http://www.angelfire.com/fl5/html-tutorial/tables/tr_code.htm 

<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></tr>
</table>

答案 6 :(得分：2)

<style type="text/css">
     table { border:2px black dotted; margin: auto; width: 100%; }
    tr { border: 2px red dashed; }
    td { border: 1px green solid; }
</style>
<table>
    <tr>
        <td rowspan="2">x</td> 
        <td colspan="4">y</td>
    </tr>
    <tr>
        <td>I</td>
        <td>II</td>
        <td>III</td>
        <td>IV</td>
    </tr>
    <tr>
        <td>nothing</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

答案 7 :(得分：1)

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

答案 8 :(得分：0)

它类似于你的表

  <table border=1 width=50%>
<tr>
    <td rowspan="2">x</td> 
    <td colspan="4">y</td>
</tr>
<tr>
    <td bgcolor=#FFFF00 >I</td>
    <td>II</td>
    <td bgcolor=#FFFF00>III</td>
    <td>IV</td>
</tr>
<tr>
    <td>empty</td>
    <td bgcolor=#FFFF00>1</td>
    <td>2</td>
    <td bgcolor=#FFFF00>3</td>
    <td>4</td>
</tr>

答案 9 :(得分：0)

Colspan和Rowspan 表被分成行，每行被分成单元格。在某些情况下，我们需要表格单元跨越（或合并）多个列或行。在这些情况下，我们可以使用Colspan或Rowspan属性。

colspan属性 colspan属性定义单元格应水平跨越（或合并）的列数。也就是说，您希望将一行中的两个或多个单元格合并为一个单元格。

<td colspan=2 >

如何进行colspan？

<html>
<body >
    <table border=1 >
        <tr>
            <td colspan=2 >
                Merged
            </td>
        </tr>
        <tr>
            <td>
                Third Cell
            </td>
            <td>
                Forth Cell
            </td>
        </tr>
    </table>
</body>
</html>

ROWSPAN rowspan属性指定单元格应垂直跨越的行数。也就是说，您希望将同一列中的两个或多个单元格垂直合并为单个单元格。

<td rowspan=2 >

如何Rowspan？

<html>
<body >
    <table border=1 >
        <tr>
            <td>
                First Cell
            </td>
            <td rowspan=2 >
                Merged
            </td>
        </tr>
        <tr>
            <td valign=middle>
                Third Cell
            </td>
        </tr>
    </table>
</body>
</html>

答案 10 :(得分：0)

我已经将ngIf用于我的类似逻辑之一。如下：

<table>
<tr *ngFor="let object of objectData; let i= index;">
<td *ngIf="(i%(object.rowSpan))==0" [attr.rowspan]="object.rowSpan">{{object.value}}</td>
</tr>
</table>

在这里， 我从模型对象中获取了rowpan值。

相关问题
最新问题