TECH I.S.

CSS テーブルの配置


水平方向の配置

text-alignプロパティは、<th> または <td> のコンテンツの水平方向の配置 (左、右、中央など) を設定します。

デフォルトでは、<th> 要素のコンテンツは中央揃えで、<td> 要素のコンテンツは左揃えです。

<td> 要素のコンテンツも中央揃えにするには、次を使用しますtext-align: center:


ファーストネーム 苗字 貯蓄
ピーター グリフィン $100
ロイス グリフィン $150
ジョー スワンソン $300

td{  text-align: center; }

自分で試してみる »

コンテンツを左揃えにするには、 <th> 要素の配置を強制的に左揃えにします。text-align: left財産:


ファーストネーム 苗字 貯蓄
ピーター グリフィン $100
ロイス グリフィン $150
ジョー スワンソン $300

th{  text-align: left; }

自分で試してみる »


垂直方向の配置

vertical-alignプロパティは、<th> または <td> のコンテンツの垂直方向の配置 (上、下、中央など) を設定します。

デフォルトでは、テーブル内のコンテンツの垂直方向の配置は中央です (<th> 要素と <td> 要素の両方)。

次の例では、 <td> 要素の垂直方向のテキスト配置を下に設定します。


ファーストネーム 苗字 貯蓄
ピーター グリフィン $100
ロイス グリフィン $150
ジョー スワンソン $300

td{  height: 50px;  vertical-align: bottom; }

自分で試してみる »



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細