创建带有子标题和副标题的表格答案

【问题标题】：Create a table with sub-headings and side-headings创建带有子标题和副标题的表格
【发布时间】：2020-12-10 15:10:52
【问题描述】：

我正在尝试创建一个带有子标题和侧标题的表格，如下图所示：

这是我目前所拥有的：

<table>
    <thead>
    <tr>
        <th>Object</th>
        <th>Openings</th>
        <th>Internal Dimensions</th>
            <th>Weight</th>
            <th>Volume</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Box</td>
        <td>300x500</td>
        <td>300cm x 400cm x 600cm</td>
        <td>Min: 100g, Max: 200g, NA</td>
        <td>300</td>
    </tr>
    </tbody>
</table>

有没有可能和上图一样的表格。

【问题讨论】：

标记与图像几乎没有相似之处
@andrew 为您更新了表格。
这个问题应该在编写标记和样式方面表现出更多的努力，以便可以回答困难部分（如果它们仍然存在）。事实上，这个问题确实要求编码服务（这是一张图片，为我编码）。

标签： html css

【解决方案1】：

已经回答，但标记应该更像这样：

<table>
    <thead>
        <tr>
            <th colspan="2">Object</th>
            <th colspan="2">Openings</th>
            <th colspan="3">Internal Dimensions</th>
            <th colspan="3">Weight</th>
            <th>Volume</th>
        </tr>
        <tr>
            <th>sub header</th>
            <th>sub header</th>
            <th>sub header</th>
            <th>sub header</th>
            <th>sub header</th>
            <th>sub header</th>
            <th>sub header</th>
            <th>sub header</th>
            <th>sub header</th>
            <th>sub header</th>
            <th>sub header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>row header</th>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
        </tr>
    </tbody>
</table>

它呈现出一些风格：~~http://fiddle.jshell.net/TLAV8/~~ http://jsfiddle.net/TLAV8/

【讨论】：

【解决方案2】：

https://jsfiddle.net/SyedFayaz/ud0mpgoh/7/

<body>
<table class="table-bordered">
    <col>
    <col>
    <col>
    <colgroup span="4"></colgroup>
    <col>
    <tr>
        <th rowspan="2" style="vertical-align : middle;text-align:center;">S.No.</th>
        <th rowspan="2" style="vertical-align : middle;text-align:center;">Item</th>
        <th rowspan="2" style="vertical-align : middle;text-align:center;">Description</th>
        <th colspan="3" style="horizontal-align : middle;text-align:center; width: 50%;">Items</th>
        <th rowspan="2" style="vertical-align : middle;text-align:center;">Rejected Reason</th>
    </tr>
    <tr>
        <th scope="col">Order</th>
        <th scope="col">Received</th>
        <th scope="col">Accepted</th>
    </tr>
    <tr>
        <th>1</th>
        <td>Watch</td>
        <td>Analog</td>
        <td>100</td>
        <td>75</td>
        <td>25</td>
        <td>Not Functioning</td>
    </tr>
    <tr>
        <th>2</th>
        <td>Pendrive</td>
        <td>5GB</td>
        <td>250</td>
        <td>165</td>
        <td>85</td>
        <td>Not Working</td>
    </tr>
</table>

【讨论】：

【解决方案3】：

类似的东西

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Testing</title>
    <style type="text/css">
        table {
            width: 100%;
            border: 1px solid black;
        }

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

            table .FirstColumn {
                background-color: #9999dd;
            }

            table thead tr {
                background-color: blue;
            }

            table tbody.secondHeader tr {
                background-color: skyblue;
            }
    </style>
</head>
<body>
    <table cellpadding="0" cellspacing="0">
        <colgroup>
            <col class="FirstColumn">
        </colgroup>
        <thead>
            <tr>
                <th colspan="2">Object</th>
                <th colspan="2">Openings</th>
                <th colspan="3">Internal Dimensions</th>
                <th colspan="3">Weight</th>
                <th>Volume</th>
            </tr>
        </thead>
        <tbody class="secondHeader">
            <tr>
                <th>Type</th>
                <th>Size</th>
                <th>Width</th>
                <th>Height</th>
                <th>Length</th>
                <th>Width</th>
                <th>Height</th>
                <th>Max</th>
                <th>Min</th>
                <th>Tare</th>
                <th>Capacity</th>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>20 std</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>40 std</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>50 std</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>60 std</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

我建议您更深入地了解一下 HTML 表格和所有变体，一个好的起点是 here，包括但不限于 colgroup、col 和 @987654325 等概念@

【讨论】：

【解决方案4】：

使用 CSS

<style type="text/css">
.blue_bg{ background-color: blue; }
</style>
<table>
    <thead>
        <tr>
            <th>Hello</th>
            <th>Hello</th>
            <th>Hello</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="blue_bg">Hello</td>
            <td class="blue_bg">Hello</td>
            <td class="blue_bg">Hello</td>
        </tr>
        <tr>
            <td class="blue_bg">Hello</td>
            <td>Hello</td>
            <td>Hello</td>
        </tr>
        <tr>
            <td class="blue_bg">Hello</td>
            <td>Hello</td>
            <td>Hello</td>
        </tr>
        <tr>
            <td class="blue_bg">Hello</td>
            <td>Hello</td>
            <td>Hello</td>
        </tr>
    </tbody>
</table>

【讨论】：

我明白了，但是我如何将两列组合在一起并为该组合列分配两行，如图所示？
你可以使用 colspan。而不是
缺少适当的标题单元格标记，不会在问题的图像中产生外观。