HTMLでテーブルの間隔を設定する方法-htmlチュートリアル-php.cn

HTMLでテーブルの間隔を設定する方法

青灯夜游

リリース： 2021-05-20 11:50:01

オリジナル

29006 人が閲覧しました

HTML では、border-spacing 属性を使用して表の間隔を設定できます。この属性は、隣接するセルの境界線間の距離を設定します (「境界線分離」モードの場合のみ)。構文形式は「border-間隔:水平方向の間隔垂直方向の間隔;"。

HTMLでテーブルの間隔を設定する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

HTML では、border-spacing 属性を使用して表の間隔を設定できます。

border-spacing プロパティは、テーブルの境界線が「分離」状態にある場合に、隣接するセルの境界線間の距離を設定するために使用されます。

このプロパティは、テーブルの境界線が「分離」されている場合に、行とセルの境界線の水平方向と垂直方向の間隔を設定します。

注: このプロパティは、テーブルの境界線が独立している場合 (つまり、border-collapse プロパティが分離するように設定されている場合) にのみ機能します。

属性値:

##値説明


length length	隣接するセルの境界線間の距離を指定します。 px、cm などの単位を使用します。負の値は許可されません。 length パラメータを定義すると、水平方向と垂直方向の間隔が定義されます。 2 つの length パラメータが定義されている場合、最初のパラメータは水平方向の間隔を設定し、2 番目のパラメータは垂直方向の間隔を設定します。

length length

隣接するセルの境界線間の距離を指定します。 px、cm などの単位を使用します。負の値は許可されません。

length パラメータを定義すると、水平方向と垂直方向の間隔が定義されます。
2 つの
length パラメータが定義されている場合、最初のパラメータは水平方向の間隔を設定し、2 番目のパラメータは垂直方向の間隔を設定します。

#例:

<!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>

ログイン後にコピー

レンダリング:

HTMLでテーブルの間隔を設定する方法