Question

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

enter image description here

这是我到目前为止所做的：

<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>

是否可以使用与上图类似的表格。

Answer 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/

Answer 2

像这样的东西

<!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，{{{{}}这样的概念。 1}}和col

Answer 3

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>

Answer 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>

创建一个包含子标题和侧标题的表格

4 个答案: