table要素に cellspacing="" を追加すると、セル同士の間隔を指定することができます。
セルの間隔を変更することで、内罫線を太く見せたり、細く見せたりすることができます。
<table cellspacing="3"> 〜 </table>
| 属性 | 値 | 説明 |
|---|---|---|
| cellspacing="" | ピクセル数またはパーセント | 間隔の大きさを指定 |
※この属性を指定しない場合は、一般的なブラウザでは 2 ピクセルの間隔が空きます。
内罫線を表示させるには、table要素にborder属性を指定しておく必要があります。
この指定内容はスタイルシートで代替することができます。指定方法の詳細は「関連ページ」をご覧ください。
使用例
■cellspacingを指定しない場合の例
<table border="1">
<tr>
<td>データセル1</td>
<td>データセル2</td>
<td>データセル3</td>
</tr>
</table>
表示例
| データセル1 | データセル2 | データセル3 |
■cellspacingに0を指定した例
<table border="1" cellspacing="0">
<tr>
<td>データセル1</td>
<td>データセル2</td>
<td>データセル3</td>
</tr>
</table>
表示例
| データセル1 | データセル2 | データセル3 |
■cellspacingに5を指定した例
<table border="1" cellspacing="5">
<tr>
<td>データセル1</td>
<td>データセル2</td>
<td>データセル3</td>
</tr>
</table>
表示例
| データセル1 | データセル2 | データセル3 |
■cellspacingに15を指定した例
<table border="1" cellspacing="15">
<tr>
<td>データセル1</td>
<td>データセル2</td>
<td>データセル3</td>
</tr>
</table>
表示例
| データセル1 | データセル2 | データセル3 |
- サイト内検索
