生成一个table 的css
时间: 2023-07-25 10:46:43 浏览: 52
下面是一个简单的table的CSS样式,你可以根据需要进行修改:
```
table {
border-collapse: collapse;
width: 100%;
}
th {
background-color: #ddd;
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
td {
border: 1px solid #ddd;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
```
这个CSS样式将会使你的table具有边框、灰色的背景色和斑马线效果。你可以在HTML中使用该样式,如下所示:
```
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>23</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>男</td>
</tr>
<tr>
<td>王五</td>
<td>27</td>
<td>女</td>
</tr>
</table>
```
相关问题
用html和css生成一个table页面
好的,以下是一个简单的 HTML 和 CSS 代码示例,可以生成一个表格页面:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Table Page</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
tr:hover {
background-color: #f5f5f5;
}
</style>
</head>
<body>
<h1>Table Page</h1>
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>30</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>28</td>
</tr>
</tbody>
</table>
</body>
</html>
```
上面的代码中,我们使用了 HTML 的 `<table>` 标签来创建表格,其中 `<thead>` 标签用于表头,`<tbody>` 标签用于表格主体。CSS 部分使用了一些基本样式来美化表格,如 `border-collapse` 属性可以让表格的边框合并,`text-align` 属性可以设置表格单元格中的文本对齐方式,`background-color` 属性可以设置单元格或行的背景色等。
您可以将上面的代码复制到文本编辑器中,保存为 `.html` 文件,然后在浏览器中打开就可以看到一个简单的表格页面了。根据您的需求可以自行修改表格的内容和样式。
生成一个相应的css文件
根据上面的 HTML 代码,可以生成如下的 CSS 文件:
```css
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1 {
text-align: center;
}
.login-form {
margin-top: 50px;
}
table {
border: 1px solid black;
border-collapse: collapse;
background-color: white;
width: 400px;
height: 300px;
margin: auto;
}
td {
height: 55px;
}
td[colspan="2"] {
text-align: center;
font-weight: bold;
}
input[type="text"], input[type="password"], input[type="submit"], input[type="button"] {
width: 70%;
height: 40px;
margin-top: 5px;
margin-bottom: 5px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
padding: 10px 15px;
}
input[type="submit"], input[type="button"] {
width: 40%;
margin-left: 30px;
}
#message {
text-align: center;
color: red;
font-size: 15px;
}
```
这份 CSS 文件主要实现了以下功能:
1. 将包含登录表单的 `.container` 元素水平、垂直居中;
2. 将登录表单的标题居中显示;
3. 将整个表单元素的宽度设为 400px,高度为 300px,并让其水平居中;
4. 调整表格元素的样式,包括边框、背景色、宽度和高度;
5. 调整表格中单元格的样式,包括高度、跨列单元格的样式和字体加粗;
6. 调整表单中的输入框、提交按钮和文本提示的样式。