在 HTML 中使用 subColumn 制作表格

Posted 2023-03-05

【中文标题】在 HTML 中使用 subColumn 制作表格

【英文标题】：Making a table with subColumn in HTML

【发布时间】：2022-01-21 00:24:45

【问题描述】：

我一直在尝试在 html 中制作包含 4 列和 2 个子列的表格，但我的每一次尝试都失败了，但事件并没有接近我想要做的，

这是我想要做的一个快照：

【问题讨论】：

看看rowspan：w3schools.com/tags/att_rowspan.asp

@schmauch 哦，现在我知道了如何使用 rowspan，

【参考方案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

【讨论】：

@mplungjan 感谢您让我知道...添加了 sn-p。

【参考方案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>

【参考方案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>

【讨论】：

您可能需要添加一些解释