CODEWITHSUNDEEP
htmlcsshtml-table
JS24
JS24

Reputation: 458

Html Css Table format merge row

So i'm working on Crud java webbapp and i want to the desgin the table head so it will looks like this.... enter image description here

But i cannot make it through the html format..... here is my try

enter image description here

Here is the Html Code

 <div class="col-md-9">
                    <h3>Student Information From Database</h3>
                    <table class="table">
                        <thead class="bg-light">
                                <tr>
                                <th scope="col">ID</th>
                                <th scope="col">Full Name</th>
                                <th scope="col">Status</th>
                                <th colspan="2">Major 1</th>
                                 </tr>
                                 <tr>

                                    <th>col1</th>
                                    <th>col2</th>
                                    <th>col3</th>
                                 </tr>

                                </tr>
                    </thead>
                        <tbody>

                        </tbody>
                    </table>

Upvotes: 1

Views: 453

Answers (4)

Christopher Geary
Christopher Geary

Reputation: 715

You can do this with colspan & rowspan attributes.

Demo: https://jsfiddle.net/ycnar3gv/

<table>
  <thead>
    <tr>
      <th rowspan="2">ID</th>
      <th rowspan="2">Full Name</th>
      <th rowspan="2">Status</th>
      <th colspan="3">Major 1</th>
    </tr>
    <tr>
      <th>col1</th>
      <th>col3</th>
      <th>col3</th>
    </tr>
    </tr>
  </thead>
</table>

Upvotes: 0

malibil
malibil

Reputation: 179

do you want something like this;

 <table border="2">
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td colspan="3">Major1</td>
      </tr>
      <tr>
        <td>ID</td>
        <td>FullName</td>
        <td>Status</td>
        <td>physics</td>
        <td>calculus</td>
        <td>biologi</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>

Upvotes: 1

shivam shukla
shivam shukla

Reputation: 29

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        table, th, td {
          border: 1px solid black;
          text-align: center;
          border-collapse: collapse;
        }
        .brdst{
            text-align: center;
            border-right:1px;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td colspan="3" class="brdst"></td>
            <td colspan="3" class="brdst">Major1</td>
        </tr>
        <tr>
            <td>ID</td>
            <td>Full Name</td>
            <td>Status</td>
            <td>Physics</td>
            <td>Clculus</td>
            <td>Bioloy1</td>
        </tr>
        <tr>
            <td>Add col here</td>
           strong text <td>Add col here</td>
            <td>Add col here</td>
            <td>Add col here</td>
            <td>Add col here</td>
            <td>Add col here</td>
        </tr>   
     </table>    
</body>
</html>

Upvotes: 0

לבני מלכה
לבני מלכה

Reputation: 16251

Here is an example:

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>FULL NAME</th>
      <th>STATUS</th>
      <th colspan="3">
        MAJOR 1
        <table style="width:100%">
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
        </table>
      </th>
    </tr>
  </thead>
</table>

Upvotes: 1

Related Questions