【问题标题】:How to include 2 columns under one column header in html table?如何在 html 表的一个列标题下包含 2 列?
【发布时间】:2013-02-10 09:44:32
【问题描述】:

我想创建一个 html 表格,应该是这样的:

我知道我必须使用 colspan/rowspan 属性,但是如何使用呢?有人可以帮忙吗?

我尝试了以下方法:

<table>
<thead>
<tr>
<th>Evaluation</th><th>Approval</th>
<th colspan="2" >Points</th>
<th>Total</th>
<th>Date</th><th>Award Amount</th><th>Last Modified By</th>
</tr>
</thead>
<tbody>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</tbody>
</table>

但是给我的结果是:

显然,我需要在第三个标题(点)中添加子标题,如何实现?

【问题讨论】:

  • 请展示你的尝试。

标签: html asp.net html-table


【解决方案1】:

像这样:

<table>
    <thead>
        <tr>
            <th rowspan="2">Evaluation</th>
            <th rowspan="2">Approval</th>
            <th colspan="2">Points</th> // <- note colspan here
            <th rowspan="2">Total</th>
            <th rowspan="2">Date</th>
            <th rowspan="2">Award Amount</th>
            <th rowspan="2">Last Modified By</th>
        </tr>
        <tr>
            <th>Tangible</th>
            <th>Intangible</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Al/GL</td>
            <td>Select</td>
            <td>col1</td>
            <td>col2</td>
            <td>col3</td>
            <td>col4</td>
            <td>col5</td>
            <td>col6</td>
        </tr>
    </tbody>
</table>

【讨论】:

  • 很好的答案!注意第三列“colspan”而不是“rowspan”。一开始我很困惑为什么会这样。
【解决方案2】:

这是表的完整结构

<table>
    <tr>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td colspan="2"></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

谢谢...

【讨论】:

  • 如何接受这个答案?这里实际上没有答案。
猜你喜欢
  • 2021-06-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-02-25
  • 1970-01-01
  • 2022-11-21
相关资源
最近更新 更多