HTML テーブルの行に影響を与えずに列間にスペースを追加する方法
padding left および right プロパティは、テーブル全体のレイアウトに影響を与えることなく、列間にスペースを追加するために使用されます。このプロパティを使用すると、開発者は追加の間隔を追加できます。この間隔は行には影響しません。
以下の手順に従ってください。
ステップ 1: テーブル構造を作成する
HTML ファイルに 4 行 3 列を含むテーブルがあると仮定します。
< テーブル >
< tr >
< 番目 > 名前 < / 番目 >
< 番目 > クラス < / 番目 >
< 番目 > 街 < / 番目 >
< / tr >
< tr >
< た > ジョン < / た >
< た > BS 化学 < / た >
< た > ロンドン < / た >
< / tr >
< tr >
< た > アレクサンダー < / た >
< た > BS 数学 < / た >
< た > 東京 < / た >
< / tr >
< tr >
< た > ジョセフ < / た >
< た > BSCS < / た >
< た > ニューヨーク < / た >
< / tr >
< / テーブル >
上記のコードを実行すると、Web ページは次のようになります。
出力により、テーブル構造が作成されたことが確認されます。
ステップ 2: 水平方向のパディングを適用する
左側から列間にスペースを追加するには、「」を使用します。 パディング左 ” CSS プロパティ。このプロパティを適用すると、データは右揃えのようになります。その理由は、パディングが左側からのみ適用されるためです。
次に、インラインメソッドを使用して適用できるスタイルの CSS 部分で「td」要素を選択します。次に、「」のパディングを追加します。 50ピクセル 」を使用して、視覚化を向上させるために間隔を追加し、境界線プロパティを追加します。
た {パディング左: 50px;
国境 : 2px の赤一色。
}
コードを実行すると、Web ページは次のようになります。
出力には、テーブルの列の間にスペースが追加されたことが表示されます。
ここで、右側からパディングを設定するには、「 右パディング 」の性質を活用しています。同様に、セルデータは「 左揃え ”。コードは次のとおりです。
た {パディング左: 50px;
国境 : 2px の赤一色。
}
上記のコードを実行すると、Web ページは次のようになります。
出力では、右側にパディングを適用することで列間のスペースが増加していることが確認できます。
ステップ 3: 左右のパディングの組み合わせ
上記の手順と同様、どちらの場合もデータは中央揃えではないため、データがプロフェッショナルではなくなります。デザインセンスを崩さずに目立たせるために。以下のように、両方のプロパティを同時に利用できます。
た {パディング右: 60px;
パディング左: 60px;
国境 : 2px の赤一色。
}
上記のコードを実行すると、Web ページは次のようになります。
出力では、列の間にスペースが追加され、データも中央揃えになっていることが確認できます。
結論
テーブルの列間のスペースは、左右のパディングプロパティを使用して追加できます。これらのプロパティは、セルの右方向と左方向に余分なスペースを追加します。両方のプロパティを同時に使用することも、個別に使用することもできます。この記事では、行に影響を与えずにテーブルの列間にスペースを追加する方法を説明しました。