HTML で表を中央揃えにする

この記事では、HTML で表を中央揃えにする方法を紹介します。

margin プロパティを auto に設定して、HTML で表を中央揃えにします

HTML テーブルを中央に配置する最も簡単な方法は、margin プロパティを使用して auto に設定することです。 この方法は、すべてのブロック要素を中央に配置するために機能します。

margin に auto 値を使用すると、使用可能な水平スペースが均等に使用されます。 したがって、テーブルは一定の幅を持ち、左右の余白は均等に調整されます。

margin プロパティを 0px auto に設定することもできます。 ここで、0px の値は上下のマージン用で、auto の値は左右のマージン用です。

margin プロパティは、隣接する要素間のスペースを設定します。 このプロパティは、margin-top、margin-right、margin-bottom、margin-left の 4つのプロパティを組み合わせたものです。

margin プロパティの単一の値は、これら 4つのプロパティの値に似ています。

たとえば、いくつかの行と列を含む HTML テーブルを作成します。 table タグの style 属性を margin:auto に設定します。

CSS をより具体的に記述するには、プロパティ margin-left および margin-right を auto に記述することもできます。

ここでは、インライン CSS を使用して、HTML で表の中央揃えを実現しました。

コード例:

<table border=1 style="margin:auto">
  <tr>
    <th>Country</th>
    <th>Continent</th>
    <th>Capital</th>
  </tr>
  <tr>
    <td>Nepal</td>
    <td>Asia</td>
    <td>Kathmandu</td>
  </tr>
  <tr>
    <td>Spain</td>
    <td>Europe</td>
    <td>Madrid</td>
  </tr>
</table>

margin プロパティをパーセンテージ値に設定して、HTML で表を中央揃えにします

margin プロパティのパーセンテージ値を使用して、HTML で表を中央揃えにすることもできます。 このアプローチの背後にある概念は、画面の水平ビューポートを 3つのセクションに分割することです。

それらは、左余白、右余白、および表の幅です。 テーブルの特定の幅をパーセンテージで設定できます。

次に、ビューポートの残りの長さを均等に分割し、左右の余白をそれぞれ設定します。

たとえば、table タグの style 属性に次のプロパティを設定します。 width プロパティを 50% に、margin-left および margin-right プロパティを 25% に設定します。

その結果、テーブルは画面の水平方向のビューポートの幅の半分になります。 残りのスペースは、左右の余白に均等に調整されます。

したがって、テーブルを HTML の中央に配置できます。

コード例:

<table border=1 style="width:50%;
margin-left: 25%; margin-right: 25 %;">
  <tr>
    <th>Country</th>
    <th>Continent</th>
    <th>Capital</th>
  </tr>
  <tr>
    <td>Nepal</td>
    <td>Asia</td>
    <td>Kathmandu</td>
  </tr>
  <tr>
    <td>Spain</td>
    <td>Europe</td>
    <td>Madrid</td>
  </tr>
</table>