CSSで高さのあるテーブルセルでのテキストの縦方向の表示位置を指定するコードを紹介します。
概要
テービルセルでの縦方向の表示位置を指定するには、vertical-alignスタイルを利用します。
コード
下記のコードを記述します。
TableTextAlignment.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="TableTextAlignment.css" />
<meta charset="utf-8" />
</head>
<body>
<table class="MyTable">
<tr>
<td>項目1</td>
<td>項目2</td>
<td>項目3</td>
<td>項目4</td>
</tr>
<tr>
<td>値 1-1</td>
<td>値 1-2</td>
<td>値 1-3</td>
<td>値 1-4</td>
</tr>
<tr>
<td>値 2-1</td>
<td>値 2-2</td>
<td>値 2-3</td>
<td>値 2-4</td>
</tr>
<tr>
<td>値 3-1</td>
<td>値 3-2</td>
<td>値 3-3</td>
<td>値 3-4</td>
</tr>
</table>
</body>
</html>
TableTextAlignment.css
.MyTable tr td{
border:solid 1px #ff6a00;
width:120px;
height:86px;
}
実行結果 (vertical-alignスタイルを指定しない場合)
vertical-alignスタイルを指定しない場合は、縦方向のセルの中心にテキストが表示されます。
vertical-align:top を指定する
TableTextAlignment.cssを下記のコードに変更します。
TableTextAlignment.css
.MyTable tr td{
border:solid 1px #ff6a00;
width:120px;
height:86px;
vertical-align:top;
}
HTMLファイルを表示します。セルの上部にテキストが表示されます。
vertical-align:bottom を指定する
TableTextAlignment.cssを下記のコードに変更します。
TableTextAlignment.css
.MyTable tr td{
border:solid 1px #ff6a00;
width:120px;
height:86px;
vertical-align:bottom;
}
HTMLファイルを表示します。セルの下部にテキストが表示されます。
vertical-align:middleを指定する
TableTextAlignment.cssを下記のコードに変更します。
.MyTable tr td{
border:solid 1px #ff6a00;
width:120px;
height:86px;
vertical-align:middle;
}
HTMLファイルを表示します。セルの中心部にテキストが表示されます。vertical-alignを設定しない場合と同じ表示となります。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2016-01-06
作成日: 2015-10-15
