ホームページ > 記事 > ウェブフロントエンド > HTMLでテーブルの間隔を設定する方法
HTMLでテーブルの間隔を設定する方法
- 青灯夜游オリジナル
- 2021-05-20 11:50:0128964ブラウズ
HTML では、border-spacing 属性を使用して表の間隔を設定できます。この属性は、隣接するセルの境界線間の距離を設定します (「境界線分離」モードの場合のみ)。構文形式は「border-間隔:水平方向の間隔垂直方向の間隔;"。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
HTML では、border-spacing 属性を使用して表の間隔を設定できます。
border-spacing プロパティは、テーブルの境界線が「分離」状態にある場合に、隣接するセルの境界線間の距離を設定するために使用されます。
このプロパティは、テーブルの境界線が「分離」されている場合に、行とセルの境界線の水平方向と垂直方向の間隔を設定します。
注: このプロパティは、テーブルの境界線が独立している場合 (つまり、border-collapse プロパティが分離するように設定されている場合) にのみ機能します。
属性値:
| 説明 | |
|---|---|
| length length | 隣接するセルの境界線間の距離を指定します。 px、cm などの単位を使用します。負の値は許可されません。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
table,
td,
th {
border: 1px solid black;
}
td,th{
padding: 5px 20px;
}
#table2 {
border-collapse: separate;
border-spacing: 15px;
}
#table3 {
border-collapse: separate;
border-spacing: 15px 30px;
}
</style>
</head>
<body>
<h2>border-spacing: 15px:</h2>
<p>使用“border collapse:separate”时，border spacing属性可用于设置单元格之间的间距：</p>
<table id="table2">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>Peter</td>
<td>20</td>
</tr>
<tr>
<td>Lois</td>
<td>20</td>
</tr>
</table>
</body>
</html>レンダリング:
- border-spacing 属性は、HTML タグの属性 cellspacing と同じ効果があります。
- このプロパティは、分離境界モデルのセル境界間の距離を指定します。指定された 2 つの長さの値のうち、1 つ目は水平ギャップ、2 つ目は垂直ギャップです。このプロパティは、border-collapse が分離に設定されていない限り無視されます。このプロパティはテーブルにのみ適用されますが、テーブル内のすべての要素に継承されます。
- 推奨チュートリアル:
以上がHTMLでテーブルの間隔を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTMLにリンクを設定する方法次の記事：HTMLにリンクを設定する方法