How to set cell padding in HTML?-HTML Tutorial-php.cn

How to set cell padding in HTML?

王林

Release： 2023-08-20 17:17:25

forward

3730 people have browsed it

How to set cell padding in HTML?

We use inline style attributes to set cell padding in HTML. Cell padding is the space between a table's cell borders and the content within the cell. The style attribute is used within the HTML

tag, using the CSS attribute padding and specifying the pixel value.

Syntax

Following is the syntax to set cell padding in HTML.

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

Copy after login

The Chinese translation of

Example

is:

Example

Following is an example program to set cell padding in 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>

Copy after login

The Chinese translation of

Example

is:

Example

The following is another example program for setting cell padding in 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>

Copy after login

The Chinese translation of

Example

is:

Example

Following is one more example program to set cell padding in 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>

Copy after login

The above is the detailed content of How to set cell padding in HTML?. For more information, please follow other related articles on the PHP Chinese website!