html 显示一段8行4列的表格,黑色边框,里面文字居中显示,第1列和第3列是固定文字,第2列和第4列是后台传来的l,表格高60px,宽90px,线条加宽,表格上有文字和图标,不用任何UI库,写出代码
时间: 2024-09-28 18:13:27 浏览: 16
HTML 中创建这样的表格可以手动编写内联样式,这里是一个示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
table {
border-collapse: collapse;
width: 90px;
height: 60px;
border: 2px solid black;
text-align: center;
}
td {
border: 2px solid black;
padding: 5px;
}
.first_col, .third_col {
background-color: lightgray; /* 可选,用于区分固定列 */
font-weight: bold;
}
.second_col, .fourth_col {
background-color: white; /* 可选,用于区分动态数据列 */
}
</style>
</head>
<body>
<table>
<tr>
<td class="first_col">固定文本1</td>
<td class="second_col">后台数据1</td>
<td class="third_col">固定文本3</td>
<td class="fourth_col">后台数据2</td>
</tr>
<!-- 添加更多的行,每行类似 -->
<!-- 示例省略... -->
<tr>
<td class="first_col">固定文本N</td>
<td class="second_col">后台数据N</td>
<td class="third_col">固定文本N+1</td>
<td class="fourth_col">后台数据N+1</td>
</tr>
</table>
</body>
</html>
```
在这个例子中,第一列和第三列设置了`first_col`和`third_col`类,内容固定且加粗,第二列和第四列则通过`second_col`和`fourth_col`类接收后台动态数据。你可以替换`后台数据1`, `后台数据2`, ...等内容。
阅读全文