我試圖創建一個小標題和側面的標題看起來像下面的圖片中的表：創建小標題和側標題的表格
這是我到目前爲止：
<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>
是否有可能有一張與上圖相似的表。
使用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>
我明白了，但是如何將兩列合併在一起，並將兩行分配給組合列，如圖所示？ – Jeiman
你可以使用colspan。
缺少正確的標題單元格標記，不會在問題中的圖像中產生外觀。 –
像這樣的事情
<!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和colspan
已經回答，但標記應該是mo再是這樣的：
<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/
是的，它是可能的。 – Jim
標記與圖像幾乎沒有相似 – andrew
只需使用CSS ... – Idris