9.4 <TD>の使い方

9.4 <TD>の使い方

　セルの設定を行います。これらのオプションも、必要なものだけを選んで指定します。<TD>で指定したオプションは指定したセルのみで有効になります。

　また、ALIGN、VALIGN、BGCOLORは<TD>で指定した方が優先されます。

横方向の文字揃え

　セル内の横方向の文字揃えの指定です。省略した時は左寄せになります。また、画像も同様に扱われます。

<TD ALIGN="RIGHT">	:	右寄せ
<TD ALIGN="CENTER">	:	センタリング
<TD ALIGN="LEFT">	:	左寄せ

縦方向の文字揃え

　セル内の縦方向の文字揃えの指定です。省略した時はセンタリングになります。また、画像も同様に扱われます。

<TR VALIGN="TOP">	:	上寄せ
<TR VALIGN="CENTER">	:	センタリング
<TR VALIGN="BOTTOM">	:	下寄せ

セルの背景色

　セルの背景色を指定します。16進数のRGB値で指定し、指定しなかったときは透明です。16進数が分からないと言う方は、カラーチャートを参考にしてください。

セルの背景色を青にする例

セルの幅

　セルの幅を指定します。指定はパーセント（表全体の幅に対するパーセント）もしくはピクセルで指定します。指定しなかったときは、セル内で表示している物の大きさで自動的に決められます

　こちらの指定もセルの最小の幅という意味なので、セルの中で表示している内容が指定した幅を超える場合や、他の行の同じ列のセルでさらに大きな値を指定している場合は、（セルの幅が）指定した幅より大きくなります。

<TD WIDTH="10%">	:	セルの幅を10パーセントにする
<TD WIDTH="32">	:	セルの幅を64ピクセルにする

セルの高さ

　セルの高さを指定します。指定はパーセント（表全体の高さに対するパーセント）もしくはピクセルで指定します。指定しなかったときは、セル内で表示している物の大きさで自動的に決められます

　こちらの指定もセルの最小の高さという意味なので、セルの中で表示している内容が指定した高さを超える場合や、行内の他のセルでさらに大きな値を指定している場合、行の高さでさらに大きな値をしているときは、（セルの高さが）指定した高さより大きくなります。
　また、１つのセルに指定すると行内の全てのセルが同じ高さになります。

<TD HEIGHT="25%">	:	セルの高さを25パーセントにする
<TD HEIGHT="64">	:	セルの高さを64ピクセルにする

強制改行を無効にする

　<NOBR>タグと似たような扱いです。

　セル内で表示する文字列（および画像）が、WIDTHで指定したセルの幅を超えると文字列は強制改行されますが、NOWRAPを指定しておけば強制改行されません…と言いたい所ですが、どうやらインターネットエクスプローラとネットスケープコミュニケータでは多少違いがあるようです。

　インターネットエクスプローラでは、WIDTHで指定したセルの幅が優先され強制改行されます。しかし、ネットスケープコミュニケータ（の古いバージョン）では、WIDTHの指定が無視され強制改行されません。頼むから、どっちかに統一して欲しい…（汗）

　※画像の強制改行とは、小さな画像をいくつも並べたときのことです。

幅を120ピクセルにし、強制改行を行わない

<TD>～</TD>の使用例

　以下は<TD>～</TD>の使用例です。

<HEAD>
<TITLE>
セルの設定例
</TITLE>
</HEAD>

<BODY TEXT="#FFFFFF" BGCOLOR="#000000">

<TABLE BORDER=2 CELLPADDING=4 CELLSPACING=4>

<TR>
<TD WIDTH=100>100PIXEL<BR></TD>
<TD WIDTH=200>200PIXEL<BR></TD>
<TD WIDTH=300>300PIXEL<BR></TD>
</TR>

<TR ALIGN="LEFT">
<TD>ALIGNナシ<BR></TD>
<TD ALIGN="CENTER">センタリング<BR></TD>
<TD ALIGN="RIGHT">右寄せ<BR></TD>
</TR>

<TR>
<TD HEIGHT=100>VALIGNナシ<BR></TD>
<TD VALIGN="TOP">上寄せ<BR></TD>
<TD VALIGN="BOTTOM">下寄せ<BR></TD>
</TR>

<TR>
<TD BGCOLOR="#FF0000">Ｃ<BR></TD>
<TD>Ｃ<BR></TD>
<TD BGCOLOR="#0000FF">Ｃ<BR></TD>
</TR>

</TABLE>

</BODY>
</HTML>

　このソースをブラウザで表示するときはココをクリック。ソースとブラウザでの表示を見比べてください。

ネコでも分かるHTMLの書き方

1.ページの設定
  1.1 HTMLドキュメントであることを宣言する
  1.2 ドキュメント情報を定義する
  1.3 ページタイトルを表示する

2.ブラウザへ表示する部分を宣言する

3.関連知識
  3.1 タグの名前を間違えると？
  3.2 タグへのオプション指定
  3.3 画像ファイル・リンク先等の指定方法

4.文字に関するタグ
  4.1 文字の大きさの標準値の指定
  4.2 文字の色・大きさを部分的に指定
  4.3 文字を太字(ボールド)にする
  4.4 見出しの指定
  4.5 アンダーラインを付ける
  4.6 斜体(イタリック)にする

5.レイアウトに関するタグ
  5.1 全体の中央寄せ
  5.2 改行する
  5.3 段落を付ける
  5.4 強制改行の禁止
  5.5 横線を引く

6.画像を表示する

7.リンク（アンカー）
  7.1 他のページ、画像、サイトを表示
  7.2 リンク先を別なウィンドウで表示

8.ちょっと休憩！

9.表を作る
  9.1 簡単な表、関連タグ
  9.2 <TABLE>の使い方
  9.3 <TR>の使い方
  9.4 <TD>の使い方
  9.5 横方向にまたがるセル
  9.6 縦方向にまたがるセル
  9.7 さらに複雑な表…

10.フレーム
  10.1 このコーナーみたいにする方法
  10.2 フレーム使用ページの宣言
  10.3 最初に表示するページの宣言
  10.4 フレーム未対応ブラウザ用の宣言
  10.5 分割の例１／上下に２分割
  10.6 分割の例２／左右に２分割
  10.7 指定したフレームセルへ表示する
  10.8 フレームを終了する

11.クリッカブルマップ
  11.1 クリッカブルマップの準備
  11.2 表示ページ、形状の指定方法
  11.3 使用例

12.その他のタグ
  12.1 改行・空白をそのまま表示
  12.2 ソースをそのまま表示
  12.3 コメント
  12.4 ページの再読込み、自動ジャンプ

13.その他の豆知識
  13.1 HTMLを書くときは小文字?大文字?
  13.2 作ったページを確認するとき
  13.3 ファイル名を付けるとき
  13.4 画像について
  13.5 ディレクトリの指定方が？なとき

14.ちょっとしたコツなど
  14.1 フォントについて
  14.2 文章を体裁よく表示する
  14.3 その他に…

15.カラーチャート

Happy! Happy! Islandその他のコンテンツ

■VBAプログラミング、その他
　Access VBAプログラミング＆Tips
　Excel VBA(エクセルマクロ)プログラミング＆Tips
　VBScript＆JScriptプログラミング＆Tips for WSH
　プログラミング基礎・入門
　HTMLの書き方
■ダウンロードコーナー
　AccessとExcelのフリーソフト
■コミュニティー
　VBA質問掲示板
■その他
　オレの話を聞けぇ♪（仮称／コラム）
　管理人プロフィール
　管理人へメール
■別館(海外向けサイト)
　SAMURAI Game Center - Freeware games for Microsoft ACCESS and EXCEL!

VBAプログラミング＆Tips集の
"Happy! Happy! Island"トップページへ

[リンク]IT関連情報サイトなど

gihyo.jp
技術評論社提供のIT関連コンテンツサイト

[リンク]一番クリックした国が優勝

ClickClickClick.com
クリッカー＆認証人募集！日本を1位にしよう！もちろん、おいらも参加中！各種情報の入手はClickJapanオフィシャルサイトで。

[PR]証券会社・投資運用関連サイト

カブドットコム証券
逆指値・W指値等の自動売買でリスク管理追求型の投資が可能！引け後のIRやニュースを見てからでも間に合う夜間取引も魅力！

マネックス証券
オンライントレード・自動売買の最先端！「逆指値・ツイン指値」でリスクコントロール！デイトレードなら片道手数料無料！

Ｅ＊トレード証券
オンライン専業証券№１の口座数！業界最低水準の手数料体系と充実のサービスラインナップ！

楽天証券のマーケットスピード
ネット証券最強のトレーディングツール「マーケットスピード」でプロ水準の投資環境がご自宅のパソコンに！

オンライン証券徹底比較
価格．ｃｏｍで証券徹底比較！手数料、取引商品、信用取引金利、逆指値などの注文方法や提供情報などを徹底比較！