如何設定 HTML 中的單元格內填充？

在 HTML 中設定單元格內填充，我們使用 內聯樣式屬性。單元格內填充是指表格單元格邊框和表格中單元格內內容之間的空白。 style 屬性用在 HTML <table> 標籤 內，其中指定的 CSS 屬性稱為 padding（內邊距），並以畫素為單位指定一個值。

語法

以下是設定 HTML 中單元格內填充的語法。

<th style="padding: 40px">table header </th>

示例

以下是一個設定 HTML 中單元格內填充的示例程式。

<!DOCTYPE html>
<html>
<head>
   <style>
      table, th, td {
         border: 1px solid black;
      }
   </style>
</head>
<body>
   <h1>Programming Language</h1>
   <table>
      <tr>
         <th style="padding:10px">Language</th>
      </tr>
      <tr>
         <td style="padding:10px">Ruby</td>
      </tr>
   </table>
</body>
</html>

示例

以下是設定 HTML 中單元格內填充的另一個示例程式。

<!DOCTYPE html>
<html>
   <style>
      table,tr,th,td {
         border:1px solid black;
      }
   </style>
<body>
   <h2>Tables in HTML</h2>
   <table style="width: 100%">
      <tr>
         <th style="padding: 40px">Name </th>
         <th>Job role</th>
      </tr>
      <tr>
         <td>Tharun</td>
         <td style="padding: 10px">Content writer</td>
      </tr>
      <tr>
         <td>Akshaj</td>
         <td style="padding: 10px">Content writer</td>
      </tr>
   </table>
</body>
</html>

示例

以下是設定 HTML 中單元格內填充的又一個示例程式。

<!DOCTYPE html>
<html>
<head>
   <style>
      table, th, td {
         border: 1px solid black;
         border-collapse: collapse;
      }
      th, td {
         padding-top: 10px;
         padding-bottom: 20px;
         padding-left: 30px;
         padding-right: 40px;
      }
   </style>
</head>
<body>
   <table style="width:60%">
      <tr>
         <th>Firstname</th>
         <th>Lastname</th>
         <th>salary</th>
      </tr>
      <tr>
         <td>John</td>
         <td>Smith</td>
         <td>50,000</td>
      </tr>
      <tr>
         <td>Eva</td>
         <td>Jackson</td>
         <td>94,000</td>
      </tr>
      <tr>
         <td>Mike</td>
         <td>Doe</td>
         <td>80,000</td>
      </tr>
   </table>
</body>
</html>

更新於：2023-09-02

48K+ 瀏覽量

開啟你的 職業生涯

完成課程，獲得認證

立即開始
廣告
© . All rights reserved.