HOMEへ   ホームページを作ろう |レンタルサーバいろいろ
TOPB B SScriptPCMY-LOG

作 成

作 成 2

基礎知識

装 飾 術

<<前へ  |123456789101112131415|  次へ>>

「激安ガーデン通販」では、只今期間限定セール開催中! [PR]

● 表の整形

・表の配置

表を画面上のどこに配置するかを設定するのに、『align』属性を使用します。
この属性は、表の位置を記事に対して設定するのに使用し、属性値は以下より選びます。
left:表を記事の左側に配置します。
center:表を記事の中央に配置します。
right:表を記事の右側に配置します。
この属性は非推奨となっており、配置はCSSのプロパティ、マージン(margin)を使用ます。 中央に配置するための値『auto』は最新のブラウザでサポートされています。 ただしNetscape7.0ではキャプションがセンターリングされません。

中央に配置されるテーブル例(align)
見出し1見出し2見出し3見出し4
1行0列1行1列1行2列1行3列
1行0列1行1列1行2列1行3列
中央に配置されるテーブル例(auto)
見出し1見出し2見出し3見出し4
1行0列1行1列1行2列1行3列
1行0列1行1列1行2列1行3列

<TABLE border align="center" summary="TABLE要素の表示例です。この表は中央に配置されます。">
・・・省略(↑各セルは通常の表と同じように書いてあります。)

・セルの結合

表の作成に置いて、複数の行又は列をまたぐセルが必要な場合は、 『rowspan』属性『colspan』属性を使用してセルを結合します。
rowspan』属性は結合したい行の数を設定し、設定した数のセルが結合されます。 通常は1で、結合していない状態です。 『colspan』属性は結合したい列の数を設定し、設定した数のセルが結合されます。 通常は1で、結合していない状態です。
0を設定するとそのセルから終了するセルまでを結合するらしいのですが・・・??

テーブル例
見出し1見出し2見出し3見出し4
0行0列/0列1行0行1列0行2列/0行3列
1列1行1行2列/1行3列
2行2列/2行3列
2行0列2行1列

<TABLE border summary="TABLE要素の表示例です">
<CAPTION>テーブル例</CAPTION>
<TR><TH>見出し1</TH><TH>見出し2</TH><TH>見出し3</TH><TH>見出し4</TH></TR>
<TR><TD rowspan="2">0行0列/0列1行</TD><TD>0行1列</TD><TD colspan="2">0行2列/0行3列</TD></TR>
<TR><TD>1列1行</TD><TD colspan="2" rowspan="2">1行2列/1行3列<BR>2行2列/2行3列</TD></TR>
<TR><TD>2行0列</TD><TD>2行1列</TD></TR></TABLE>

rowspan』属性『colspan』属性を同時に使用すれば行・列を同時に結合できます。
又、TD要素内の記述はBODY要素内と同じように段落などを使用できます。 また、TD要素内にTABLE要素を記述する(TABLE要素を入れ子にする)ことも可能です。

○セルのマージン

cellspacing属性は、セルの周辺の空き具合を設定します。 つまりセルとセルの間隔及び、セルと表の外枠の間隔を調整するのに使用します。
cellpadding属性は、セルの枠線とその中の記事の間隔を設定します。 この属性の属性値にピクセル単位を使用した場合、枠線はその値分だけ記事から離れます。 また、この属性値にパーセント値を使用した場合、 上下方向に関しては、利用可能な垂直方向空間に基づく割合に応じて、等しく記事から離れ、 又、同様に左右方向に関しても、利用可能な水平方向空間に基づく割合に応じて、等しく記事から離れます。

見出し1見出し2見出し3見出し4
0行0列0行1列0行2列0行3列

<TABLE border="1" cellspacing="10" cellpadding="10%">
<TR><TH>見出し1</TH><TH>見出し2</TH><TH>見出し3</TH><TH>見出し4</TH></TR>
<TR><TD>0行0列</TD><TD>0行1列</TD><TD>0行2列</TD><TD>0行3列</TD></TR>
</TABLE>

表又はある列に対して固定の幅が設定されている場合、 cellspacing属性又はcellpadding属性の設定によって設定した幅以上の空間を必要とすることがありえます。 このような衝突が起きた場合、両属性の設定をwidth属性より優先するか、否かはブラウザに依存されます。

・文字の折り返し

セルに表示される文章がウィンドウの幅などブラウザの都合によって 折り返されてしまうことを抑制する属性として、 『nowrap』属性(属性値はありません)が定められています
セルに表示される文章がウィンドウの幅などブラウザの都合によって 折り返されてしまうことを抑制する属性として、 『nowrap』属性(属性値はありません)が定められています

<TABLE border="1">
<TR><TD nowrap>
セルに表示される文章がウィンドウの幅などブラウザの都合によって 折り返されてしまうことを抑制する属性として、 『<SPAN class=impo>nowrap</SPAN>』属性(属性値はありません)が定められています
</TD></TR>
</TABLE>

下がTD要素に『nowrap』属性を記述しています。 ただし、nowrap属性は現在は推奨されない属性となっています。
また、セルの幅や高さはスタイルシートの『width/height』によって設定するようになっています。

・表の方向

表には方向があります。
通常は左上が0行0列にあたりますが、 dir』属性を使用し、『rtl』(右から左)を設定すると、右上が0行0列になります。 この属性は表全体に対して設定されるものです。
又、この属性はセルの文字方向に対しても影響しますが、 個々のセルの文字方向は、各セルに『dir』属性を設定することで転換できます。

右から左に方向を持つテーブル例
見出し1見出し2見出し3見出し4
0行0列0行1列0行2列0行3列
1行0列1行1列1行2列1行3列

<TABLE border summary="TABLE要素の表示例です。右から左に方向を持つ表です。" dir="rtl">
<CAPTION>右から左に方向を持つテーブル例</CAPTION>
<TR><TH>見出し1</TH><TH>見出し2</TH><TH>見出し3</TH><TH>見出し4</TH></TR>
・・・省略(↑各セルは通常の表と同じように書いてあります。)

<<前へ  |上へ|  次へ>>
123456789101112131415

通信講座であなたもスキルアップ!学ぶ喜びが味わえる詳しい講座案内書を無料送呈中!

TOP] [HOME

更新日時:2014/08/09