如何为表格设置水平表头？
- WBOY转载
- 2023-09-01 18:05:021120浏览
Tables in HTML can have horizontal header and vertical header. For the horizontal header, we need to set all
语法
以下是设置表格水平标题的语法：
<tr> <th> horizontal header1… </th> <th> horizontal header2… </th> </tr>
Example 1
的中文翻译为：示例 1
Now let us see an example program to set horizontal header for a table.
<!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;
padding: 20px;
}
</style>
</head>
<body>
<h2>Tables in HTML</h2>
<table style="width: 100%">
<tr>
<th >First Name </th>
<th>Job role</th>
</tr>
<tr>
<td ></td>
<td ></td>
</tr>
<tr>
<td ></td>
<td ></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
On executing the above program, it will display a table with horizontal headers First Name and Job role.
Example 2
现在，在这个第二个示例中，我们尝试创建另一个具有水平标题“Name”、“Age”和“Technology”的3行示例 −
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<h1>Employee Details</h1>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Technology</th>
</tr>
<tr>
<td>Amit</td>
<td>27</td>
<td>Database</td>
</tr>
<tr>
<td>Sachin</td>
<td>34</td>
<td>Marketing</td>
</tr>
</table>
</body>
</html>
Following is the output for the above example program.
Example 3
我们还可以为表格设置垂直标题。下面是一个示例，用于创建表格的垂直标题。
<!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;
padding: 20px;
}
</style>
</head>
<body>
<table style="width: 100%">
<tr>
<th>First Name </th>
<td></td>
<td></td>
</tr>
<tr>
<th>Last Name</th>
<td ></td>
<td></td>
</tr>
<tr>
<th>Job role</th>
<td ></td>
<td></td>
</tr>
</table>
</body>
</html>
Following is the output for the above example program.
以上是如何为表格设置水平表头？的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文转载于：tutorialspoint.com。如有侵权，请联系admin@php.cn删除