HTML文書は、テキスト内容を"見出し要素" "段落要素" "リスト要素" "リンク要素（ハイパーリンク）"などの"要素"とする考え方を基に、それぞれの要素をタグで囲む（マークアップにより書き表す）文書構造になっています。
■ブロックレベル要素とは・・・？
ひとつのブロック（まとまり）から構成される要素の名称です。
ブロックレベル要素の前後は、要素特性により、段落または改行されます。
■ブロックレベル要素群（abc順）
<address> <blockquote> <center> <div> <dl>
<fieldset> <form> <h1〜h6> <hr> <noframes> <noscript>
<ol> <p> <pre> <table> <ul>
▼
★ テーブルの作成 >> TABLE要素・・・セル次第で縦横無尽
★ テーブルの構成は、 TABLEタグ内にTRタグ＋TDタグを記述する
<TR> ＝Table Rowの略 ＋ <TD> ＝Table Dataの略
★ 横方向にセルを連結＝COLSPAN属性
★ 縦方向にセルを連結＝ROWSPAN属性
"テーブル"を作成するときは、<TABLE>要素を使います。
<TABLE要素>〜</TABLE要素>の中に
テーブルの行を表す<TR></TR>タグを記述し、更にTRタグの中に、テーブルの列を表す<TD></TD>タグを記述します。TABLE、TR、TDタグは、セットになります。
TDタグは、セルと呼ばれています。
<TABLE>〜<TABLE>タグで挟まれた前後は、要素特性により段落します。
▼
テーブルの枠線表示は、BORDER属性＝"数値"を設定します。（単位＝ピクセル）
★但し、HTML定義HTML4.01におけるBORDER属性は、TABLE要素の枠線表示、非表示の属性として利用できますが、それ以外は非推奨属性です。
>> スタイルシート設定推奨
・・・BORDER="1"の場合 （BORDER="0"は、枠線非表示）
▼
|←←←←←←←←←← 要 素 →→→→→→→→→→→|
↓要素名 ↓行 ↓列 ↓要素内容
<TABLE BORDER="1"><TR><TD>未知の苦..</TR></TABLE>
|←←属性→→|
|-値-|
▼
縦方向にセルを連結 >> ROWSPAN属性と連結したいセル数を指定。
横方向にセルを連結 >> COLSPAN属性と連結したいセル数を指定。
▼
■整列した表・・・（ROWSPAN属性 COLSPAN属性の指定無し）
整列した表
| 1行目左 | 1行目右 | | 2行目左 | 2行目右 |
| 3行目左 | 3行目右 | | 4行目左 | 4行目右 |
| 5行目左 | 5行目右 | | 6行目左 | 6行目右 |
| 7行目左 | 7行目右 | | 8行目左 | 8行目右 |
▼
■セルを連結した表(1-a)
セルを連結した表(1-a)
| 左側段数 | 右側段数 |
|---|
| 1行目左 | 1行目右 | | 2〜5行目左 | 2行目右 |
| 3行目右 | | 4行目右 |
| 5行目右 | | 6〜7行目左 | 6行目右 |
| 7行目右 | | 8行目左右 |
セルの連結は、ROWSPAN属性やCOLSPAN属性を使います。
縦方向にセルを連結
THタグ（見出し）やTDタグ（セル）にROWSPAN属性と連結したいセル数を指定。
横方向にセルを連結
THタグ（見出し）やTDタグ（セル）にCOLSPAN属性と連結したいセル数を指定。
作例の"セルを連結した表(1-a)"は"整列した表"の
左の列「2行目左〜5行目左を縦方向に4連結」
左の列「6行目左と7行目左を縦方向に2連結」
「8行目左右を横方向に連結」
しています。
作例のような場合、ROWSPAN属性やCOLSPAN属性は、セルの連結数を指定する関係から、連結されるセル部分は無用となり、縦（横）方向のセルは削除します。
□セルを連結した表(1-a)のソース表示
<TABLE BORDER="1" width="180" summary="tablesample">
<CAPTION>セルを連結した表(1-a)</CAPTION>
<TR><TH>左側段数</TH><TH>右側段数</TH></TR>
<TR><TD>1行目左</TD><TD>1行目右</TD></TR>
<TR><TD ROWSPAN="4">2〜5行目左</TD>
<TD>2行目右</TD></TR>
<TR><TD>3行目右</TD></TR>
<TR><TD>4行目右</TD></TR>
<TR><TD>5行目右</TD></TR>
<TR><TD ROWSPAN="2">6〜7行目左</TD>
<TD>6行目右</TD></TR>
<TR><TD>7行目右</TD></TR>
<TR><TD COLSPAN="2">8行目左右</TD></TR>
</TABLE>
▼
"セルを連結した表(1-a)"の左列と非対称になるよう、右列の「2〜4行目右を3連結」 「5〜7行目右を3連結」に設定すると、行数の骨格部分<TR>タグが無視され、表全体が縦に収縮してしまいます。
非対称な表(1-b)
| 左側段数 | 右側段数 |
|---|
| 1行目左 | 1行目右 |
| 2〜5行目左 | 2〜4行目右 |
|
|
| 5〜7行目右 | | 6〜7行目左 |
|
| 8行目左右 |
▼
ここから先の応用は、確たる根拠を見いだせず、管理人が七転八倒の末に、ひねり出した粗悪品？です。
文法違反何のその、独断と偏見に満ちた解釈と御理解下さい。
セルを連結した表(1-a)における行数の骨格部分<TR>タグを継承させ、"非対称な表(1-b)"の左列「2〜5行目左」と「6〜7行目左」のセルに、高さの属性"HEIGHT"を指定してみます。
HEIGHTの数値は、色々試してみましたが、ここでは、「2〜5行目左」を"75"に、「6〜7行目左」を"35"にしました。
非対称な表(1-b改)
| 左側段数 | 右側段数 |
|---|
| 1行目左 | 1行目右 |
| 2〜5行目左 | 2〜4行目右 |
|
|
| 5〜7行目右 | | 6〜7行目左 |
|
| 8行目左右 |
□非対称な表(1-b改)のソース表示
<TABLE BORDER="1" WIDTH="180" summary="表サンプル">
<CAPTION>非対称な表(1-b改)</CAPTION>
<TR><TH>左側段数</TH><TH>右側段数</TH></TR>
<TR><TD>1行目左</TD><TD>1行目右</TD></TR>
<TR><TD ROWSPAN="4" HEIGHT="75">2〜5行目左</TD>
<TD ROWSPAN="3">2〜4行目右</TD></TR>
<TR></TR><TR></TR>
<TR><TD ROWSPAN="3">5〜7行目右</TD></TR>
<TR><TD ROWSPAN="2" HEIGHT="35">6〜7行目左</TD></TR>
<TR></TR>
<TR><TD COLSPAN="2">8行目左右</TD></TR>
</TABLE>
▼
下記の表は、当サイト公開当時のTOPページを再現したレイアウトです。
下記のようなレイアウトを目的としたTABLEタグの使い方は、本来の"表を作成する"という定義から、
かけ離れてしまい、褒められたモノではないようです。
当サイトにおける実際のTOPページは、大枠のTABLEタグに、パーツ用のTABLEタグを何点か組み込んだレイアウトになっております。（汗）
サイト公開当時のレイアウト再現
| 未知の苦HTML解道 |
HTML Rule
Memor@adum
★推奨環境★ | infometion
what's new |
|
|
| 雑記etc |
累計
本日
昨日 |
|
| © Yahcom, all right reserved, 2004. |
□サイト公開当時のレイアウト再現・・・（汗）のソース表示
<TABLE BORDER="0" WIDTH="270" BGCOLOR="#4A76A2" CELLSPACING="1"
SUMMARY="表サンプル">
<CAPTION>未知の苦HTML解道</CAPTION>
<TR>
<TD BGCOLOR="#B6CADE"></TD>
<TD BGCOLOR="#E0F1F6">未知の苦HTML解道</TD>
</TR>
<TR>
<TD ROWSPAN="4" HEIGHT="150" BGCOLOR="#FFFFFF" VALIGN="top">
<STRONG> HTML Rule<BR> Memor@adum</STRONG><BR><BR> ★推奨環境★</TD>
<TD ROWSPAN="3" BGCOLOR="#FFFFFF"> infometion<BR><BR> what's new</TD>
</TR>
<TR></TR><TR></TR>
<TR>
<TD ROWSPAN="3" ALIGN="right" VALIGN="top" BGCOLOR="#FFFFFF"> 雑記etc</TD>
</TR>
<TR>
<TD ROWSPAN="2" HEIGHT="50" ALIGN="CENTER" BGCOLOR="#E0F1F6">累計<BR>本日<BR>昨日</TD>
</TR>
<TR></TR>
<TR>
<TD COLSPAN="2" BGCOLOR="#B6CADE">
© Yahcom, all right reserved, 2004. </TD>
</TR>
</TABLE>
■ブロックレベル要素とインラインレベル要素
The Web KANZAKI様 TOP | やや詳しい目次 |
インターネットやコンピュータの話 | HTMLの説明 >>
簡単なHTMLの説明 | ２文書の骨格となる基本要素 >>
文書の骨格をかたちづくる基本要素 | ブロックとインライン >> ブロックレベル要素とインライン要素
|
