具有竖向表头和横向表头的不规则动态表格网页
时间: 2024-04-08 15:30:01 浏览: 136
动态的网页
要创建一个具有竖向表头和横向表头的不规则动态表格网页,你可以使用HTML和CSS来实现。以下是一个示例:
```html
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
}
th.vertical {
writing-mode: vertical-lr;
text-align: center;
}
th.horizontal {
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th></th>
<th class="horizontal">Header 1</th>
<th class="horizontal">Header 2</th>
<th class="horizontal">Header 3</th>
</tr>
<tr>
<th class="vertical">Subheader A</th>
<td>Data A1</td>
<td>Data A2</td>
<td>Data A3</td>
</tr>
<tr>
<th class="vertical">Subheader B</th>
<td>Data B1</td>
<td>Data B2</td>
<td>Data B3</td>
</tr>
<tr>
<th class="vertical">Subheader C</th>
<td>Data C1</td>
<td>Data C2</td>
<td>Data C3</td>
</tr>
</table>
</body>
</html>
```
上述代码会生成一个具有竖向表头和横向表头的不规则动态表格网页。为了实现竖向表头,我们使用了`writing-mode: vertical-lr;`来将表头文字垂直显示。你可以根据需要自定义表头和数据。
阅读全文