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

HTML はマークアップ言語として、Web ページの構築に広く使用されています。その中でも表はデータを整理したりレイアウトするための重要な要素です。表をデザインするとき、ページをより美しく読みやすくするために中央揃えが一般的に使用されるスタイルです。この記事では、CSS スタイル シートを使用して HTML テーブルの中央揃え効果を実現する方法を紹介します。

1. HTML テーブルに関する知識

HTML では、table タグはテーブルの定義に使用され、tr タグはテーブルの行の定義に使用され、td タグはセルを定義するために使用されます。 CSS スタイル シートを使用して、テーブル レイアウト、色、境界線などの要素のスタイルを変更できます。

2. 水平方向の中央揃え

1. text-align 属性を使用する

text-align 属性を使用して、テキストを水平方向の中央揃えに配置できます。例:

table{

text-align:center;

}

これにより、テキスト コンテンツがどのセルにあるかに関係なく、テーブル ラベル内のすべてのテキスト コンテンツが中央に配置されます。

2. マージン属性を使用する

CSS マージン属性を使用して、水平方向の中央揃えを実現することもできます。次のスタイルをテーブルの外側の要素に追加できます:

table{

margin: 0 auto;

}

これにより、テーブルの内容に関係なく、テーブルが含まれる要素内で水平方向の中央に配置されます。サイズと場所。この方法は、一度に 1 つのテーブルを中央に配置する場合に機能します。

3. 垂直方向の中央揃え

1. vertical-align 属性を使用します

CSS のvertical-align 属性を使用して垂直方向の中央揃えを実現することもできます。これは、セルまたはテーブル (ヘッダー) のスタイルに設定します。例:

td{

vertical-align: middle;

}

これにより、コンテンツが垂直方向の中央に配置されます。セルの中。ヘッダー (th) に設定すると、ヘッダーは垂直方向の中央に配置されます。

注:vertical-align 属性の使用はセル内でのみ設定でき、テーブル自体には設定できません。

2. line-height プロパティを使用する

CSS の line-height プロパティを使用すると、垂直方向の中央揃えを実現できます。例:

td{

line-height: 100px;

}

セルの高さを 100 ピクセルに設定し、次に行の高さを 100 ピクセルに設定します。これにより、セルのコンテンツが垂直方向の中央に配置されます。この方法は単一行のデータに対してのみ機能することに注意してください。

結論

CSS スタイル シートを使用すると、HTML テーブルの中央揃え効果を簡単に実現できます。ほとんどの設計者や開発者にとって、水平方向のセンタリング方法は比較的簡単ですが、垂直方向のセンタリング方法はより難しい場合があります。さまざまな方法を試して、特定のシナリオに最適な方法を見つけることをお勧めします。

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