任务一 使用表格制作拍拍公告栏 HTML
时间: 2024-10-16 21:19:18 浏览: 1
创建一个简单的拍拍公告栏HTML表格,可以按照以下步骤操作:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>拍拍公告栏</title>
<style>
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
padding: 10px;
text-align: left;
border: 1px solid #ccc;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
</style>
</head>
<body>
<h1>拍拍公告栏</h1>
<table>
<thead>
<tr>
<th>公告编号</th>
<th>标题</th>
<th>发布时间</th>
<th>内容</th>
</tr>
</thead>
<tbody>
<!-- 这里添加实际的公告信息,每一行代表一条公告 -->
<tr>
<td>001</td>
<td>新品上市通知</td>
<td>2023-05-01</td>
<td>欢迎大家选购我们的新款产品!</td>
</tr>
<tr>
<td>002</td>
<td>优惠活动预告</td>
<td>2023-05-05</td>
<td>本月内所有商品享受8折优惠!</td>
</tr>
</tbody>
</table>
</body>
</html>
```
在这个例子中,我们创建了一个包含公告编号、标题、发布时间和内容的公告表格。你可以通过替换`<tbody>`部分的内容,添加更多公告。每行代表一条公告,列则是表头中定义的数据字段。
阅读全文