CODEWITHSUNDEEP
htmlreactjs
Nat
Nat

Reputation: 749

Is this table possible in HTML

I am wondering if this table layout in HTML possible? here is what I have in Reactjs:

enter image description here

I am getting errors trying to do a colspan.

What I want to achieve is this layout:

enter image description here

Many thanks in advance and greatly appreciate any helps

Upvotes: 0

Views: 84

Answers (3)

Rohit Khandelwal
Rohit Khandelwal

Reputation: 632

That's how you wanted your table to be, use colspan after which cell you need divided columns.

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

table {
  border: 1px solid black;
  width: 60%;
  text-align: left;
}

th,
td {
  padding: 10px;
}
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Name</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td colspan="3">Text</td>
    </tr>
    <tr>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td colspan="3">Text</td>
    </tr>
    <tr>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td colspan="3">Text</td>
    </tr>
    <tr>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
  </tbody>
</table>

Upvotes: 2

I_love_vegetables
I_love_vegetables

Reputation: 1341

yes it is possible with colspan, here is the example code

<table>
  <tr>
    <th>name</th>
    <th>title</th>
    <th>edit</th>
  </tr>
  <tr>
    <td>Jhon doe</td>
    <td>Sales</td>
    <td>Edit</td>
  </tr>
  <tr>
    <td colspan="3">Remark : blablabla</td>
  </tr>
   <tr>
    <td>Jane doe</td>
    <td>Sales</td>
    <td>Edit</td>
  </tr>
  <tr>
    <td colspan="3">Remark : blablabla</td>
  </tr>
</table>

but you will need css to add borders

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

Upvotes: 2

N. Tajalli
N. Tajalli

Reputation: 11

Yes, it is. You can read this link.

But to save your time you just need to set colspan=3 in your td where you want it to be expanded.

Upvotes: 1

Related Questions