我如何在 html 中制作一个表格，第一行只有 1 列，其他行超过 1

Question

我试图让这项工作，但它总是在第一行添加一个额外的列，即使我明确声明它只有 1 列。 我想做的是这样的：这就是我想做的

但是，这是我所得到的是这样

使它像第一张图片一样的唯一方法是使用 2 张桌子，这是我使用的，但是没有办法用 1 张桌子做到这一点吗？

我的代码：我的第二张图片的代码

Answer 1

使用colspan属性。

 td { border: solid black 1px; height: 20px; }

 <table> <tr> <td colspan="3">colspan = 3</td> </tr> <tr> <td>colspan = 1</td> <td>colspan = 1</td> <td>colspan = 1</td> </tr> <tr> <td colspan="3">colspan = 3</td> </tr> </table>

Answer 2

您可以使用colspan属性。

The colspan attribute in HTML specifies the number of columns a cell should span. It allows the single table cell to span the width of more than one cell or column.

下面是一个工作代码片段，它看起来几乎与您的要求相似。

 table, tr, td, th { border: 1px solid black; border-collapse: collapse; } table { width: 100%; } .row1, .row2 { height: 100px; } .row2 { vertical-align: top; } .row1, .row3 { text-align: center; }

 <table> <tr class="row1"> <td colspan="3">Your Name</td> </tr> <tr class="row2"> <td>Course 1</td> <td>Course 2</td> <td>Course 3</td> </tr> <tr colspan="3" class="row3"> <td colspan="3">Social Media accounts</td> </tr> </table>