ＨＴＭＬタグ講座

[Home] [-5] [<] [>] [+5]

テーブルの各種設定

テーブル内の位置揃えやセルの連結、幅や背景色の指定をします。

【位置を揃える】

文字の横方向の位置を左・中央・右に揃えたり、縦方向の位置を上・中央・下などに揃えたりします。

開始タグ	終了タグ	内容
<TR>	</TR>	横方向の一列（行）を指定します
<TD>	</TD>	一つのセル（マス目）を指定します
<TH>	</TH>	<TD>の代わりに用いて、タイトル部分を表します
属性	属性値	内容
ALIGN	="left"	横方向の位置を左に揃えます
	="center"	横方向の位置を中央に揃えます
	="right"	横方向の位置を右に揃えます
VALIGN	="top"	縦方向の位置を上に揃えます
	="middle"	縦方向の位置を中央に揃えます
	="bottom"	縦方向の位置を下に揃えます
	="baseline"	縦方向の位置をその列（行）の項目のそれぞれの１行目の下端で揃えます

横方向の一列（行）の文字の揃え方を決めたい場合は、<TR ALIGN="---">を使います。
縦方向の列には一度に揃える設定がありません。
セルの中で文字の揃え方を変更したい場合は、<DIV ALIGN="---">や<P ALIGN="---">を使います。
その他、ALIGN="justify"（両端揃え）やALIGN="char"（特定文字揃え）はほとんどのブラウザが対応していません。VALIGN="center"は本来VALIGN="middle"と書きます。

縦方向＼横方向	ALIGN="left"	ALIGN="center"	ALIGN="right"
VALIGN="top"	知床五湖はウトロの先にあります	知床横断道路方面は南東方面へ	知床五湖は北東へ
VALIGN="middle"	知床五湖には展望台もあります	第一湖から第五湖までゆっくり歩けば90分です	ほぼ時計回りに巡ります
VALIGN="bottom"	一湖と二湖を見るだけの人が多いです	二湖から向こうは静かです	三湖から先は熊の出没しそうな森の中を歩くので、音を出すか大きめの声で会話をしましょう
VALIGN="baseline"	四湖と五湖は小さな湖です	五湖全部を見ることをおすすめします	早足で歩けば40分です

【セルを連結する】

複数のセルを一つにします。縦横同時にできますが、長方形以外にはなりません。

開始タグ	終了タグ	内容
<TD>	</TD>	一つのセル（マス目）を指定します
<TH>	</TH>	<TD>の代わりに用いて、タイトル部分を表します
属性	属性値	内容
COLSPAN	=（数値）	横（右）方向に指定した数だけセルを連結します
ROWSPAN	=（数値）	縦（下）方向に指定した数だけセルを連結します

最も左上にあたるセルに内容を書き、右や下のセルは省略します。
サンプルは以下のようになります。

今回の北海道旅行は、以下のような日程でした。
<TABLE BORDER=1 CELLSPACING=2 CELLPADDING=2>
<TR><TH>日　付</TH><TH>行き先</TH><TH>イベント</TH></TR>
<TR><TH ROWSPAN=5>10/8</TH><TD>女満別空港</TD><TD>レンタカーを借りる。</TD></TR>
<TR><TD>サロマ湖</TD><TD>雨のため、道の駅（物産館「みのり」）のみ</TD></TR>
<TR><TD>ワッカ原生花園</TD><TD>雨のため、ネイチャーセンターのみ</TD></TR>
<TR><TD>網　走</TD><TD>夕食を市内の居酒屋にて、焼きずわいがにを食す</TD></TR>
<TR><TD COLSPAN=2 ALIGN="right">オホーツク小清水ＹＨ泊</TD></TR>
<TR><TH ROWSPAN=8>10/9</TH><TD>ひまわり畑</TD><TD>ＹＨの南にあるのをＹＨのペアレントさんに教えてもらい見に行く</TD></TR>
<TR><TD>フレトイ展望台</TD><TD>オホーツク海に面した展望台で見晴らし良好、浜もすぐ下に</TD></TR>
<TR><TD>知床五湖レストハウス</TD><TD>カムイワッカ沢登り用足袋を手に入れる</TD></TR>
<TR><TD>カムイワッカ湯の滝</TD><TD>滝つぼが天然の温泉となっていて、沢を登って入りに行く</TD></TR>
<TR><TD>知床五湖</TD><TD>知床五湖レストハウスに戻って五湖巡り</TD></TR>
<TR><TD>マッカウス洞窟</TD><TD>羅臼（らうす）の北の光苔がある小さな洞窟</TD></TR>
<TR><TD>開陽台</TD><TD>車を飛ばして到着したものの、日没寸前（多和平には行けず）</TD></TR>
<TR><TD COLSPAN=2 ALIGN="right">釧路湿原とうろＹＨ泊</TD></TR>
</TABLE>

↓このようになります

今回の北海道旅行は、以下のような日程でした。

日　付	行き先	イベント
10/8	女満別空港	レンタカーを借りる。
	サロマ湖	雨のため、道の駅（物産館「みのり」）のみ
	ワッカ原生花園	雨のため、ネイチャーセンターのみ
	網　走	夕食を市内の居酒屋にて、焼きずわいがにを食す
	オホーツク小清水ＹＨ泊
10/9	ひまわり畑	ＹＨの南にあるのをＹＨのペアレントさんに教えてもらい見に行く
	フレトイ展望台	オホーツク海に面した展望台で見晴らし良好、浜もすぐ下に
	知床五湖レストハウス	カムイワッカ沢登り用足袋を手に入れる
	カムイワッカ湯の滝	滝つぼが天然の温泉となっていて、沢を登って入りに行く
	知床五湖	知床五湖レストハウスに戻って五湖巡り
	マッカウス洞窟	羅臼（らうす）の北の光苔がある小さな洞窟
	開陽台	車を飛ばして到着したものの、日没寸前（多和平には行けず）
	釧路湿原とうろＹＨ泊

【幅と高さ】

表全体やセルの幅や高さを指定します。
将来的には廃止予定となっているものがいくつかありますので注意して下さい。
セルの幅や高さを指定しても、見る人の文字の大きさの設定などで見た目は大きく変わります。

開始タグ	終了タグ	内容
<TABLE>	</TABLE>	テーブルの全体を指定します
属性	属性値	内容
WIDTH	=（数値）	表全体の幅を指定します．ピクセル単位の数値の他、％でも指定できます
HEIGHT	=（数値）	表全体の高さを指定します［廃止予定］
開始タグ	終了タグ	内容
<TD>	</TD>	一つのセル（マス目）を指定します
<TH>	</TH>	<TD>の代わりに用いて、タイトル部分を表します
属性	属性値	内容
WIDTH	=（数値）	セルの幅を指定します［廃止予定］
HEIGHT	=（数値）	セルの高さを指定します［廃止予定］

【セル内の背景色】

表全体やセルの内側の背景色を指定します。このタグは廃止予定です。スタイルシートに移行予定です。
テーブルの枠に色を付けるのは、ブラウザなどによって見た目が異なり、標準的な表記方法がありません。

開始タグ	終了タグ	内容
<TABLE>	</TABLE>	テーブルの全体を指定します
<TR>	</TR>	横方向の一列（行）を指定します
<TD>	</TD>	一つのセル（マス目）を指定します
<TH>	</TH>	<TD>の代わりに用いて、タイトル部分を表します
属性	属性値	内容
BGCOLOR	="（色）"	指定された範囲の背景を指定します［廃止予定］