CSS を使用してテーブルを中央に配置するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Example

イラスト

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

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

王林

Sep 13, 2023 am 08:21 AM

如何用 CSS 使表格居中？

タグは、HTML でテーブルと呼ばれる従来のコンポーネントを作成するために使用されます。 Web ページをデザインするときは、デザイン全体の視覚化を改善する方法を知ることが不可欠です。テーブルの中央揃えは重要な要素の 1 つです。このチュートリアルでは、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 は、項目をそれぞれ垂直方向と水平方向に中央揃えにします。

＃＃＃結論は＃＃＃