HTML中的表格副标题

Question

我正在尝试用HTML创建一个表。它应该看起来像：

但是，我无法做到。

到目前为止，这是我的代码......

<></>

Answer 1

在您自己想出的colspan属性旁边，使用rowspan（基本相同但垂直方向）。此外，请跳过<thead>或为| A | B | C |部分添加额外的行。我的示例跳过<thead>，因为这是一种更简单的方法。

＆＃13;

＆＃13;

table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}

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

th {
  vertical-align: top;
}

td:empty:after {
  content: "\00a0"; /* HTML entity of   */
}

＆＃13;

<table>
  <tr>
    <th rowspan="2">No</th>
    <th colspan="3">Types</th>
    <th rowspan="2">Remark</th>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个，

<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td rowspan="2" align="center" valign="top">No</td>
    <td colspan="3" align="center" valign="top">Types</td>
    <td rowspan="2" align="center" valign="top">Remark</td>
  </tr>
  <tr>
    <td align="center" valign="top">A</td>
    <td align="center" valign="top">B</td>
    <td align="center" valign="top">C</td>
  </tr>
  <tr>
    <td align="center" valign="top">&nbsp;</td>
    <td align="center" valign="top">&nbsp;</td>
    <td align="center" valign="top">&nbsp;</td>
    <td align="center" valign="top">&nbsp;</td>
    <td align="center" valign="top">&nbsp;</td>
  </tr>
</table>

Answer 3

在您的表格定义中添加<table align="center" border=1 cellspacing="0" cellpadding="0">并使用以下代码在表格标题中定义colspan和rowspan

            <tr>
                <th rowspan=2>No.</th>
                <th colspan="3">Types</th>
                <th rowspan=2>Remark</th>
            </tr>

所需输出的最终代码

<table align="center" border=1 cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <th rowspan=2>No.</th>
                <th colspan="3">Types</th>
                <th rowspan=2>Remark</th>
            </tr>
            <tr>

                <th>A</th>
                <th>B</th>
                <th>C</th>

            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Data1</td>
                <td>Data2</td>
                <td>Data3</td>
                <td>Ok</td>
            </tr>
        </tbody>
    </table>