Html 创建带有副标题和副标题的表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22702825/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create a table with sub-headings and side-headings
提问by Jeiman
I am trying to create a table with sub-headings and side-headings which looks like the picture below:
我正在尝试创建一个带有副标题和副标题的表格，如下图所示：
This is what I have so far:
这是我到目前为止：
<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>
Is it possible to have a table that looks similarly to the picture above.
是否有可能有一张与上图相似的表格。
采纳答案by Companjo
Use CSS
使用 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>
回答by G-Cyrillus
already answered but markup should be more like this :
已经回答但标记应该更像这样：
<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>
with some style it render : http://fiddle.jshell.net/TLAV8/http://jsfiddle.net/TLAV8/
以某种风格呈现： http://fiddle.jshell.net/TLAV8/http://jsfiddle.net/TLAV8/
回答by OJay
Something like this
像这样的东西
<!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>
I would suggest having a look at HTML tables and all the variations a bit more in depth, a good place to start would be here, including but not limited to concepts like colgroup, coland colspan
我建议在看看HTML表格和所有的变化有点更深入，一个良好的开端是在这里，包括但不限于像概念colgroup，col并colspan
