你如何在HTML表格中使用colspan和rowspan？
我不知道如何合并HTML表格中的行和列。
你能帮我做一个这样的HTML表格吗？
我会build议：
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"> </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>
如果你对表格布局的工作感到困惑，他们基本上是从x = 0，y = 0开始的， 让我们来解释graphics，因为它们非常有趣！
当你开始一个表，你做一个网格。 您的第一行和单元格将位于左上angular。 把它看作一个数组指针，向右移动每个递增的x值，然后向下移动每个递增的y值。
对于你的第一行，你只定义了两个单元格。 一个横跨两行，一个横跨四列。 所以当你到达第一排的末尾时，看起来像这样：
<table> <tr> <td rowspan="2"></td> <td colspan="4"></td> </tr> </table>
现在行已经结束，“数组指针”跳转到下一行。 由于x位置0已经被前一个单元占据，所以x跳到位置1以开始填充单元。 *请参阅有关rowspans之间差异的说明。
这一行有四个单元格，它们都是1×1块，填充它上面的行的相同宽度。
<table> <tr> <td rowspan="2"></td> <td colspan="4"></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table>
下一行是所有1×1单元格。 但是，例如，如果您添加了一个额外的单元格？ 那么，它会跳出右边的边缘。
<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>
享受创造表的美好世界！
如果有人正在寻找一个左边和右边的rowspan，这里是你如何做到这一点：
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>
如果要扩展单元格，并使用跨平台扩展，请使用rowspan 。
您可以在td元素上使用rowspan="n"使其跨越n行，在td元素上使用colspan="m"使其跨越m列。
看起来你的第一个TD需要一个rowspan="2" ，下一个TD需要一个colspan="4" 。
您正在寻找第一个td的属性是rowspan ： http : rowspan
<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>
<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>
<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>
这和你的桌子很相似
<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>
