利用html+css画一个房间信息的表格表格分为两列左边分别为楼栋、房间号、楼层、可住人数、已住人数右边暂时为空预留位置。左列背景色设置为浅灰色,字体加粗
时间: 2023-06-16 08:02:56 浏览: 43
可以参考以下代码,实现一个简单的房间信息表格:
```html
<!DOCTYPE html>
<html>
<head>
<title>房间信息表格</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
.left-column {
background-color: #f2f2f2;
font-weight: bold;
}
</style>
</head>
<body>
<table>
<tr>
<th class="left-column">楼栋</th>
<td></td>
</tr>
<tr>
<th class="left-column">房间号</th>
<td></td>
</tr>
<tr>
<th class="left-column">楼层</th>
<td></td>
</tr>
<tr>
<th class="left-column">可住人数</th>
<td></td>
</tr>
<tr>
<th class="left-column">已住人数</th>
<td></td>
</tr>
</table>
</body>
</html>
```
这里使用了 `table` 标签来创建表格,`th` 标签用于定义表头单元格,`td` 标签用于定义数据单元格。通过设置 `background-color` 属性可以指定单元格的背景色,使用 `font-weight` 属性可以设置字体加粗。左列使用了一个自定义的 CSS 类名 `left-column` 来设置背景色和字体加粗。