Html Css Table 格式化合并行

Question

所以我正在开发 Crud java 网络应用程序，我想设计 table 头部，所以它看起来像这样....

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>

Answer 1

这是一个例子：

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

Answer 2

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

Answer 3

你想要这样的东西吗;

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

Answer 4

您可以使用 colspan & rowspan 属性来做到这一点。

演示：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>

Html Css Table 格式化合并行

Html Css Table format merge row

html

css

html-table