ホームページ > 記事 > ウェブフロントエンド > HTMLテーブルの中心を設定する方法
HTMLテーブルの中心を設定する方法
- PHPzオリジナル
- 2023-04-25 10:28:4710756ブラウズ
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
概要
HTML のテーブルは一般的な Web デザイン要素であり、中央揃えのテーブルは一般的なデザイン要件です。表を中央に配置するには、CSS スタイルシートまたは HTML プロパティを使用できます。 CSS スタイルシートを使用するには、いくつかの基本的なスキルが必要ですが、スケーラビリティも向上するため、長年にわたるベスト プラクティスとなっています。 HTML 属性を使用してテーブルを中央に配置するのは簡単ですが、複雑な Web デザインでは問題が発生する可能性があります。したがって、Web ページをデザインするときは、どの方法を使用するかを考慮する必要があります。
以上がHTMLテーブルの中心を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。