html css 表格案例
当在HTML和CSS中创建表格时,可以使用<table>, <tr>, <td>, <th>等标签。以下是一个简单的HTML和CSS表格案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 添加样式以美化表格 */
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2; }
</style>
<title>HTML CSS 表格案例</title> </head>
<body>
<h2>学生信息表</h2>
<!-- 表格 -->
css怎么创建<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>专业</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>张三</td>
<td>20</td>
<td>计算机科学</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>22</td>
<td>电子工程</td>
</tr>
<!-- 添加更多行 -->
</tbody>
</table>
</body>
</html>
在这个案例中,我们使用<table>标签创建表格,<thead>定义表格头部,<tbody>定义表格主体。使用<th>标签定义表头单元格,其余的单元格使用<td>标签。CSS样式用于设置表格的样式,使其更具可读性。
你可以根据需要添加更多的行和列,或者根据项目的具体需求修改样式。这只是一个简单的起点。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论