使用 HTML 中的子列创建 table

Question

我一直在尝试在 HTML 中使用 4 列和 2 个子列制作 table，但我的每次尝试都失败了，但事件并没有接近我想做的事情，

这是我要制作的快照：

Answer 1

你需要的是colspan。它会告诉单元格它应该占据更多的列。

<table>
  <tr>
    <th>Header</th>
    <th>Header</th>
    <th colspan="2">Header</th>
    <th>Header</th>
  </tr>
  <tr>
    <th>Header</th>
    <th>Header</th>
    <th>Header</th>
    <th>Header</th>
    <th>Header</th>
  </tr>
  <tr>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
  </tr>
</table>

在此处查看演示 https://codepen.io/korinektomas/pen/XWegrmz

Answer 2

这是我的解决方案，我使用了 colspan 属性

Learn More About colspan

<table border="1">
  <tr>
    <th>SL.No</th>
    <th>Number of Oxalic acid in ML</th>
    <th colspan="2">Burette readings</th>
    <th>Valume (V) of KMnO<sub>4</sub> Used V=(y-x) mL</th>
  </tr>
  <tr>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
    <th>initial (x)</th>
    <th>Final(y)</th>
    <th>&nbsp;</th>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Answer 3

html,
body {
  width: 100%;
}

table {
  margin: 0 auto;
}

table {
  width: 80%;
  border-collapse: separate;
  border: solid black 1px;
  border-radius: 6px;
}

thead {  background-color: #FFE4C4 }

tr {
  font-family: 'Times New Roman', Times, serif;
  text-align: center;
}

td, th {   border: 1px solid black; }

h3 {
  text-align: center;
}

<h3> Table 6.1 : Titration of potassium permanganatc solution against standard oxalic solution </h3>


<table>
<thead>
  <tr>
    <th> SI.NO</th>
    <th> Volume of Oxaic acid in ML </th>
    <th colspan="2"> Burette readings </th>
    <th> Valume (V) of KMnO<sub>4</sub> Used V=(y-x) mL</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td></td>
    <td></td>
    <td style="width: 100px;">
      <h4>initial (x)</h4>
    </td>
    <td style="width: 100px;">
      <h4>Final(y)</h4>
    </td>
    <td></td>
  </tr>

  <tr>
    <td>
      <pre> </pre>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>

  <tr>
    <td>
      <pre> </pre>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</tbody>
</table>

使用 HTML 中的子列创建 table

Making a table with subColumn in HTML

html

html-table