HTMLで表を中央に配置する方法

HTML では、テーブルを中央に配置する 3 つの方法を使用できます。 margin: auto 属性を使用して、テーブルを水平方向に中央に配置します。 text-align: center 属性を使用して、親要素内でテーブルを垂直方向の中央に配置します。 align 属性を使用して、親要素を基準としたテーブルの位置を指定します (非推奨)。

#HTML テーブルを中央に配置する方法

HTML では、テーブルを中央に配置する方法がいくつかあります。

1. margin: auto;

を使用してテーブルに
• margin: auto; 属性を設定し、テーブルを水平方向に中央揃えにします。

例:

<code class="html"><table style="margin: auto;">
  <tr>
    <th>列 1</th>
    <th>列 2</th>
  </tr>
  <tr>
    <td>数据 1</td>
    <td>数据 2</td>
  </tr>
</table></code>

2. text-align: center;

を使用して、 table 親要素は、親要素内でテーブルを垂直方向の中央に配置するように
• text-align: center; 属性を設定します。

例:

<code class="html"><div style="text-align: center;">
  <table border="1">
    <tr>
      <th>列 1</th>
      <th>列 2</th>
    </tr>
    <tr>
      <td>数据 1</td>
      <td>数据 2</td>
    </tr>
  </table>
</div></code>

3. align 属性

を使用してテーブルを設定します
• align 属性を使用すると、親要素を基準としたテーブルの位置を指定できます。

例:

<code class="html"><table align="center">
  <tr>
    <th>列 1</th>
    <th>列 2</th>
  </tr>
  <tr>
    <td>数据 1</td>
    <td>数据 2</td>
  </tr>
</table></code>

注:

• align 属性HTML5 では非推奨となっているため、margin または text-align 属性を優先して使用してください。
テーブルに幅が設定されている場合、センタリング効果に影響が出る可能性があります。
• 上記の方法は、テーブルを水平方向または垂直方向の中央に配置するために使用できます。

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