帮我写个有菜单栏和表格的页面
时间: 2024-04-15 13:28:14 浏览: 16
以下是一个带有菜单栏和表格的简单网页的HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Menu and Table Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
}
header {
background-color: #333;
padding: 10px;
}
header ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
header li {
float: left;
}
header li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
header li a:hover {
background-color: #111;
}
table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
}
table th,
table td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
table th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<header>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john@example.com</td>
<td>1234567890</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>jane@example.com</td>
<td>9876543210</td>
</tr>
<tr>
<td>Mike Johnson</td>
<td>mike@example.com</td>
<td>5555555555</td>
</tr>
</tbody>
</table>
</body>
</html>
```
该代码包含一个带有三个链接的菜单栏(Home、About和Contact),以及一个包含姓名、电子邮件和电话号码的简单表格。你可以将代码保存为`.html`文件并在浏览器中打开,就可以看到生成的页面了。