HTMLテーブルの中心を設定する方法

HTML は、Web ページの作成に広く使用されているハイパーテキスト マークアップ言語です。 Web デザインでは、テーブルはデータを表示するのに非常に便利な要素です。テーブルをデザインするとき、一般的にテーブルを中央に配置する必要があります。 HTML で表を中央に配置する方法は次のとおりです。

1. CSS スタイルシートを使用する

HTML でテーブルを作成した後、CSS スタイルシートを使用してテーブルを簡単に中央に配置できます。スタイルシートでは、「margin: auto」属性を使用して表を中央に配置できます。

たとえば、次のコードは表の幅を 80% に設定し、ページの中央に配置します。

nbsp;html>


    <style>
        table {
            width: 80%;
            margin: auto;
        }
    </style>


    

                                                                                                                                                                               

姓名	学号	成绩
小明	001	90
小红	002	95

上記のコードでは、テーブルを作成し、その幅を 80% に設定します。次に、「margin: auto」属性を使用してテーブルを中央に配置します。

2. HTML 属性を使用する

CSS スタイル シートを使用することに加えて、HTML テーブル要素に属性を直接設定してテーブルを中央揃えにすることもできます。以下は、HTML でテーブルを中央に配置する方法のサンプル コードです。

nbsp;html>


    <title>HTML表格居中</title>


    <center>
        <table>
            <tr>
                <th>姓名</th>
                <th>学号</th>
                <th>成绩</th>
            </tr>
            <tr>
                <td>小明</td>
                <td>001</td>
                <td>90</td>
            </tr>
            <tr>
                <td>小红</td>
                <td>002</td>
                <td>95</td>
            </tr>
        </table>
    </center>

上記のコードでは、表の外側で HTML

タグを使用して表を中央に配置します。この方法はシンプルで直感的で、小規模な Web デザインに適しています。

概要

HTML のテーブルは一般的な Web デザイン要素であり、中央揃えのテーブルは一般的なデザイン要件です。表を中央に配置するには、CSS スタイルシートまたは HTML プロパティを使用できます。 CSS スタイルシートを使用するには、いくつかの基本的なスキルが必要ですが、スケーラビリティも向上するため、長年にわたるベスト プラクティスとなっています。 HTML 属性を使用してテーブルを中央に配置するのは簡単ですが、複雑な Web デザインでは問題が発生する可能性があります。したがって、Web ページをデザインするときは、どの方法を使用するかを考慮する必要があります。

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