如何在 HTML 中建立表格標題？

要在 HTML 中建立表格標題，使用 <th>…</th> 標籤。表格標題標籤被表格行 <tr>…</tr> 包圍。<tr> 標籤被 <table> 標籤包圍。一個表格包含行和列，可以使用一個或多個 <tr>、<th> 和 <td> 元素來設定行和列。使用 style 屬性新增 CSS 屬性，為表格新增邊框。

表格行由 <tr> 標籤定義。要建立表格標題，使用 <th> 標籤。只要記住，一個表格中只能有一個標題。

語法

以下是 HTML 中建立表格標題的語法。

<table>
 <tr>
   <th> Name</th>
   <th>RollNo</th>
 </tr>
</table>

示例

以下是 HTML 中建立標題的示例程式。

<!DOCTYPE html>
<html>
   <style>
      table, th, td {
         border:1px solid black;
      }
   </style>
<body>
   <h2>Tables in HTML</h2>
   <table>
      <tr>
         <th>Name</th>
         <th>RollNo</th>
      </tr>
      <tr>
         <td>Jason</td>
         <td>28</td>
      </tr>
   </table>
</body>
</html>

現在我們嘗試在表格中擴充套件表格標題。

示例

以下是擴充套件表格標題的示例程式。

<!DOCTYPE html>
<html>
   <style>
      table, th, td {
         border:2px solid black;
      }
   </style>
<body>
   <h2>Tables in HTML</h2>
   <table>
      <tr>
         <th>Employee Name</th>
         <th>Employee Id</th>
         <th>Email</th>
         <th>Address</th>
         <th>Mobile Numbeer</th>
         <th>Employee Dept</th>
      </tr>
      <tr>
         <td>Jason</td>
         <td>28</td>
         <td>Jason@gmail.com</td>
         <td>Ecil</td>
         <td>7674897385</td>
         <td>Content Developer</td>
      </tr>
   </table>
</body>
</html>

示例

以下是 HTML 中建立表格的另一個示例程式。

<!DOCTYPE html>
<html>
<head>
   <title>How to create table heading in HTML?</title>
   <style>
      table, th, td {
         border: 0.5px solid green;
      }
   </style>
</head>
<body>
   <h2>How to create table heading in HTML?</h2>
   <p>We can create table heading by using <b>th(table heading)</b> tag</p>
   <table>
      <caption>Employee login time...</caption>
      <th></th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      <th>Saturday</th>
      <th>Sunday</th>
      <tr>
         <th>Nikhil</th>
         <td>9:00 AM</td>
         <td>9:10 AM</td>
         <td>9:05 AM</td>
         <td>10:00 AM</td>
         <td>9:30 AM</td>
         <td>Week off</td>
         <td>Week off</td>
      </tr>
      <tr>
         <th>Prudhvi</th>
         <td>9:10 AM</td>
         <td>9:00 AM</td>
         <td>9:05 AM</td>
         <td>10:20 AM</td>
         <td>9:30 AM</td>
         <td>Week off</td>
         <td>Week off</td>
      </tr>
      <tr>
         <th>Krishna</th>
         <td>Leave</td>
         <td>Leave</td>
         <td>Leave</td>
         <td>Leave</td>
         <td>10:30 AM</td>
         <td>Week off</td>
         <td>Week off</td>
      </tr>
   </table>
 </body>
</html>

更新於：2022-11-18

9K+ 瀏覽

開啟您的 職業生涯

完成課程即可獲得認證

開始
廣告