JavaScriptで、HTMLのテーブルのセル内の縦位置を行単位でHTMLのvertical-align属性で変更します。
【手順】
1.「026-TableRowVAlignCssJS.html」というファイルを作成。
2.「026-TableRowVAlignCssJS.html」を以下の様に入力。
<html> <head> </head> <body> <table id="table1"> <tr style="vertical-align:top;"> <td style="border:solid 1px black; height:200px;">セル1-1</td> <td style="border:solid 1px black; height:200px;">セル1-2</td> </tr> <tr style="vertical-align:middle;"> <td style="border:solid 1px black; height:200px;">セル2-1</td> <td style="border:solid 1px black; height:200px;">セル2-2</td> </tr> <tr style="vertical-align:bottom;"> <td style="border:solid 1px black; height:200px;">セル3-1</td> <td style="border:solid 1px black; height:200px;">セル3-2</td> </tr> </table> <input type="button" value="top" onclick="javascript:table1.rows[0].style.verticalAlign='top';"> <input type="button" value="middle" onclick="javascript:table1.rows[0].style.verticalAlign='middle';"> <input type="button" value="bottom" onclick="javascript:table1.rows[0].style.verticalAlign='bottom';"> </body> </html>
3.「026-TableRowVAlignCssJS.html」をブラウザで開きます。
4.以下の様に表示されれば成功です。
以上です。
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。