ウェブ木箱：HTML講座-テーブル(表)の表示位置を指定しよう

☆テーブル(表)の表示位置を指定しよう - クイックガイド

腹減り日誌♪ - donguri browser　

食後の運動

ゴロ	ゴロ	ゴロ
ゴロ	ゴロ	ZZZ...


		１．	表の表示位置を指定しよう。 align


		２．	セル内の表示位置を指定しよう align,valign

←前回『テーブル(表)の大きさを指定しよう』へ

align属性は他のタグでも何度か出てきたね。属性値はleft、center、rightで指定するんだけど、表示は<h1>や<p>などとはちょっと違うよ。

<html>
<head>
 <title>腹減り日誌♪</title>
</head>
<body>
 
今月の食事の分析結果は<br>
<table border="1" align="center">
 <tr>
  <td>データ１</td>
  <td>データ２</td>
  <td>データ３</td>
 </tr>
</table>
以上のようになりました。
 
</body>
</html>

腹減り日誌♪ -

今月の食事の分析結果は

データ１

データ２

データ３

以上のようになりました。


		centerは<h1>や<p>と同様に中央表示になるよ。

ブラウザでの表示はこちら(別ウィンドウ)

<html>
<head>
 <title>腹減り日誌♪</title>
</head>
<body>
 
<table border="1" align="right">
 <tr>
  <td>データ１</td>
 </tr>
</table>
この結果から考えると、<br>
今月は少々・・・いや若干・・・<br>
わずかに・・・あるいは・・・<br>
微妙に食べ過ぎかと思われます。
 
</body>
</html>

腹減り日誌♪ -

データ１

この結果から考えると、今月は少々・・・いや若干・・・わずかに・・・あるいは・・・微妙に食べ過ぎかと思われます。


		leftやrightは<img>と同様回り込みによる表示。

ブラウザでの表示はこちら(別ウィンドウ)

次はセル内での表示位置の指定の仕方だよ。これは横方向、縦方向ともに指定出来るよ。

セル内の横方向の表示位置を指定する属性はalign、
セル内の縦方向の表示位置を指定する属性はvalignだよ。

属性値はalignがleft(左寄せ)、center(中央)、right(右寄せ)など、 valignがtop(上寄せ)、center(中央)、bottom(下寄せ)などだよ。

<html>
<head>
 <title>腹減り日誌♪</title>
</head>
<body>
 
<table border="1">
 <tr>
  <td width="100" height="100"
   align="center">データ１</td>
 </tr>
 <tr>
  <td width="100" height="100"
   valign="bottom">データ２</td>
 </tr>
</table>
 
</body>
</html>

腹減り日誌♪ -

データ１

データ２

ブラウザでの表示はこちら(別ウィンドウ)

何度も言ってるけどテーブルってのはすごく応用が利くタグだからこういった何でもないような属性が重要になってくるよ。とは言っても一編に覚えなくても必要に応じて調べながら使ってもいいので、とりあえずどんなことが出来るかってことは漠然とでもいいので覚えておこうね。


	前回は表の大きさの指定の仕方だったね。 ←前へ

	テーブル編－４
	HTML講座第２１回

		表の表示位置を指定しよう