HTML表格是网页中常见的数据展示方式，它可以用来组织和呈现大量的信息，在HTML中，我们使用<table>标签来创建表格，<tr>标签表示表格的行，<td>标签表示表格的单元格，下面是一个简单的HTML表格制作教程。
（图片来源网络，侵删）
1、创建一个HTML文件
你需要创建一个HTML文件，可以使用任何文本编辑器，如Notepad、Sublime Text或者Visual Studio Code等，将以下代码复制到一个名为index.html的文件中：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>表格示例</title>
</head>
<body>
</body>
</html>
2、添加表格结构
接下来，我们在<body>标签内添加一个表格结构，将以下代码复制到<body>标签内：
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>女</td>
</tr>
</table>
这里，我们创建了一个包含3列（姓名、年龄、性别）和2行的表格。border="1"属性表示表格具有边框。<th>标签表示表头单元格，默认会加粗显示。<tr>标签表示表格的行，<td>标签表示表格的单元格。
3、添加样式
为了让表格更加美观，我们可以为其添加一些样式，在<head>标签内添加<style>标签，然后在其中编写CSS样式，将以下代码复制到<style>标签内：
table {
width: 100%;
bordercollapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
textalign: left;
}
th {
backgroundcolor: #f2f2f2;
}
这段CSS代码为表格设置了宽度、边框样式、内边距和文本对齐方式，为表头单元格设置了背景颜色，你可以根据需要修改这些样式。
4、保存并查看效果
保存index.html文件，然后用浏览器打开它，你应该可以看到一个带有边框和样式的表格，如果需要进一步调整样式，可以在<style>标签内修改CSS代码，你还可以根据需要添加更多的行和列，只需按照上述方法在<table>标签内添加相应的<tr>和<td>或<th>标签即可。
本教程介绍了如何使用HTML和CSS制作一个简单的表格，通过学习这些基础知识，你可以轻松地创建和定制各种复杂的表格，在实际开发中，你可能还需要学习更多关于HTML和CSS的知识，以便更好地控制表格的布局和样式，希望这个教程能帮助你入门HTML表格制作，祝你学习顺利！
本文来自投稿，不代表重蔚自留地立场，如若转载，请注明出处https://www.cwhello.com/440502.html
如有侵犯您的合法权益请发邮件951076433@qq.com联系删除
