如何在HTML中设置单元格内边距？
我们使用内联样式属性，在HTML中设置单元格填充。单元格填充是表格的单元格边框与单元格内内容之间的空间。样式属性用于HTML的<table>标签内，使用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>
相关文章