Question

我想创建一个表达以下结构的HTML表：

ColumnHeading1            ColumnHeading2
SubHeading1A SubHeading1B SubHeading2A Subheading2B
data1A       data1B       data2A       data2B
data1A       data1B       data2A       data2B
data1A       data1B       data2A       data2B
data1A       data1B       data2A       data2B
...

如何使用<table>，<tr>，<th>，<td>等标记执行此操作？我不知道如何将ColumnHeading2与SubHeading2A对齐。

Answer 1

这样的东西？

<table>
  <tr>
    <th>ColumnHeading1</th>
    <th>ColumnHeading2</th>
  </tr>
  <tr>
    <td>SubHeading1A</td>
    <td>SubHeading1B</td>
    <td>SubHeading2A</td>
    <td>SubHeading2B</td>
  </tr>
  <tr>
    <td>data1A</td>
    <td>data1B</td>
    <td>data2A</td>
    <td>data2B</td>
  </tr>
</table>

Answer 2

很简单。复制以下代码并开始使用

   <table>
  <thead>
    <tr>
    <th colspan="2">head1</th>
          <th colspan="2">head1</th>
    </tr>

    <tr>
    <th>subhead</th>
    <th>subhead</th>
    <th>subhead</th>
    <th>subhead</th>
</tr>
  </thead>
  <tbody>
    <tr>  
      <td>data</td> 
      <td>data</td>
      <td>data</td>
      <td>data</td>

    </tr>
     <tr>  
      <td>data</td> 
      <td>data</td>
      <td>data</td>
      <td>data</td>

    </tr>
     <tr>  
      <td>data</td> 
      <td>data</td>
      <td>data</td>
      <td>data</td>

    </tr>
  </tbody>
</table>

Answer 3

colspan属性允许您拥有跨多个列的表格标题（th）和单元格（td）。同样，rowspan将允许标题和单元格跨越多行。

＆＃13;

table {
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #888;
  padding: 0.25em 0.5em;
}

＆＃13;

<table>
  <thead>
    <tr>
      <th colspan="2">ColumnHeading1</th>
      <th colspan="2">ColumnHeading2</th>
    </tr>
    <tr>
      <th>SubHeading1A</th>
      <th>SubHeading1B</th>
      <th>SubHeading2A</th>
      <th>SubHeading2B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data1A</td>
      <td>data1B</td>
      <td>data2A</td>
      <td>data2B</td>
    </tr>
    <tr>
      <td>data1A</td>
      <td>data1B</td>
      <td>data2A</td>
      <td>data2B</td>
    </tr>
    <tr>
      <td>data1A</td>
      <td>data1B</td>
      <td>data2A</td>
      <td>data2B</td>
    </tr>
    <tr>
      <td>data1A</td>
      <td>data1B</td>
      <td>data2A</td>
      <td>data2B</td>
    </tr>
  </tbody>
</table>

＆＃13;

如何创建包含子列的HTML表？

3 个答案: