HTML怎么绘制表格
在HTML中，我们可以使用<table>标签来创建一个表格，一个表格由多个行(<tr>)组成，每个行又包含多个单元格(<td>或<th>)，下面是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<title>HTML表格示例</title>
</head>
<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>
<tr>
<td>王五</td>
<td>28</td>
<td>广州</td>
</tr>
</table>
</body>
</html>
上述代码中，我们首先使用<!DOCTYPE html>声明文档类型，在<html>标签内定义了整个页面的内容，在<head>标签内，我们设置了页面的标题为“HTML表格示例”，在<body>标签内，我们使用<table border="1">创建了一个带有边框的表格，接下来，我们使用<tr>标签定义了表格的行，并使用<th>标签定义了表头单元格，我们使用<td>标签定义了表格的数据单元格。
要调整表格的大小和位置，可以使用CSS样式，要使表格居中显示，可以在<head>标签内添加以下代码：
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
table {
margin: auto;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: f2f2f2;
}
</style>
这段代码将使表格水平居中显示，并设置了边框、内边距、文本对齐方式以及表头背景颜色，你可以根据需要修改这些样式。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/275711.html
微信扫一扫 