<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 表格示例</title>
<style>
/* 添加一些基本的样式 */
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>学生成绩单</h1>
<table>
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>数学</td>
<td>90</td>
</tr>
<tr>
<td>小红</td>
<td>英语</td>
<td>85</td>
</tr>
<tr>
<td>小李</td>
<td>历史</td>
<td>78</td>
</tr>
</tbody>
</table>
</body>
</html>
在上述示例中：
- 使用 <table> 元素定义表格。
- <thead> 包含表头行，其中使用 <th> 元素定义表头单元格。
- <tbody> 包含表格的主体部分，其中使用 <tr> 元素定义数据行，<td> 元素定义数据单元格。
CSS样式用于提供基本的表格样式，使表格更具可读性。你可以根据需要自定义样式。
此外，可以使用 <caption> 元素添加表格标题，以提供对表格内容的概述：
<caption>学生成绩单</caption>
表格是HTML中用于展示和组织数据的强大工具，通过使用表格元素，可以创建各种形式的数据呈现和布局。
转载请注明出处：http://www.zyzy.cn/article/detail/12478/HTML5