TableのCellPaddingをスタイルシートで変更する - CSS

概要

HTMLタグではTableのセル内の余白は、tableタグの属性値として cellpadding="(間隔)" を指定します。同様の処理をCSSで表現する場合のコードを紹介します。

書式

Tableのセル内部の余白をCSSで指定する場合は、tdタグのpaddingで指定します。

コード1

<table style="border-collapse:collapse; border-spacing:0px; border:1px solid #FF4040">
<tr>
  <td style="background-color:#80FF80;margin:0px;padding:16px;border:1px solid #4040FF;">ABC</td>
  <td style="background-color:#80FF80;margin:0px;padding:16px;border:1px solid #4040FF;">ABC</td>
  <td style="background-color:#80FF80;margin:0px;padding:16px;border:1px solid #4040FF;">ABC</td>
</tr>
<tr>
  <td style="background-color:#80FF80;margin:0px;padding:16px;border:1px solid #4040FF;">ABC</td>
  <td style="background-color:#80FF80;margin:0px;padding:16px;border:1px solid #4040FF;">ABC</td>
  <td style="background-color:#80FF80;margin:0px;padding:16px;border:1px solid #4040FF;">ABC</td>
</tr>
</table>

表示結果1

ABC	ABC	ABC
ABC	ABC	ABC

コード2

行の高さを広くする場合の例です。行の高さに余白を持たせる場合は、padding-top, padding-bottomに値を設定します。

<table style="border-collapse:collapse; border-spacing:0px; border:1px solid #FF4040">
<tr>
  <td style="background-color:#80FF80;margin:0px;padding-top:8px;padding-bottom:8px;border:1px solid #4040FF;">ABC</td>
  <td style="background-color:#80FF80;margin:0px;padding-top:8px;padding-bottom:8px;border:1px solid #4040FF;">ABC</td>
  <td style="background-color:#80FF80;margin:0px;padding-top:8px;padding-bottom:8px;border:1px solid #4040FF;">ABC</td>
</tr>
<tr>
  <td style="background-color:#80FF80;margin:0px;padding-top:8px;padding-bottom:8px;border:1px solid #4040FF;">ABC</td>
  <td style="background-color:#80FF80;margin:0px;padding-top:8px;padding-bottom:8px;border:1px solid #4040FF;">ABC</td>
  <td style="background-color:#80FF80;margin:0px;padding-top:8px;padding-bottom:8px;border:1px solid #4040FF;">ABC</td>
</tr>
</table>

表示結果2

ABC	ABC	ABC
ABC	ABC	ABC