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

Question

I have tried to make this work but it always adds an extra column in the first row even when i clearly stated it has only 1 column. What i want to make is like this : this is what i want to make

But this is what i get like this

The only way to make it like the first picture is by using 2 tables which is what i used but is there no way to do it with 1 table ?

My code : my code for the second picture

Answer 1

Use the colspan attribute.

 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

You can use the colspan attribute.

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.

Below is a working code snippet which looks almost similar to your requirement.

 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>