Html Css Table format merge row

Question

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

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

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>

לבני מלכה · Accepted Answer · 2021-06-20 05:50:28Z

1

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>

answered Jun 20, 2021 at 5:50

לבני מלכה

16.3k2 gold badges26 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

shivam shukla · Accepted Answer · 2021-06-20 06:12:58Z

<!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>

malibil · Accepted Answer · 2021-06-20 06:21:27Z

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>

Christopher Geary · Accepted Answer · 2021-06-20 10:14:41Z

1

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>

answered Jun 20, 2021 at 10:14

Christopher Geary

7256 silver badges12 bronze badges

Collectives™ on Stack Overflow

Html Css Table format merge row

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related