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の」略 ★ テーブル枠のスタイル（枠の幅と枠の色）
・・・テーブル枠の色 >> bordercolor （ ie独自 ）
"テーブル"を作成するときは、<table要素>を使います。
<table要素>〜</table要素>の中に
テーブルの行を表す<tr></tr>>タグを記述し、更に<tr></tr>タグの中に、テーブルの列を表す<td></td>タグを記述します。
"table、tr、td"タグは、必ずセットで記述します。
<td>タグは、セルと呼ばれています。
<table>〜<table>タグで挟まれた前後は、要素特性により段落します。
▼
テーブルの枠線表示は[border属性]に"数値"を設定します。（単位＝ピクセル）
★但し、HTML定義HTML4.01における[border属性]は[table要素]の枠線表示、非表示の属性として利用できますが、それ以外は非推奨属性です。
[table要素のborder属性]以外 >> スタイルシート設定推奨
・・・border="1"の場合 （border="0"は、枠線非表示）
▼
|←←←←←←←←←←← 要 素 →→→→→→→→→→→|
↓要素名 ↓行 ↓列 ↓要素内容
<table border="1"><tr><td>未知の苦</td></tr></table>
|←←属性→→|
|-値-|
▼
■border="3" （１行２列の例）
□ソース表示
<table border="3">
<tr>
<td>未知の苦HTML解道</td>
<td>万年初心者脱却紀行</td>
</tr>
</table>
▼
■border="5" （２行１列の例）
□ソース表示
<table border="5">
<tr><td>未知の苦HTML解道</td></tr>
<tr><td>万年初心者脱却紀行</td></tr>
</table>
▼
■テーブル枠の色指定その１ >> [bordercolor属性]
IE＝○対応 ネスケ＝△不完全対応・・・ IE独自の属性
[bordercolor属性]は枠線全体の指定
>> 色の指定方法 >> フォントの色を指定する方法
(b) 未知の苦HTML解道
| 収集したHTML定義（ルール）の備忘録 |
| フリーWEB素材を基に実践体験リポート |
□ソース表示
(a)の作例 border="4" bordercolor="#99cccc"
<table border="4" bordercolor="#99cccc">
<caption>未知の苦HTML解道</caption>
<tr>
<td>url</td><td>www14.plala.or.jp/hrm/</td>
</tr>
<tr>
<td>管理人</td><td>Yah!</td>
</tr>
</table>
□ソース表示
(b)の作例 border="5" bordercolor="#ff9900"
<table border="5" bordercolor="#ff9900">
<caption style="caption-side:bottom;">
未知の苦HTML解道
</caption>
<tr>
<td>収集したhtml定義（ルール）の備忘録</td>
</tr>
<tr>
<td>フリーWEB素材を基に実践体験リポート</td>
</tr>
</table>
◆フォントサイズの指定
サイズ指定・・・絶対サイズまたは相対サイズ
▼
注：以下、最後尾に至る記事中に出没するNN=ネットスケープ
またはネスケ云々の記述はNNブラウザのサポート終了
（2008年2月）に伴い読み飛ばして下さい。{2015.11.18加筆}
■(a)と(b)の作例におけるIEとネスケの違い
bordercolorを指定すると、IEとネスケでは、見え方が違います。
まず、IEで指定した色指定値が、ネスケでは、その指定値をライト系というか、パステル系の色に変貌？させてしまいます。
IEでは、全辺が平面で表示されますが、ネスケは、通常のborder指定と同様の額縁風に表示され、色指定の効果は、上辺枠と左辺枠のみとなります。
（右辺枠と下辺枠は、上辺枠と左辺枠で表示された色のダーク系色）
また、ネスケは、border="4"からテーブルの枠幅と色がハッキリします。
■ネスケでも、IEのように表示させる施策
[bordercolor属性] >> IE独自の属性・・・これが問題の根幹
[table要素]に枠＝罫線の色を指定する[bordercolor属性]は、IE独自の属性です。そのため、ネスケの場合、[bordercolor属性]では、IEと同様の表示にはなりません。
ネスケでも、IEのように表示できないか、スタイルシートの代替記述により施策してみます。
代替記述は、TABLE要素に枠線のスタイルや色の属性とその値をインラインスタイルで直接記述します。
▼
[border-color属性] >> ○○○・・・問題点を解消する鍵
枠線の色を指定するスタイルシートの属性は[border-color属性]です。
（borderとcolorの間にハイフンが入ります。）
・・・更に[border-style属性 と border-width属性]の記述
IE、ネスケ共に[border-color属性]だけでは枠線が表示されません。
IEは、枠線の種類を指定するborder-style属性を書き加え、更にネスケは、枠線の幅を指定するborder-width属性を書き加えます。
テーブル枠の色指定に関する[border-color属性]の値は、次のとおりです。
border-color属性の値と反映箇所
| 属性の値 | 反 映 箇 所 |
|---|
| 一つ | 四辺（上下左右）共通色 |
| 二つ | "上下"と"左右"に指定した色を反映 |
| 三つ | 上と"左右"と下の順に指定した色を反映 |
| 四つ | 上、右、下、左の順に指定した色を反映 |
▼
★上述の[(a) 未知の苦HTML解道]を代替記述してみます。
(a)の場合、四辺全て同じテーブル枠ですから[border-color属性]の値は一つです。
枠線の種類・・・一本罫線 >> solid →border-style:solid;
枠線の幅その１・・・テーブルの外枠 >> border-width:4px;
枠線の幅その２・・・<td>タグ（セル）の枠 >> border-width:1px;
枠線の色・・・border-color:#99CCCC;
▼
未知の苦HTML解道
| URL | www14.plala.or.jp/hrm/ |
| 管理人 | Yah! |
□ソース表示
<table style="border-style:solid;border-width:4px;
border-color:#99cccc;" summary="作例">
<caption> 未知の苦HTML解道</caption>
<tr>
<td style="border-style:solid;border-width:1px;
border-color:#99cccc;">url</td>
<td style="border-style:solid;border-width:1px;
border-color:#99cccc;">www14.plala.or.jp/hrm/</td>
</tr>
<tr>
<td style="border-style:solid;border-width:1px;
border-color:#99cccc;">管理人</td>
<td style="border-style:solid;border-width:1px;
border-color:#99cccc;">Yah!</td>
</tr>
</table>
上記作例の場合、IEとネスケ共に同じ表示になりましたが、[table要素]と４箇所の<td>タグに、スタイルファイル記述をしなければなりません。
このように反復する記述が多いときは予め外部、あるいはHTML構文の[body]内に、スタイルファイルを設定し、その設定を呼び出すことで記述の手間を軽減することができます。 >> [class属性]の記述設定*
▼
■テーブル枠の色指定その２・・・「辺と辺」の色変更
（「 ）辺の色指定は rbodercolorlight
（ 」）辺の色指定は bordercolordark
IE＝○対応 ネスケ＝×無視・・・ IE独自の属性
(c) bordercolorlightの例
| URL | www14.plala.or.jp/hrm/ |
|---|
| 管理人 | Yah! |
|---|
(d)borderdarkの例
| Main Contents |
|---|
| 収集したHTML定義（ルール）の備忘録 |
| フリーWEB素材を基に実践体験リポート |
▼
(e) (c)と(d)の組合せ例
| URL | www14.plala.or.jp/hrm/ |
|---|
| 管理人 | Yah! |
|---|
□ソース表示
(c)の作例 bordercolorlight="#FF9900"
<table border="5" bordercolorlight="#ff9900">
<caption>未知の苦HTML解道</caption>
<tr>
<th>URL</th><td>www14.plala.or.jp/hrm/</td>
</tr>
<tr>
<th>管理人</th><td>Yah!</td>
</tr>
</table>
(d)の作例 bordercolordark="#99cccc"
<table border="5" bordercolordark="#99cccc">
<caption style="caption-side:bottom">
未知の苦HTML解道
</caption>
<tr>
<th>Main Contents</th>
</tr>
<tr>
<td>収集したHTML定義（ルール）の備忘録</td>
</tr>
<tr>
<td>フリーWEB素材を基に実践体験リポート</td>
</tr>
</table>
(e)の作例 （組合せ）
bordercolorlight="#99cccc" bordercolordark="#ff9900"
<table border="5" bordercolorlight="#99cccc" bordercolordark="#ff9900">
<caption>未知の苦HTML解道</caption>
<tr>
<th>URL</th><td>www14.plala.or.jp/hrm/</td>
</tr>
<tr>
<th>管理人</th><td>ah!</td>
</tr>
</table>
▼
★IE独自の[bordercolorlightとbordercolordark]の組合せをスタイルシートの代替記述により施策してみます。
作例の(e)のような場合、（「 ）辺と（ 」 辺をそれぞれ共通色にするために指定する[border-color属性]の値は四つです。
（上、右、下、左の順に色の値を反映）
枠線の種類・・・一本罫線 >> solid →border-style:solid;
枠線の幅その１・・・<table>タグの外枠 >> border-width:5px;
枠線の幅その２・・・<td>タグの枠 >> border-width:1px;
枠線の色その１・・・<table>タグの外枠
border-color:#99CCCC #FF9900 #FF9900 #99CCCC;
枠線の色その２・・・<td>タグの枠
border-color:#FF9900 #99CCCC #99CCCC #FF9900;
▼
未知の苦HTML解道
| URL | www14.plala.or.jp/hrm/ |
| 管理人 | Yah! |
□ソース表示
<table style="border-style:solid;border-width:5px;
border-color:#99cccc #ff9900 #ff9900 #99cccc;" summary="作例">
<caption> 未知の苦HTML解道</caption>
<tr>
<td style="border-style:solid;border-width:1px;
border-color:#ff9900 #99cccc #99cccc #ff9900;">
url</td>
<td style="border-style:solid;border-width:1px;
border-color:#ff9900 #99cccc #99cccc #ff9900;">
www14.plala.or.jp/hrm/</td>
</tr>
<tr>
<td style="border-style:solid;border-width:1px;
border-color:#ff9900 #99cccc #99cccc #ff9900;">
管理人</td>
<td style="border-style:solid;border-width:1px;
border-color:#ff9900 #99cccc #99cccc #ff9900;">
Yah!</td>
</tr>
</table>
上記作例も、IEとネスケ共に同じ表示になりましたが、[table要素]と４箇所の<td>タグにスタイルファイル記述をしなければなりません。
このように反復する記述が多いときは予め外部、あるいはHTML構文の[bofy]内に、スタイルファイルを設定し、その設定を呼び出すことで記述の手間を軽減することができます。 >> [class属性]の記述設定
▼
★ <table>タグは音声ブラウザの読み上げに配慮
>> [summary属性]の記述・・・summary とは「概要」の意
外見上は普通の"table"ですが、音声ブラウザの読み上げに配慮し、<table>>タグの"目的や内容"を表す[summary属性]を書き加えています。
下記作例ソース中[border属性とその値]のスタイルファイルを「簡略化」して記述しています。 スタイルシートの簡略化
□ソース表示
<table style="border:solid 3px #ccc; summary="表サンプル"
<tr>
<td>未知の苦HTML解道</td>
</tr>
</table>
■ブロックレベル要素とインラインレベル要素
The Web KANZAKI様 TOP | やや詳しい目次 |
インターネットやコンピュータの話 | HTMLの説明 >>
簡単なHTMLの説明 | ２文書の骨格となる基本要素 >>
文書の骨格をかたちづくる基本要素 | ブロックとインライン >>
ブロックレベル要素とインライン要素
|
