未分類

HTML 4.01 の勉強 (valign を扱う)

HTML 4.01 を勉強しましょう。

tr, th, td 要素の valign 属性を扱う方法を説明します。

以下の例では、各行の縦方向の位置を指定しています。

■コード (CSS)

th.row1 {
  height: 100px;
  vertical-align: top;
}

td.row2 {
  height: 100px;
  vertical-align: middle;
}

td.row3 {
  height: 100px;
  vertical-align: bottom;
}

■コード (HTML)

<table border="1">
<tr><th class="row1">Title</th></tr>
<tr><td class="row2">Value1</td></tr>
<tr><td class="row3">Value2</td></tr>
<tr><td valign="baseline" height="100px">Value3</td></tr>
</table>

■ 説明
html の属性は valign ですが、css で指定する場合は vertical-align となります。

-未分類