スタイル設定シリーズ 第５回

「テーブル」と「枠のいろいろ」

    　 （当ページの中に、私の一人よがりの記事等があります。実行に当たっては各自の責任でお願いいたします。)
    便利ツール・サイトへご案内
  1. エキサイト辞書： 研究社新英和・和英中辞典（英和コンピュータ用語辞典有）
  2. The Web Class著： タグの解説と入力練習　入力ｈｔｍｌソースをその場でWeb表示
  3. 大藤幹著：カラーチャート(指定方法→名前が定義されている色)及び HTMLテンプレート

「HTML」の基本構文と「teble」について

1. IE、NN 等ブラウザが表示する部分(画面表示)は、<body>〜</body> 間に記述します。
2. <TABLE>〜</TABLE>間にテーブル関連「タグ」と内容（＝情報）を記述します。

<HTML>
<HEAD>
<TITLE>テーブル作成</TITLE>
</HEAD>
<BODY>

<TABLE>〜</TABLE>

</BODY>
</HTML>

テーブルで使用する「基本タグ４種」と説明

　<TABLE>〜</TABLE> 　テーブル開始タグと同終了タグ
　<caption>〜</caption> テーブルのタイトル(参照：下表赤書き) (注：<table>の下に記述します｡)
　<TR>〜</TR> 　　　　行開始タグと行終了タグ
　<TD>〜</TD> 　　　　セル開始タグと終了タグ
　 （注：但し最上の行､最左の列を見出し文字にする場合には<TD></TD>に替えて<TH>〜</TH>を使用します｡

「テーブル」表示の構文（３行、３列の場合）

　<tr> <th> <td>　を入れた形が下記です。
　　注）表の形を見るためには<table border="1"> の記述が必要です。

<html>
<head>
<title>テーブル作成</title>
</head>
<body>

　<table border="1">
　<TR><th>Ａ</th><th>Ｂ</th><th>Ｃ</th></TR>
　<TR><TD>あ</TD><TD>い</TD><TD>う</TD></TR>
　<TR><TD>イ</TD><TD>ロ</TD><TD>ハ</TD></TR>
　</TABLE>

</body>
</html>

○ソース上では、下記の形で表示されていることが多いようですが、同じ事です。

<html>
<head>
<title>テーブル作成</title>
</head>
<body>

<table border="1">
　<tr>
　　<th>Ａ</th>
　　<th>Ｂ</th>
　　<th>Ｃ</th>
　</tr>

　<tr>
　　<td>あ</td>
　　<td>い</td>
　　<td>う</td>
　</tr>

　<tr>
　　<td>イ</td>
　　<td>ロ</td>
　　<td>ハ</td>
　</tr>
</table>

</body>
</html>

になります。これで３行、３列の枠だけができました。あとは、<td>〜</td>間に文字、 画像等の情報を自由に入力することになります。

そうして、それらの情報の見映え、装飾は「属性」によって指示され「値」によって「実施」 されます。テーブルに使用される「属性」及び「値」は下表のとおりです。



「表組み（で使用する）HTMLタグ一覧」
要素 属性 属性値 内容 語源･訳
TABLE . . </table>までが表組みの記述ですと宣言 Table：表
align ="left"
="center"
="right"		 左右、センターの位置指定 Alignment
：整列
border ="n"
(一つの表でただ一箇所)		 ｎは変数(10進数の任意の数｡以下同じ)
罫線の太さを指定(０は罫線の表示無し)		 ：縁、縁取る
cellspacing ="n"
(一つの表でただ一箇所)		 セルとセルの間隔を指定 ：スペースをとる
周囲のセルとの間隔
cellpadding ="n"
(一つの表でただ一箇所)		 セル内容とセル枠の間隔を指定 ：詰め物をする
テキスト等右送り
width ="n"
="n%"		 枠全体の横巾を指定 ：巾
height ="n"
="n%"		 枠全体の縦巾を指定 ：高さ
bgcolor ="#rrggbb" セルの背景色を指定 BackGround colorの略
bordercolor ="#rrggbb" 枠の色を指定 ：縁色
background ="url" 背景イメージのURLを指定 ：埋め込まれる「地」を指す
URL;フアイルのアドレス
CAPTION ・ ・ 表のキャプション ：表題
align ="top"
="bottom"		 表示位置を指定 ：表の上に
：表の下に
TH . . 表上行と左列の見出 Table Headerの略
TR . . 列を定義する。　<tr></tr>を繰り返す
毎に、一つの表の中で改行が行われる。		 Table Rowの略
align TABLEと同じ 左右方向の表示位置を指定 .
valign ＝”top”
="middle"
="bottom"		 上下方向の表示位置を指定 .
bgcolor ="#rrggbb" . #rrggbb：カラーナンバー
bordercolor ="#rrggbb" . .
background ="url" . .
TD . . セルを定義する。<td><td>を繰り返す
す毎に、一つの表の中に列が生じる。		 Table　Dateの略
width TABLEと同じ セルの横幅を指定 .
height 　〃 セルの縦幅を指定 .
align 　〃 セル内オブジェクトの左右位置を指定 .
valign TRと 同じ セル内オブジェクトの上下位置を指定 .
bordercolor 〃 セル枠の色を指定 ..
bgcolor 〃 セルの背景色を指定 .
background 〃 セルの背景イメージをURLで指定 .
rowspan ="n" 縦列またがり指定 Span：またがる
colspan ="n" 横セルまたがり指定 .
nowrap . セル内の文字改行を禁止 .
また、上表以外に、ブラウザの持つ「属性」に次のものがあります。
IEのみ適用
bordercolorloght
bordercolordark
rules
frame
background

NNのみ適用
hspace
vspace

　　　<TD>〜</TD> タグにＡＢＣ等内容を入れました。
　　　今度は 「border="1"」が無くても確認できます。

<TABLE>
　<TR>
　　<TH>Ａ</TH>
　　<TH>Ｂ</TH>
　　<TH>Ｃ</TH>
　</TR>

　<TR>
　　<TD>あ</TD>
　　<TD>い</TD>
　　<TD>う</TD>
　</TR>

　<TR>
　　<TD>イ</TD>
　　<TD>ロ</TD>
　　<TD>ハ</TD>
　</TR>
</TABLE>
　　　上の「table」部分は下表になります。
Ａ Ｂ Ｃ
あ い う
イ ロ ハ

テーブルの枠のいろいろ

今回は「BODY部」の設定で、各 <td> タグに直接スタイルを設定しました。
下の小さな表に「スタイル」の設定ですが、なんと大変身しました。

Ａ Ｂ Ｃ
あ い う
イ ロ ハ
　
Ａ：　丸点線(dotted) Ｂ：　荒点線(dashed) Ｃ：　実　線(solid)
あ：　二重線(double) い：　谷　線(groove) う：　山　線(ridge)
イ：　内　線(inset) ロ：　外　線(outset) ハ：　線無し(none)

編集後記：今回はテーブルの罫線というよりは、<td> の領域枠に「スタイル」を設定し、 いろいろな枠を作ったことです。また、<head> ないの「セレクタ（body, p, div, h2, h3, table, caption）」の共通仕様部分ー背景色、文字色、書体、Margin を 「body」セレクタにまと めました。

トップへ戻る     スタイルシート目次へ戻る

inserted by FC2 system