如何在HTML中设置单元格内边距?

ID:10013 / 打印

如何在html中设置单元格内边距?

我们使用内联样式属性,在HTML中设置单元格填充。单元格填充是表格的单元格边框与单元格内内容之间的空间。样式属性用于HTML的

标签内,使用CSS属性padding并指定像素值。

Syntax

Following is the syntax to set cell padding in HTML.

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

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> 

Example

的中文翻译为:

示例

以下是另一个设置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> 

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> 
上一篇: 如何在一个div中垂直对齐元素?
下一篇: HTML DOM Input Reset disabled 属性 HTML DOM Input Reset disabled 属性用于设置或获取重置按钮是否被禁用

作者:admin @ 24资源网   2024-09-27

本站所有软件、源码、文章均有网友提供,如有侵权联系308410122@qq.com

与本文相关文章

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。