HTMLテーブルの中心を設定する方法-フロントエンドQ&A-php.cn

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

PHPz

リリース： 2023-04-25 10:55:29

オリジナル

10836 人が閲覧しました

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

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

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

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

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            width: 80%;
            margin: auto;
        }
    </style>
</head>
<body>
    <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>
</body>
</html>

ログイン後にコピー

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

2. HTML 属性を使用する

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

<!DOCTYPE html>
<html>
<head>
    <title>HTML表格居中</title>
</head>
<body>
    <center>
        <table border="1">
            <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>
</body>
</html>

ログイン後にコピー

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

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

概要

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

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