CODEWITHSUNDEEP
htmlbootstrap-4
Beginner Coder
Beginner Coder

Reputation: 226

how to make table in html using rowspan and colspan?

How to build this table in html ??

enter image description here

I want to make table using rowspan and colspan ?

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>


<table class="table table-bordered">
  <thead>
    <th>Subject</th>
    <th>Result</th>
  </thead>
  <tbody>
    <tr>
      <td>Science</td>
      <td>Physics</td>
      <td>Chemistry</td>
      <td>Other Science</td>
      <td>Math</td>
      <td>English</td>
    </tr>
  </tbody>
</table>

Upvotes: 4

Views: 399

Answers (3)

MattAllegro
MattAllegro

Reputation: 7345

I only added rowspans, colspans and some other minor edits to the code in the question and the two lines of CSS are only a bare suggestion that can be changed how one likes.

table{
    margin:50px auto;
    max-width:500px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>

<table class="table table-bordered">
  <thead>
    <tr>
      <th colspan="2">Subject</th>
      <th>Result</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Science</td>
      <td>Physics</td>
      <td>A</td>
    </tr>
    <tr>
      <td>Chemistry</td>
      <td>A</td>
    </tr>
    <tr>
      <td rowspan="2">Other<br>Science</td>
      <td>Biology</td>
      <td>B</td>
    </tr>
    <tr>
      <td>Geography</td>
      <td>A</td>
    </tr>
    <tr>
      <td colspan="2">Math</td>
      <td>A+</td>
    </tr>
    <tr>
      <td colspan="2">English</td>
      <td>A+</td>
    </tr>
  </tbody>
</table>

Upvotes: 0

ppwater
ppwater

Reputation: 2277

You can learn about <table> tags at MDN You can do this:

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

<table class="table table-bordered">
  <thead>
    <tr>
      <th colspan="2">Subject</th>
      <th>Result</th>
    </tr>

  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Science</td>
      <td>Physics</td>
      <td>A</td>

    </tr>
    <tr>
      <td>Chemistry</td>
      <td>A</td>
    </tr>
    <tr>
      <td rowspan="2">Other Science</td>
      <td>Biology</td>
      <td>B</td>
    </tr>
    <tr>
      <td>Geography</td>
      <td>A</td>
    </tr>
    <tr>
      <td colspan="2">Math</td>
      <td>A+</td>
    </tr>
    <tr>
      <td colspan="2">English</td>
      <td>A+</td>

    </tr>

  </tbody>
</table>

Upvotes: 2

Adhitya
Adhitya

Reputation: 665

This is set-up with colspan and rowspan

table {
  border-collapse: collapse;
}

table,
tr,
th,
td {
  border: 1px solid #000;
}

th {
  padding: 1ex;
  background: #ccc;
}

td {
  padding: 1ex;
}

.divide td {
  border-top: 3px solid;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

<table class="table table-bordered">
  <thead>
    <th colspan="2">Subject</th>
    <th>Result</th>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2" colspan="1" width="100px">
        SCIENCE
      </td>
      <td>
        Physics
      </td>
      <td>A</td>
    </tr>
    <tr>
      <td>
        <span>Chemistry</span>
      </td>
      <td colspan="1">A</td>
    </tr>
    <tr>
      <td rowspan="2" colspan="1" width="100px">
        SCIENCE
      </td>
      <td>
        Physics
      </td>
      <td>A</td>
    </tr>
    <tr>
      <td>
        <span>Chemistry</span>
      </td>
      <td colspan="1">A</td>
    </tr>
    <tr>
      <td colspan="2">
        SCIENCE
      </td>
      <td>A</td>
    </tr>
    <tr>
    <td colspan="2">
        SCIENCE
      </td>
      <td>A</td>
    </tr>
  </tbody>
</table>


<br>
<br>
<table>
  <tr>
    <th>head</th>
    <th>title</th>
    <th>title</th>
    <th>title</th>
    <th></th>
  </tr>
  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>content</td>
    <td>content</td>
    <td>content</td>
    <td rowspan="2">white</td>
  </tr>
  <tr>
    <td colspan="4">
      lorem ipsum
    </td>
  </tr>
  <tr class="divide">
    <td>
      <input type="checkbox">
    </td>
    <td>content</td>
    <td>content</td>
    <td>content</td>
    <td rowspan="2">gray</td>
  </tr>
  <tr>
    <td colspan="4">
      lorem ipsum
    </td>
  </tr>
  <tr class="divide">
    <td>
      <input type="checkbox">
    </td>
    <td>content</td>
    <td>content</td>
    <td>content</td>
    <td>white</td>
  </tr>
  <tr class="divide">
    <td>
      <input type="checkbox">
    </td>
    <td>content</td>
    <td>content</td>
    <td>content</td>
    <td rowspan="2">gray</td>
  </tr>
  <tr>
    <td colspan="4">
      lorem ipsum
    </td>
  </tr>
</table>

Upvotes: 1

Related Questions