CSS を使用してテーブルを中央に配置するにはどうすればよいですか?

margin-left プロパティと margin-right プロパティを使用する

これは、HTML および CSS でテーブル要素を中央揃えにする一般的な方法です。 CSS の margin-left プロパティと margin-right プロパティは、それぞれ要素の左マージンと右マージンを設定するために使用されます。マージンは要素の境界線の外側にスペースを作成し、要素をページ上の他の要素から効果的に遠ざけます。

属性の値は、長さの値 (px、em、cm など)、パーセンテージ、または事前定義された値 auto、inherit、またはInitial を使用して設定できます。

Example

Example

イラスト

• コードは、Name、id、Salary の 3 つの列を持つテーブルを作成する HTML ファイルです。テーブルの「テーブル コンテナ」クラスの幅はビューポートの幅の 70% で、ページの中央に配置されます。ヘッダー セル (名前、ID、給与) とテーブル セルには、RGB(96、100、218) 色の 2 ピクセルの実線の境界線があります。

• テーブルには、名前「Suranjan」、ID 12475142、給与 32000 を含むデータ行があります。

グリッド属性を使用する

もう 1 つの一般的な方法は、グリッド属性を使用してテーブルを中央揃えにすることです。グリッドは、行と列の作成に使用できる HTML と CSS の 2 次元要素です。最初にテーブルをグリッド要素として宣言すると、グリッドの place-items プロパティを使用してテーブルを中央揃えにすることができます。 place-items プロパティは実際にグリッドを水平方向と垂直方向に中央に揃えます。

Example

Example

イラスト

• これは、名前、国、職業という 3 つの列を持つテーブルを作成する基本的な HTML コードです。このテーブルには、名前 (トム ホランド)、国 (米国)、および職業 (ソフトウェア開発者) の値を含むデータ行があります。

• HTML の head セクションで定義された CSS スタイルは、表の境界線、表のセル (th、td)、および表自体 (class="table-container") を 2 ピクセルの単色 RGB カラー (96, 100、218）。テーブルの幅は 70vw (ビューポート幅の 70%) に設定されます。本文セクションはグリッドとして表示され、項目がページの中央に配置されるように設定されています。

フレックスボックスのプロパティの使用

もう 1 つの非常に一般的な方法は、CSS フレックスボックス プロパティを使用してテーブルを中央揃えにすることです。 Flexbox は、HTML および CSS の応答性の高い要素です。 Flexbox には、テーブルを中央に配置するために使用できる、alien-items、justify-content などの特定のプロパティがあります。プログラマは、多くの場合、この方法がテーブルを中央に配置する最も便利な方法であると考えています。

Example

Example

イラスト

• このコードは、Name (名前)、id (番号)、Salary (給与) の 3 つの列を持つテーブルを作成する HTML ファイルです。テーブルには、ビューポート幅の 70% の幅を持つ「table-container」という名前のクラスがあります。ヘッダー セル (名前、ID、給与) と表のセルにはすべて、RGB(96、100、218) の色で 2 ピクセルの実線の境界線があります。テーブルには、名前「Suranjan」、番号 12475142、給与 32,000 を含むデータが 1 行あります。

• HTML ドキュメントの本体には CSS スタイル表示: flex があり、本体はフレキシブル コンテナーになります。 CSS スタイルの flex-direction: row は、フレックス コンテナーの項目の方向を行に設定します。 CSS スタイルの align-items と justify-content は、項目をそれぞれ垂直方向と水平方向に中央揃えにします。

この記事では、CSS を使用してテーブルを中央に配置する方法を学びました。このチュートリアルでは、マージン プロパティ、グリッド、フレックスボックスなどの使用について説明しました。ここで説明したすべての方法のうち、Flexbox を使用する必要があります。これは、フレックスボックスの方が便利で、UI 要素に応答しやすいためです。

以上がCSS を使用してテーブルを中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。