HTML テーブルの内容を中央揃えする
2024-08-24
HTML テーブルの各セルを中央揃えするには、text-align プロパティを center に設定します。
HTML
<table border="1">
<tr>
<td style="text-align: center;">Cell 1</td>
<td style="text-align: center;">Cell 2</td>
</tr>
<tr>
<td style="text-align: center;">Cell 3</td>
<td style="text-align: center;">Cell 4</td>
</tr>
</ table>
HTML テーブル全体を中央揃えするには、margin: 0 auto; をテーブルのスタイルに追加します。
<table border="1" style="margin: 0 auto;">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
CSS ファイルを使用してスタイルを設定する
スタイルを CSS ファイルに配置して、HTML コードを整理することができます。
<table border="1">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
CSS
table {
margin: 0 auto;
}
td {
text-align: center;
}
個々のセルを中央揃えする
<table border="1">
<tr>
<td style="text-align: center;">セル 1</td>
<td style="text-align: center;">セル 2</td>
</tr>
<tr>
<td style="text-align: center;">セル 3</td>
<td style="text-align: center;">セル 4</td>
</tr>
</table>
text-align: center;を各セルのスタイルに設定することで、セル内の内容を中央揃えします。
<table border="1" style="margin: 0 auto;">
<tr>
<td>セル 1</td>
<td>セル 2</td>
</tr>
<tr>
<td>セル 3</td>
<td>セル 4</td>
</tr>
</table>
margin: 0 auto;をテーブルのスタイルに設定することで、テーブル全体を水平方向の中央に配置します。
CSS ファイルを使用する
table {
margin: 0 auto;
}
td {
text-align: center;
}
- CSS ファイルにスタイルを定義することで、HTML コードをより読みやすくすることができます。
Flexbox を使用して中央揃えする
Flexbox を使用してテーブル全体を中央揃えし、セル内の内容も中央揃えすることができます。
<table border="1" style="display: flex; justify-content: center; align-items: center;">
<tr>
<td>セル 1</td>
<td>セル 2</td>
</tr>
<tr>
<td>セル 3</td>
<td>セル 4</td>
</tr>
</table>
align-items: center;を設定することで、セル内の要素を垂直方向の中央に配置します。display: flex;をテーブルのスタイルに設定することで、Flexbox レイアウトを使用します。
Grid レイアウトを使用して中央揃えする
<table border="1" style="display: grid; place-content: center;">
<tr>
<td>セル 1</td>
<td>セル 2</td>
</tr>
<tr>
<td>セル 3</td>
<td>セル 4</td>
</tr>
</table>
CSS テーブルのプロパティを使用する
CSS テーブルのプロパティを使用して、テーブル全体とセル内の内容を中央揃えすることもできます。
table {
margin: 0 auto;
width: 50%; /* テーブルの幅を指定 */
}
td {
text-align: center;
vertical-align: middle;
}
vertical-align: middle;を設定することで、セル内の内容を垂直方向の中央に配置します。widthプロパティを使用してテーブルの幅を指定し、中央揃えをより効果的にすることができます。
html css html-table
