Homepage Zero ガイド
logo

ゼロから始めよう!わかりやすい!ホームページ作成ガイド

初めての方へ|総合案内|お問い合わせ|当サイトについて

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

ホームコース別ガイド一覧>セル内の文字の縦の位置を指定しよう!

セル内の文字の縦の位置を指定しよう!(td要素、th要素、tr要素のvalign属性)

普通コースじっくりコースアイコンの説明 普通コースじっくりコースアイコンの説明

使用タグ@ <tr valign="縦方向の配置">〜</tr>

使用タグA <td valign="縦方向の配置">〜</td>
使用タグB <th valign="縦方向の配置">〜</th>

HTML一覧タグ辞典 … <tr><td><th> タグ

<tr> タグ<td>タグ<th>タグの valign 属性を使えば、セル内の文字の縦の位置を指定できます。値には「top」(上揃え)、「middle」(中央揃え)、「bottom」(下揃え)、「baseline」(ベースライン揃え)を指定できます。

valign属性の使用例

では実際に valign 属性の属性値を「top」、「middle」、「bottom」に指定して、それぞれの td 要素の文字列の位置を上揃え、中央揃え、下揃えにしてみましょう!
ここでは縦方向の余白を得るために青文字の height 属性を「<th align="center" valign="top">1つ目の見出しセル</th>」、「<th align="center" valign="middle">2つ目の見出しセル</th>」、「<th align="center" valign="bottom">3つ目の見出しセル</th>」に指定しています。縦方向の余白がないと、セルに valign 属性を指定しても無効となります。
td 要素、th 要素の height 属性は推奨されない」属性ですので、td 要素や th 要素の高さを指定したい場合は CSSheight プロパティで指定しましょう。

記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
</head>
<body>

<table border="1" cellpadding="10" width="600">
<tr>
<th height="100" valign="top">1つ目の見出しセル</th>
<th height="100" valign="middle">2つ目の見出しセル</th>
<th height="100" valign="bottom">3つ目の見出しセル</th>
</tr>
<tr>
<td rowspan="2">2行目、1つ目のセル</td>
<td>2行目、2つ目のセル</td>
<td>2行目、3つ目のセル</td>
</tr>
<tr>
<td>3行目、2つ目のセル</td>
<td>3行目、3つ目のセル</td>
</tr>
</table>

</body>
</html>

使用例の表示

[valign属性を指定する前の表示例]
一人暮らしの前向きな料理
1つ目の見出しセル 1つ目の見出しセル 1つ目の見出しセル
2行目、1つ目のセル 2行目、2つ目のセル 2行目、3つ目のセル
3行目、2つ目のセル 3行目、3つ目のセル
↓
[valign属性の値を「top」に指定した後の表示例]
一人暮らしの前向きな料理
1つ目の見出しセル 2つ目の見出しセル 3つ目の見出しセル
2行目、1つ目のセル 2行目、2つ目のセル 2行目、3つ目のセル
3行目、2つ目のセル 3行目、3つ目のセル

このように見出しセルのそれぞれの文字列が上揃え、中央揃え、下揃えとなります。

関連情報ページ

このタグによく使われるCSS

その他

ロゴ
ゼロから始めよう!わかりやすい!ホームページ作成ガイド

|初めての方へ|総合案内|お問い合わせ|当サイトについて|

copyright (C) TOMIY All Right Reserved
inserted by FC2 system