要制作一个具有中间列标题的HTML表格,它有两行,左右各有一列,可以按照以下步骤进行:
<!DOCTYPE html>
<html>
<head>
<title>HTML表格</title>
</head>
<body>
<table>
<!-- 表格内容将在后续步骤中添加 -->
</table>
</body>
</html>
<tr>
元素表示表格的行。<table>
<tr>
<th>左列标题</th>
<th colspan="2">中间列标题</th>
<th>右列标题</th>
</tr>
<tr>
<td>左列数据</td>
<td>中间列数据</td>
<td>中间列数据</td>
<td>右列数据</td>
</tr>
</table>
在上述代码中,使用<th>
元素表示表头单元格,使用<td>
元素表示数据单元格。colspan="2"
属性用于将中间列标题跨越两列。
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
</style>
最终的HTML代码如下所示:
<!DOCTYPE html>
<html>
<head>
<title>HTML表格</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<tr>
<th>左列标题</th>
<th colspan="2">中间列标题</th>
<th>右列标题</th>
</tr>
<tr>
<td>左列数据</td>
<td>中间列数据</td>
<td>中间列数据</td>
<td>右列数据</td>
</tr>
</table>
</body>
</html>
这样就创建了一个具有中间列标题的HTML表格,它有两行,左右各有一列。
领取专属 10元无门槛券
手把手带您无忧上云