使用table标签设计一个招聘网
时间: 2023-06-14 09:07:19 浏览: 82
以下是一个简单的招聘网站的HTML代码,使用了table标签进行布局:
```html
<!DOCTYPE html>
<html>
<head>
<title>招聘网站</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 0;
}
table {
width: 80%;
margin: 20px auto;
background-color: #fff;
border-collapse: collapse;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
th, td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
h1 {
text-align: center;
margin-top: 50px;
}
</style>
</head>
<body>
<h1>招聘信息</h1>
<table>
<thead>
<tr>
<th>职位</th>
<th>公司</th>
<th>薪资</th>
<th>工作地点</th>
<th>发布时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>前端工程师</td>
<td>ABC公司</td>
<td>10k-15k</td>
<td>北京</td>
<td>2021-09-01</td>
</tr>
<tr>
<td>Java开发工程师</td>
<td>XYZ公司</td>
<td>15k-20k</td>
<td>上海</td>
<td>2021-09-03</td>
</tr>
<tr>
<td>产品经理</td>
<td>123公司</td>
<td>20k-25k</td>
<td>广州</td>
<td>2021-09-05</td>
</tr>
</tbody>
</table>
</body>
</html>
```
这个网站使用了一个简单的表格来展示招聘信息。表格有一个表头和表体,表头包含职位、公司、薪资、工作地点和发布时间这些列的标题,表体包含具体的招聘信息。使用CSS样式对表格进行了一些美化,包括设置了表格宽度、背景颜色、边框、阴影和单元格的填充和对齐方式。在页面顶部添加了一个标题。
阅读全文