如何为表格设置水平表头？

百变鹏仔 3个月前 (09-22) #HTML

文章标签表头

tables in html can have horizontal header and vertical header. for the horizontal header, we need to set all

inside a single tag.
语法
以下是设置表格水平标题的语法：
<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.

文章推荐

如何为表格设置水平表头？

语法

Example 1

示例 1

Example 2

Example 3

html代码是什么

值得一学的6个前端HTML+CSS特效

html怎么设置字体

怎么隐藏html标签

html怎么设置编码utf8