資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物
數學
英語
經濟
心理學
社會學
時尚
法律如何設定表格的水平表頭？
HTML 中的表格可以設定水平表頭和垂直表頭。對於水平表頭，我們需要將所有 <th> 設定在單個 <tr> 標籤內。
語法
以下語法用於設定表格的水平表頭 −
<tr> <th> horizontal header1… </th> <th> horizontal header2… </th> </tr>
示例 1
現在，我們來看一個設定表格水平表頭的示例程式。
<!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>
執行上述程式後，將顯示一個表格，其水平表頭為 姓名 和 工作角色。
示例 2
現在，在此第二個示例中，我們嘗試建立一個帶有 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>
以下是上述示例程式的輸出。
示例 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>
以下是上述示例程式的輸出。
更新於： 18-10-2022
3K+ 瀏覽
廣告