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

作 成

作 成 2

基礎知識

装 飾 術

<<前へ  |123456789101112131415|  次へ>>

COACHのバッグ・財布・小物を厳選 [PR]

● 表の作成

表を作成するためのTABLE要素ですが、しばしば、 当たり前のようにTABLE要素が『レイアウト枠』として使われています。 これは基本的に誤りです。TABLEは表を作成するための要素です。 利用方法としては便利なのですが、表は画面への表示処理が複雑で通常(というか間違いなく) 通常の要素を使用して出力される記事より表示されるまでに時間がかかります。
最近はブロードバンド時代なので多少重たいページを作ったって構わないだろうという理由でTABLE要素を使うのは認識不足です。 TABLE要素は画像と違って回線の速度よりも、パソコン(ソフトウェア)の性能が大きく関わります。 要素を要素で挟み込む『入れ子』をTABLE要素でやっていくと、この問題が顕著に現れるでしょう。
==実験用==
恐怖のTABLE要素(数編)
恐怖のTABLE要素(ネスト編)

・表の出力

表は基本となるTABLE要素内に、『表題(CAPTION)』、『行(TR)』、『セル(TD)』など、表に関する要素を複数使用して表示されます。
しかし、上に書いてあるとおり、表はそのすべてのデータを読込み、 レイアウトを決めた後、画面への出力を開始するため、画面に表示されるまでに時間がかかります。 これをCSSのプロパティ『table-layout』により早くすることが出来ます。
通常の値は『auto』で、テーブル(表)全体を読み込んでから、 各縦列の幅を決定して表示します。
値を『fixed』とすると、最初の1行を読み込んだ時点で、 各縦列の幅を決定して表示を開始します。
そのため、スムーズに表を表示していきますが、1行目で表全体の各列の幅が決定するため、 この設定をする際には最初の行で各セルの幅を決定する必要があります。 基本となるのはTABLE要素に以下のように記述します。

<TABLE style="table-layout:fixed">

行によって記事の量が一定ではない表では、 2行目以降のレイアウトがおかしくなる可能性があります。

・表のタイトル

表は視覚的に表現されるものなので、音声システムなどの非視覚系ブラウザでは表現できません。
そこで、summary』属性を用いて表の目的や構造など表の要約を伝えることができます。

表に題目がある場合は、『CAPTION』要素によって記述することができます。
ただし、CAPTION要素はTABLE要素の開始タグの直後に記述します。 そして、1つのTABLE要素には、1つのCAPTION要素しか存在してはいけません。 これにより、表の構造や内容、目的を伝えることができます。
しかし、表題だけでは、音声システムなどの非視覚系ブラウザでは、その意図が十分に伝えることができません。 従って、TABLE要素のsummary属性を併用して、表の目的や構造になどの情報を補足しておくようにする必要があります。 summary属性は、表題(CAPTION要素)の存在しない表では、得に重要になります。

・キャプションの位置(Netscape/Opera)

CSSのプロパティ『caption-side』で、テーブル(表)のキャプションの位置を設定することができます(Netscape/Opera)。 値は以下の通りで、値によって上下左右を決めます。
top:テーブル(表)の上に表示します。通常はこの形です。
bottom:テーブル(表)の下に表示します。
left:テーブル(表)の左に表示します。
right:テーブル(表)の右に表示します。
※↓Opera6で『left』を設定すると表題が消えます。Netscape7では『bottom』以外確認できませんでした。

キャプションの位置
0行0列0行1列

<caption style="caption-side:right">キャプションの位置</caption>

・表の幅

表の幅は特に設定せずそのまま表示すると、セル内に表示される文字にあわせて、ブラウザによって自動的に決定されます。 表全体の幅を設定するには、『width』属性により幅を設定しなくてはいけません。 値がパーセントの場合はその時のウィンドウ幅の割合となります。
TABLE要素の幅は、width属性は非推奨となっていませんが、 本来ならスタイルシートのwidthプロパティで設定すべきと考えられます。

テーブル例(50%)
0行0列0行1列0行2列0行3列
テーブル例(100%)
0行0列0行1列0行2列0行3列

<TABLE border summary="TABLE要素、幅を50%にした表示" width="50%">
<CAPTION>テーブル例(50%)</CAPTION>
<TR><TD>0行0列</TD><TD>0行1列</TD><TD>0行2列</TD><TD>0行3列</TD></TR>
</TABLE>

・セルを表示する

表は行とその中に作られるセル(マス)によって成り立ちます。 文章を記述するとき、段落ごとにP要素を記述するように、 表を作成するときにも行・セルごとに表の行を意味するTR要素(table_row)、 表のセルを意味するTH要素(table_header_cell)やTD要素(table_data_cell) を記述します。
セルを表示する場合、その線の太さを『border』属性によって設定します。 設定しない場合は『0』(線無し)となります。
なお、TH要素、TD要素、TR要素は終了タグを省略することができます。

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

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

表のセルには、見出しとなる文字とデータとなる文字、2種類の情報があると考えられるでしょう。
TH要素は、文字を見出し情報として表示するための要素で、 視覚系ブラウザでは見出しセル内の文字を太く表示するなどし、 音声ブラウザ等では見出しの情報を他とは異なる声調で表現します。
それ以外の通常の情報(データ)はTD要素を使用します。
なお、セルは、情報のない空の状態があっても良いとされています。

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

広告掲載で簡単収入!!登録無料のアフィリエイトプログラムなら導入は安心。
Click Here! リンクシェア アフィリエイト紹介プログラム http://draft.j-a-net.jp/banner/NEXT アクセストレード
アフィリエイトプログラム比較

TOP] [HOME

更新日時:2014/08/09