复制
收藏
提问
简洁
1天前
应用<table>标签（即<caption>标签、<tr>标签、<th>标签和<td>标签， 以及相应的属性）编写，实现效果图如下，具体要求为：（1）表格在页面中间显示，宽度为400px，高度为300px，表格边框宽度为 6px，表格边框颜色设为#FF0066，单元格与单元格之间的距离为15px，单元格 内文字与边框的距离为6px。 （2）表格标题用<caption>标签，结合三级标题使用。 （3）表格第一行合并，内容居中。 （4）表格第二行背景色为#66CCFF，内容居中。 （5）表格从第三行开始，第一列合并，所有内容居中显示。
全网
文档
学术
百科
知识库
回答简洁模式
深入研究一些
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表格样式示例</title>
<style>
table {
width: 400px;
height: 300px;
margin: auto;
border-collapse: separate;
border: 6px solid #FF0066;
border-spacing: 15px;
}
th, td {
padding: 6px;
text-align: center;
}
caption {
font-size: 18px;
font-weight: bold;
}
tr:nth-child(1) {
background-color: transparent;
}
tr:nth-child(2) {
background-color: #66CCFF;
}
tr:nth-child(n+3) td:first-child {
vertical-align: top;
}
</style>
</head>
<body>
<table>
<caption>示例表格</caption>
<tr>
<th colspan="3">表格标题</th>
</tr>
<tr>
<th>列标题一</th>
<th>列标题二</th>
<th>列标题三</th>
</tr>
<tr>
<td rowspan="2">行三列一</td>
<td>行三列二</td>
<td>行三列三</td>
</tr>
<tr>
<td>行四列二</td>
<td>行四列三</td>
</tr>
</table>
</body>
</html>
你觉得结果怎么样？