How do you layout this table header in html?-CodePudding

What I have so far looks like this code below..

<thead>
<tr>
    <th>NAME</th>
    <th>FIBER</th>
    <th>TELEPHONE</th>
    <th>COAXIAL</th>

    <th>SUBSCRIBER FOC</th>
    <th>SUBSCRIBER TLC</th>
    <th>SUBSCRIBER CC</th>

    <th>REMARKS</th>
</tr>
</thead>

but I want to achieve this layout..

 ------ ------- ----------- --------- ---------------- --------- 
|      |       |           |         |   SUBSCRIBER   |         |
| NAME | FIBER | TELEPHONE | COAXIAL  ----- ----- ----  REMARKS  
|      |       |           |         | FOC | TLC | CC |         |
 ------ ------- ----------- --------- ----- ----- ---- --------- 
|      |       |           |         |     |     |    |         |
|      |       |           |         |     |     |    |         |
|      |       |           |         |     |     |    |         |
|      |       |           |         |     |     |    |         |
|      |       |           |         |     |     |    |         |
|      |       |           |         |     |     |    |         |
 ------ ------- ----------- --------- ----- ----- ---- ---------

is it possible without using the CSS Grid?

CodePudding user response：

Try to run the code following.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
</head>
<style>
    th {
        border: 1px solid black;
    }
</style>
<body>
    <table>
        <thead>
            <tr>
                <th rowspan="2">NAME</th>
                <th rowspan="2">FIBER</th>
                <th rowspan="2">TELEPHONE</th>
                <th rowspan="2">COAXIAL</th>
                
                <th rowspan="1" colspan="3">SUBSCRIBER</th>                
                <th rowspan="2">REMARKS</th>
            </tr>
            <tr>
                <th>FOC</th>
                <th>TLC</th>
                <th>CC</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>value</td>
                <td>value</td>
                <td>value</td>
                <td>value</td>
                <td>value</td>
                <td>value</td>
                <td>value</td>
                <td>value</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Hope it helps for you. Thanks.

CodePudding user response：

is it really that complicated?

body {
  font-family      : Arial, Helvetica, sans-serif;
  font-size        : 16px;
  }
table {
  border-collapse  : separate;
  border-spacing   : 1px;
  background-color : darkblue;
  margin           : 1em;
  color            : black;
  font-size        : .8rem;
  }
table th {
  background-color : whitesmoke;
  padding          : .2em .6em;
  min-width        : 3.2em;
  }

<table>
  <thead>
    <tr>
      <th rowspan="2"> NAME       </th>
      <th rowspan="2"> FIBER      </th>
      <th rowspan="2"> TELEPHONE  </th>
      <th rowspan="2"> COAXIAL    </th>
      <th colspan="3"> SUBSCRIBER </th>
      <th rowspan="2"> REMARKS    </th>
    </tr>
    <tr>
      <th> FOC </th>
      <th> TLC </th>
      <th> CC  </th>
    </tr>
  </thead>
</table>