Html table 与 3 headers 和 colspan
Html table with 3 headers and colspan
我希望我的 html table 有 3 个 headers,其中第二个和第三个 headers 应该按照我下面的描述进行划分。我尝试使用 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|
|--------------------------------------------------------------------------------------|
\--------------------------------------------------------------------------------------/
<!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>
要使用相同的格式,请使用以下内容:
<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
来获得结果。
你可以试试这个:
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>
我希望我的 html table 有 3 个 headers,其中第二个和第三个 headers 应该按照我下面的描述进行划分。我尝试使用 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|
|--------------------------------------------------------------------------------------|
\--------------------------------------------------------------------------------------/
<!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>
要使用相同的格式,请使用以下内容:
<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
来获得结果。
你可以试试这个:
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>