如何创建带标题的表格？
我们使用63bd76834ec05ac1f4c0ebbeaafb0994标签，在HTML中创建带有标题的表格。标题标签将被插入在f5d188ed2c074f8b944552db028f98a1标签之后。我们可以为一个表格添加一个标题。默认情况下，该标签的对齐方式是居中的。我们可以使用CSS属性align来改变对齐方式。
语法
以下是HTML的标题标签的语法
<caption>Caption of the table...</caption>
Example 1
在下面的示例中，我们使用Employees作为标题，创建了一个包含员工姓名和员工ID的表格。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table,
tr,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<caption>Employees</caption>
<tr>
<th>EmployeeName</th>
<th>EmployeeId</th>
</tr>
<tr>
<td>Yadav</td>
<td>022</td>
</tr>
<tr>
<td>Abdul</td>
<td>025</td>
</tr>
<tr>
<td>Jason</td>
<td>208</td>
</tr>
</table>
</body>
</html>
对齐属性
我们可以使用CSS属性align来改变对齐方式。以下是其语法：
<caption style="text-align:value" >Caption of the table...</caption>
Example 2
的翻译为：
示例2
在下面的示例中，我们将标题对齐到页面的左侧 –
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table,tr,th,td {
border:1px solid black;
}
</style>
</head>
<body>
<table>
<caption style="text-align: left">Employees</caption>
<tr>
<th>EmployeeName</th>
<th>EmployeeId</th>
</tr>
<tr>
<td>Yadav</td>
<td>022</td>
</tr>
<tr>
<td>Abdul</td>
<td>025</td>
</tr>
<tr>
<td>Jason</td>
<td>208</td>
</tr>
</table>
</body>
</html>
Example 3
的中文翻译为：
示例3
让我们看一个创建标题的另一个例子 –
<!DOCTYPE html>
<html>
<head>
<style>
table,
td,
th {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<caption>Authors</caption>
<tr>
<th>JavaFX</th>
<th>Krishna</th>
</tr>
<tr>
<td>Scala</td>
<td>Satish</td>
</tr>
</table>
</body>
</html>
以上就是如何创建带标题的表格？的详细内容，更多请关注双恒网络其它相关文章！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
云资源网
