HTMLでテーブルを中央揃えにする方法

HTML では、特にデータの表示やレイアウトのシナリオにおいて、テーブルは最も一般的な要素の 1 つです。スタイルが追加されていない場合、表はデフォルトで左揃えで植字されます。この場合、スタイルを使用して表を中央揃えにする必要があります。

以下は、表をページ上で水平方向および垂直方向の中央に配置するのに役立つ 3 つの方法です。

方法 1: CSS を使用して表を中央に配置する

これは最も一般的な方法です。推奨される方法の 1 つは、CSS text-align プロパティを使用して表のコンテンツを中央に配置することです。

コードは次のとおりです。

<style>
  table {
    margin: 0 auto;
    text-align: center;
  }
</style>

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>18</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>小红</td>
    <td>17</td>
    <td>上海</td>
  </tr>
</table>

CSS の text-align プロパティを使用して、表のテキストの内容が中央に配置されるように設定します。このうち、margin: 0 auto はテーブルを水平方向に中央揃えに設定します。

方法 2: HTML 属性を使用する

CSS を使用したくない場合は、HTML の属性を使用してテーブルの水平方向の中央揃えを実現することもできます。コードは次のとおりです。

<table align="center">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>18</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>小红</td>
    <td>17</td>
    <td>上海</td>
  </tr>
</table>

table タグに align="center" 属性を追加して、テーブルを中央に配置します。

方法 3: Flexbox を使用する

CSS で Flexbox は、水平および垂直の中央揃えを簡単に実現できる非常に便利なレイアウト方法です。

コードは次のとおりです:

<style>
  .wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  .wrapper table{
    width: 200px;
  }
</style>

<div class="wrapper">
  <table>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
    <tr>
      <td>小明</td>
      <td>18</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>17</td>
      <td>上海</td>
    </tr>
  </table>
</div>

div 要素で display: flex;、justify-content: center;、および align-items: center; を設定してテーブルを中央揃えにします。ここで高さは次のとおりです。 100vh ; コンテナ要素がビューポートの高さ全体を占めるようにします。

上記は、テーブルの水平方向の中央揃えを実現する 3 つの方法です。ただし、属性を使用して HTML にスタイルを設定することは、CSS を使用する場合ほど維持および管理が簡単ではないことに注意することが重要です。実際の開発では、可読性と保守性を向上させるために、可能な限り CSS を使用してテーブルのスタイルを制御することをお勧めします。

以上がHTMLでテーブルを中央揃えにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。