How do i make a table in html with first row having 1 column only and other rows having more than 1-CodePudding

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

CodePudding user response：

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>

CodePudding user response：

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>