HTML cellpadding 屬性

admin發表於2020-03-11
HTMLpadding

此屬性用於設定 table 中單元格的內邊距，以畫素為單位。

所謂內邊距就是單元格中的內容與單元格邊框內側之間的距離。

理解此屬性的功能，可以從其名稱入手。

cellpadding由如下兩個單詞合成：

（1）.cell：翻譯漢語具有小房間和細胞的意思。

（2）.padding：翻譯成漢語具有內邊距的意思。

單元格在表格中的表現確實類似於小房間或者細胞，那麼就很容易理解此屬性的功能。

比較容易與 cellspacing 屬性混淆，具體用法參閱HTML cellspacing 屬性一章節。

特別說明：HTML5不支援此屬性，推薦使用CSS padding 屬性設定。

語法結構：

[HTML] 純文字檢視 複製程式碼
<table cellpadding="num">

下面通過程式碼例項結合圖文對其功能進行分析：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
table{
  margin:10px;
}  
</style>
<body>
<table border="1" cellspacing="5">
  <tr>
    <th>教程</th>
    <th>教程</th>
  </tr>
  <tr>
    <td>教程</td>
    <td>教程</td>
  </tr>
</table>
<table border="1" cellspacing="5" cellpadding="5">
  <tr>
    <th>教程</th>
    <th>教程</th>
  </tr>
  <tr>
    <td>教程</td>
    <td>教程</td>
  </tr>
</table>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/202003/11/195010k68uzv2vz07tocjc.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.第一個表格未設定cellpadding屬性，所以單元格內邊距為0。

（2）.第二個表格設定cellpadding屬性值為5，所以單元格中的內容距離邊框內側尺寸為5px。

（3）.此屬性對於<th>元素同樣有效。

相關文章