HTMLとCSSでテーブルを水平方向に中央揃えにする方法
CSSでテーブルを水平方向に配置する方法
text-align プロパティ
これは、テーブルセル内のテキストを水平方向に配置する最も簡単な方法です。
<table>
<tr>
<th>名前</th>
<th>年齢</th>
<th>出身地</th>
</tr>
<tr>
<td>山田太郎</td>
<td>20歳</td>
<td>東京</td>
</tr>
</table>
table {
width: 500px;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 5px;
}
td {
text-align: center;
}
上記のコードでは、text-align: center; を td セレクタに適用することで、すべてのセル内のテキストが中央揃えになります。
margin プロパティは、テーブル要素やセル要素の外側に余白を追加することで、水平方向に配置することができます。
<table>
<tr>
<th>名前</th>
<th>年齢</th>
<th>出身地</th>
</tr>
<tr>
<td>山田太郎</td>
<td>20歳</td>
<td>東京</td>
</tr>
</table>
table {
width: 500px;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 5px;
}
table {
margin: 0 auto;
}
上記のコードでは、margin: 0 auto; を table セレクタに適用することで、テーブル全体が左右に等しい余白を持って中央揃えになります。
flexbox レイアウトは、より柔軟なレイアウトを実現するためのCSSレイアウトシステムです。
<table>
<tr>
<th>名前</th>
<th>年齢</th>
<th>出身地</th>
</tr>
<tr>
<td>山田太郎</td>
<td>20歳</td>
<td>東京</td>
</tr>
</table>
table {
width: 500px;
display: flex;
justify-content: center;
align-items: center;
}
th, td {
border: 1px solid #ddd;
padding: 5px;
}
上記のコードでは、display: flex; と justify-content: center; を table セレクタに適用することで、テーブル全体が水平方向に中央揃えになります。
上記以外にも、以下のような方法でテーブルを水平方向に配置することができます。
floatプロパティpositionプロパティ- CSS Grid レイアウト
それぞれの方法にはメリットとデメリットがあり、どの方法が最適かは状況によって異なります。
<table>
<tr>
<th>名前</th>
<th>年齢</th>
<th>出身地</th>
</tr>
<tr>
<td>山田太郎</td>
<td>20歳</td>
<td>東京</td>
</tr>
</table>
table {
width: 500px;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 5px;
}
td {
text-align: center;
}
margin プロパティ
<table>
<tr>
<th>名前</th>
<th>年齢</th>
<th>出身地</th>
</tr>
<tr>
<td>山田太郎</td>
<td>20歳</td>
<td>東京</td>
</tr>
</table>
table {
width: 500px;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 5px;
}
table {
margin: 0 auto;
}
flexbox レイアウト
<table>
<tr>
<th>名前</th>
<th>年齢</th>
<th>出身地</th>
</tr>
<tr>
<td>山田太郎</td>
<td>20歳</td>
<td>東京</td>
</tr>
</table>
table {
width: 500px;
display: flex;
justify-content: center;
align-items: center;
}
th, td {
border: 1px solid #ddd;
padding: 5px;
}
上記のコードをコピーして、HTMLファイルとCSSファイルに保存します。ブラウザで開くと、テーブルが水平方向に配置されていることを確認できます。
それぞれの方法について詳しく知りたい場合は、以下のリファレンスを参照してください。
テーブルを水平方向に配置する他の方法
float プロパティを使用して、テーブル要素を左右に配置することができます。
<table>
<tr>
<th>名前</th>
<th>年齢</th>
<th>出身地</th>
</tr>
<tr>
<td>山田太郎</td>
<td>20歳</td>
<td>東京</td>
</tr>
</table>
table {
width: 500px;
border-collapse: collapse;
float: left;
}
th, td {
border: 1px solid #ddd;
padding: 5px;
}
上記のコードでは、float: left; を table セレクタに適用することで、テーブルが左側に配置されます。同様に、float: right; を使用すると、テーブルが右側に配置されます。
<table>
<tr>
<th>名前</th>
<th>年齢</th>
<th>出身地</th>
</tr>
<tr>
<td>山田太郎</td>
<td>20歳</td>
<td>東京</td>
</tr>
</table>
table {
width: 500px;
border-collapse: collapse;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
th, td {
border: 1px solid #ddd;
padding: 5px;
}
上記のコードでは、position: absolute; と left: 50%; と top: 50%; を table セレクタに適用することで、テーブルが画面の中央に配置されます。
<table>
<tr>
<th>名前</th>
<th>年齢</th>
<th>出身地</th>
</tr>
<tr>
<td>山田太郎</td>
<td>20歳</td>
<td>東京</td>
</tr>
</table>
table {
width: 500px;
display: grid;
place-items: center;
}
th, td {
border: 1px solid #ddd;
padding: 5px;
}
- シンプルなレイアウトの場合は、
text-alignプロパティを使うのが最も簡単です。 - テーブルを左右に配置したい場合は、
floatプロパティを使うことができます。 - より柔軟なレイアウトを実現したい場合は、CSS Grid レイアウトを使うことができます。
html css alignment
