楽天広場HTML講座・テーブル内のタテ位置を変える

2006.07.18

カテゴリ：HTMLタグ（テーブル）

・テーブルをつかう

■ テーブル内のタテ位置を変える

前回は、テーブルにタイトルをつける方法を学びました。
今回は、テーブル内のタテ位置を変える方法を学んでいきましょう。

今回はタテの位置を変える「valign」属性をつかってみましょう。

属性値には「top」「middle」「bottom」をいれます。

たとえばこの例をみてください。

「valign="top"」としたとき：

●

□

▲

→

（「<table border="1">
<tr><td valign="top">●</td></tr>
<tr><td valign="top">□</td></tr>
<tr><td valign="top">▲</td></tr>
</table>」と入力）

「valign="middle"」としたとき：

●

□

▲

→

（「<table border="1">
<tr><td valign="middle">●</td></tr>
<tr><td valign="middle">□</td></tr>
<tr><td valign="middle">▲</td></tr>
</table>」と入力）

「valign="bottom"」としたとき：

●

□

▲

→

（「<table border="1">
<tr><td valign="bottom">●</td></tr>
<tr><td valign="bottom">□</td></tr>
<tr><td valign="bottom">▲</td></tr>
</table>」と入力）

「別々の位置にしたとき:

●

□

▲

→

（「<table border="1">
<tr><td valign="top">●</td></tr>
<tr><td valign="middle">□</td></tr>
<tr><td valign="bottom">▲</td></tr>
</table>」と入力）

↑
解りやすいようにテーブルの幅を変えています。

このように文字のタテの位置を変えることができました。
次回はヨコ位置を変えてみます。

お気に入りの記事を「いいね！」で応援しよう

Last updated 2008.12.21 08:08:55

[HTMLタグ（テーブル）] カテゴリの最新記事