TECH I.S.

CSS テーブルの配置


水平方向の配置

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

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

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


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

td{  text-align: center; }
自分で試してみる »

コンテンツを左揃えにするには、 text-align: leftプロパティを使用して、<th>要素の配置を左揃えにします。


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

th{  text-align: left; }
自分で試してみる »

垂直方向の配置

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

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

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


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

td{  height: 50px;  vertical-align: bottom; }
自分で試してみる »


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

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

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

スクールの詳細