ホーム＞コース別ガイド一覧＞セル内の文字の縦の位置を指定しよう！
セル内の文字の縦の位置を指定しよう！（td要素、th要素、tr要素のvalign属性） |
  
|
使用タグ① <tr valign="縦方向の配置">～</ｔｒ>
使用タグ② <td valign="縦方向の配置">～</ｔd>
使用タグ③ <th valign="縦方向の配置">～</ｔh>
HTML一覧タグ辞典 … <tr>、<td>、<th> タグ
<tr> タグ、<td>タグ、<th>タグの valign 属性を使えば、セル内の文字の縦の位置を指定できます。値には「top」（上揃え）、「middle」（中央揃え）、「bottom」（下揃え）、「baseline」（ベースライン揃え）を指定できます。
valign属性の使用例
では実際に valign 属性の属性値を「top」、「middle」、「bottom」に指定して、それぞれの td 要素の文字列の位置を上揃え、中央揃え、下揃えにしてみましょう！
※ここでは縦方向の余白を得るために青文字の height 属性を「<th align="center" valign="top">１つ目の見出しセル</th>」、「<th align="center" valign="middle">２つ目の見出しセル</th>」、「<th align="center" valign="bottom">３つ目の見出しセル</th>」に指定しています。縦方向の余白がないと、セルに valign 属性を指定しても無効となります。
※td 要素、th 要素の height 属性は「推奨されない」属性ですので、td 要素や th 要素の高さを指定したい場合は CSS の height プロパティで指定しましょう。
記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
</head>
<body>
<table border="1" cellpadding="10" width="600">
<tr>
<th height="100" valign="top">１つ目の見出しセル</th>
<th height="100" valign="middle">２つ目の見出しセル</th>
<th height="100" valign="bottom">３つ目の見出しセル</th>
</tr>
<tr>
<td rowspan="2">２行目、１つ目のセル</td>
<td>２行目、２つ目のセル</td>
<td>２行目、３つ目のセル</td>
</tr>
<tr>
<td>３行目、２つ目のセル</td>
<td>３行目、３つ目のセル</td>
</tr>
</table>
</body>
</html> |
|
使用例の表示
[ｖalign属性を指定する前の表示例]
| 一人暮らしの前向きな料理 |
| １つ目の見出しセル |
１つ目の見出しセル |
１つ目の見出しセル |
| ２行目、１つ目のセル |
２行目、２つ目のセル |
２行目、３つ目のセル |
| ３行目、２つ目のセル |
３行目、３つ目のセル |
|
 |
[ｖalign属性の値を「top」に指定した後の表示例]
| 一人暮らしの前向きな料理 |
| １つ目の見出しセル |
２つ目の見出しセル |
３つ目の見出しセル |
| ２行目、１つ目のセル |
２行目、２つ目のセル |
２行目、３つ目のセル |
| ３行目、２つ目のセル |
３行目、３つ目のセル |
|
|
このように見出しセルのそれぞれの文字列が上揃え、中央揃え、下揃えとなります。
関連情報ページ |
|
このタグによく使われるCSS |
|
|
|
|
その他 |
|
|
|
