具有 3 个标题和 colspan 的 Html 表
Posted
技术标签:
【中文标题】具有 3 个标题和 colspan 的 Html 表【英文标题】：Html table with 3 headers and colspan 【发布时间】：2022-01-11 15:51:04 【问题描述】：我希望我的 html 表有 3 个标题，其中第二个和第三个标题应该分开，如下所示。我尝试使用colspan，但无法创建它。需要帮助。
/--------------------------------------------------------------------------------------\
| | Two | Three |
| One |------------|-----------------------------------------------------------|
| | Two A | Three A | Three B | Three C | Three |
|-------------|------------------------------------------------------------------------|
|One A | One B| Col 1|Col 2| Col 1 | Col 2| Col 1 | Col 2| Col 1 | Col 2| Col 1 | Col 2|
|--------------------------------------------------------------------------------------|
\--------------------------------------------------------------------------------------/
【问题讨论】：
【参考方案1】：<!DOCTYPE html>
<html>
<head>
<style>
table, th, td
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
</style>
</head>
<body>
<table>
<tr>
<th colspan="2" rowspan="2">One</th>
<th colspan="2">Two </th>
<th colspan="10">Three </th>
</tr>
<tr>
<th colspan="2">Two A</th>
<th colspan="2">Three A</th>
<th colspan="2">Three B</th>
<th colspan="2">Three C</th>
<th colspan="2">Three D</th>
</tr>
<tr>
<td>One A</td>
<td>One B</td>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 1 </td>
<td>Col 2</td>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 1</td>
<td>Col2</td>
<td> Col 1</td>
<td> Col 2</td>
</tr>
<tr>
<td>One A</td>
<td>One B</td>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 1 </td>
<td>Col 2</td>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 1</td>
<td>Col2</td>
<td> Col 1</td>
<td> Col 2</td>
</tr>
</table>
</body>
</html>
</body>
</html>【讨论】：
谢谢大家。你的解决方案对我有用！【参考方案2】：要使用相同的格式，请使用以下内容：
<table border="1">
<tr>
<td rowspan="2" colspan="2">One</td>
<td colspan="2">Two</td>
<td colspan="8">Three</td>
</tr>
<tr>
<td colspan="2">Two A</td>
<td colspan="2">Three A</td>
<td colspan="2">Three B</td>
<td colspan="2">Three C</td>
<td colspan="2">Three</td>
</tr>
<tr>
<td>One A</td>
<td>One B</td>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 1</td>
<td>Col 2</td>
</tr>
</table>
您需要使用colspan 和rowspan 来获得结果。
【讨论】：
【参考方案3】：你可以试试这个：
body
margin:10px;
table, th, td
border: 1px solid black;
border-collapse: collapse;
padding:5px;
<table style="width:100%">
<tr>
<th rowspan="2" colspan="2">One</th>
<th colspan="2">two</th>
<th colspan="8">Three</th>
</tr>
<tr>
<td colspan="2">Two A</td>
<td colspan="2">Three A</td>
<td colspan="2">Three B</td>
<td colspan="2">Three C</td>
<td colspan="2">Three D</td>
</tr>
<tr>
<td>One A</td>
<td>One B</td>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td colspan="12"></td>
</tr>
</table>【讨论】：
以上是关于具有 3 个标题和 colspan 的 Html 表的主要内容，如果未能解决你的问题，请参考以下文章
如何在 HTML 表格中使用 colspan 和 rowspan？
兄弟连学Python（06）---- table合并单元格colspan和rowspan
如何在 JSF panelGrid 中设置 colspan 和 rowspan？
当具有定义宽度的子元素位于具有 colspan 的单元格内时，如何修复 Microsoft Edge 显示不正确的表格单元格宽度？