在表格中划分单元格

【问题标题】：Dividing a cell in a table在表格中划分单元格
【发布时间】：2022-01-13 18:16:03
【问题描述】：

我需要在不破坏表格的其余部分的情况下，以这样一种方式划分一个单元格，使其顶部有 1 个标题，在 html 中在其下方有 2 个标题。 table example

我试过做一个嵌套表，并玩弄 colspan 和 rowspan，但我是新手，还没有做对。

【问题讨论】：

查看rowspan 和colspan，但如果您尝试创建布局，请改用display: grid。 w3schools.com/html/html_table_colspan_rowspan.asp

【解决方案1】：

您可以使用以下代码在表格上显示该样式：

<!DOCTYPE html>
<html>
<head>
 <style>
   table,th,td {
      border: 1px solid black;
      border-collapse:collapse;
    }
 </style>
</head>
<body>
<table width="600">
 <caption>Student's Info</caption>
  <tr>
    <th rowspan="2" width="20%">Name</th>
   <th rowspan="2" width="20%">Class</th>
   <th colspan="2" width="30%">Parents</th>
   <th rowspan="2" width="30%">Roll No.</th>
   </tr>
  <tr>
    <th>Father</th>
    <th>Mother</th>
  </tr>
  <tr>
    <td>A</td>
    <td>10</td>
    <td colspan="2">X and Y</td>
    <td>1</td>
  </tr>
  <tr>
    <td>B</td>
    <td>10</td>
    <td colspan="2">F and G</td>
    <td>2</td>
  </tr>
 </table>

</body>
</html>

【讨论】：