HTML4.0の基本

テーブルタグの属性 その1

2009年8月6日

<TABLE>タグの属性

一昔前はレイアウト用のタグとして使われることもありましたが、TABLE要素は表を表すためのものです。

枠組みを付加:border=値

段や列の区切りがわかりにくいテーブルに,border属性をつけて,表らしく枠組み(ボーダー)を付加します。

<TABLE border="1">
<TH>ヘッダ1</TH><TH>ヘッダ2</TH><TH>ヘッダ3</TH>
<TR>
<TD>内容</TD><TD>内容</TD><TD>内容</TD>
<TR>
<TD>内容</TD><TD>内容</TD><TD>内容</TD>
<CAPTION>表に枠組みを付加</CAPTION>
</TABLE>

出力サンプル
ヘッダ1ヘッダ2ヘッダ3
内容内容内容
内容内容内容
表に枠組みを付加

ボーダー水平幅の調節:cellspacing="値"

cellspacing属性はセルの周りを囲む罫線の幅を指定します。デフォルトでは2つのスペースです。Xには整数が入ります。cellspacingを指定しないデフォルト状態では,X=2の太さで表示されますから,デフォルト状態より細かくしたいときは,X=0ないし1を指定します。

<TABLE cellspacing="値">

 

<TABLE border="5" cellspacing="10" >
<TD colspan="2">内容1</TD>
<TD>内容2</TD>
<TR>
<TD>内容3</TD>
<TD>内容4</TD>
<TD>内容5</TD>
<TR>
</TABLE>

出力サンプル
内容1 内容2
内容3 内容4 内容5

ボーダーとセル内テキストとの隙間の調節:cellpadding="値"

ボーダーとセル内のテキストとの隙間を自由に調節するのがcellpadding=Xです。Xには整数が入り,X=0の指定をしたときが一番狭く,cellpaddingを付けないときがその次,X=1以降は数字が大きくなるにしたがって,隙間が広がります。

<TABLE cellpadding="値">

cellpadding属性の使い方

<TABLE border="51" cellpadding="10" >
<TD colspan="2">内容1</TD>
<TD>内容2</TD>
<TR>
<TD>内容3</TD>
<TD>内容4</TD>
<TD>内容5</TD>
<TR>
</TABLE>

出力サンプル
内容1 内容2
内容3 内容4 内容5

<TD>タグの属性

テキスト内の横位置:align="left | center | right"

align属性は表題(CAPTION)や、セル等の位置を指定します。テーブル内の左右の大きさは,列内の一番大きいものに合わせる形になりますから,文字数の少ないセルのテキストは,左端に揃えられます。

align = "center"
align = "left"
align = "right"
セル内の中央に表示
セル内で左寄せに表示
セル内で右寄せに表示
align属性の使い方

<TABLE border="1" hspace="15" vspace="5">
<TH>====LEFT====</TH> <TH>===CENTER===</TH> <TH>====RIGHT===</TH>
<TR>
<TD align="left">A</TD> <TD align="center">B</TD> <TD align="right">C</TD>
<CAPTION>表本体の位置</CAPTION>
</TABLE>

出力サンプル
====LEFT==== ===CENTER=== ====RIGHT===
A B C
表本体の位置

セル中テキストの縦位置:valign="top | middle | bottom"

TR, TH, TDタグで指定できるvalign属性はセル中のテキストや図の縦位置を制御します。位置は上(top)、下(bottom)、中央(middle)、ベースライン(baseline)が指定できます。デフォルト位置は中央寄せ(middle)です。

valign = "top"
valign = "middle"
valign = "bottom"
セル内の上に表示
セル内で中央に表示
セル内で下に表示
valign属性の使い方

<TABLE border=1>
<TD height="50">上(TOP)</TD><TD valign="top">上に表示されてます?</TD>
<TR>
<TD height="50">中(MIDDLE)</TD><TD valign="middle">真ん中に表示されてます?</TD>
<TR>
<TD height="50">下(BOTTOM)</TD><TD valign="bottom">下に表示されてるでます?</TD>
</TABLE>

出力サンプル
上(top)上に表示されてます?
中(middle)真ん中に表示されてます?
下(bottom)下に表示されてます?

nowrap

※この属性は廃止される予定です。

表は各セルのテキスト長とブラウザのウィンドウ幅を考慮して、うまく収まるようにセル幅が決められます。そのため、テキストが任意の位置で改行されてしまいます。THまたはTDタグで指定できるnowrap属性はセル内のテキストを改行させたくない場合に用います。nowrapを指定したセル中のテキストを改行させるには、<BR>タグを用います。この方法を使用してユーザが改行させたい場所で改行を指定できます。

次のソースコードは標準のテーブルです。

<TABLE border="1" width="30%">
<TD>AAAAAAAAAAAAAAAAAAAAAAAAAAA</TD>
</TABLE>

次のソースコードはnowrapを使用しています。

<TABLE border="1" width="30%">
<TD nowrap>AAAAAAAAAAAAAAAAAAAAAAAAAAA</TD>
</TABLE>

テーブル幅の調節:width="値"

width属性は表全体の幅やセル毎に幅を指定するために、THまたはTDでも指定します。幅はピクセル的な幅あるいは書類サイズの割合(パーセンテージ)で指定します。指定された幅が、この表を作るのに必要な幅以下の場合は、無視されます。

指定例は次のとおりです。

<TABLE width=**%>

width属性を使ったサンプル

<TABLE border width="50%">
<TR>
<TD width="70%">70%幅</TD><TD width="30%">30%幅</TD>
</TR>
<TR>
<TD>A</TD><TD>B</TD>
</TR>
<CAPTION align=bottom>表の幅の変更例</CAPTION>
</TABLE>

出力結果
70%幅30%幅
AB
表の幅の変更例

テーブルの高さの調節:height="値"

height属性は表全体の高さやセル毎に高さを指定するために、THまたはTDで指定します。高さはピクセル的な高さあるいは書類サイズの割合(パーセンテージ)で指定します。指定された高さが、この表を作るのに必要な高さ以下の場合は、無視されます。

指定例は次のとおりです。

<TABLE height="**"%>

height属性を使ったサンプル

<TABLE border height="100">
<TR>
<TD>高さ15%</TD> <TD>アイテム</TD>
</TR>
<TR>
<TD>100</TD> <TD>1000</TD>
</TR>
<CAPTION align=bottom>表の高さの変更例</CAPTION>
</TABLE>

出力結果
高さ15% アイテム
100 1000
表の高さの変更例

セルの調節

複数行にわたるセルを作る:colspan="値"

セルが複数の縦行をまたがせるかを指定します。デフォルトの数は1です。 このタグはTHまたはTDで使用します。例えば、<TD colspan="2">は2列にまたがるセルを作成します。

<TD colspan=X>内容1</TD>

Xには,いくつかの横方向のセルにわたる数字を入れます。

colspan属性を使ったサンプル

<TABLE border="1">
<TD colspan="2">内容1</TD>
<TD>内容2</TD>
<TR>
<TD>内容3</TD>
<TD>内容4</TD>
<TD>内容5</TD>
<TR>
</TABLE>

出力結果
内容1 内容2
内容3 内容4 内容5

複数列にわたるセルを作る:rowspan="値"

rowspan属性はセルの列にまたがる数を指定できます。このタグはTHまたはTDで使用します。例えば、<TD rowspan="2">は2行にまたがるセルを作成します。

<TD rowspan=X>内容1</TD>

Xには,いくつかの縦方向セルの幅にわたる数字を入れます。

rowspan属性を使ったサンプル

<TABLE border="1">
<TD rowspan="2">内容1</TD>
<TD>内容2</TD>
<TD>内容3</TD>
<TR>
<TD>内容4</TD>
<TD>内容5</TD>
<TR>
</TABLE>

出力結果
内容1 内容2 内容3
内容4 内容5

Comment

コメントを残す

メールアドレスが公開されることはありません。

リズムファクトリーはホームページの制作会社です。
ホームページ制作に関するご要望・ご相談はこちらからどうぞ。