如何设置 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.