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の略
"テーブル"を作成するときは[table要素]を使います。
<table要素>〜</table要素>の中に
テーブルの行を表す <tr></tr>タグを入れ子で記述し、更に<tr>タグの中に、テーブルの列を表す <td></td>タグを入れ子で記述します。
<td>タグは、 セルと呼ばれています。
<table>
<tr>
<td>記述内容によりセルは増加</td>
</tr>
</table>
"table、tr、td"タグは、テーブルを記述する際の必須タグです。記述の順番は不変、且つ必ずセットになります。
<table>〜<table>タグで挟まれた前後は、要素特性により段落します。
先ずは１行１列の作例です。
▼
テーブルの枠線が見えません？？？
テーブルだと判るよう枠線を入れます。 >> [boeder属性]
但し、HTML定義HTML4.01における[border属性]は、[table要素]の枠線表示、あるいは、非表示属性として利用できますが、それ以外は非推奨属性です。
非推奨属性 >> スタイルシート設定推奨
▼
|←←←←←←←←←← 要 素 →→→→→→→→→→|
↓要素名 ↓行 ↓列 ↓要素内容
<table border="1"><tr><td>本文</td></tr></table>
|←←属性→→|
|-値-|
▼
■１行２列の例
□ソース表示
<table border="1">
<tr>
<td>未知の苦HTML解道</td>
<td>万年初心者脱却紀行</td>
</tr>
</table>
■２行１列の例
□ソース表示
<table border="1">
<tr><td>未知の苦HTML解道</td></tr>
<tr><td>万年初心者脱却紀行</td></tr>
</table>
▼
■テーブルの上や下に見出しを表示 >> [caption要素]
captionとは「見出し」の意
■テーブルの見出しのフォントサイズ
IEは,HTML文書のbody全体に設定した値を継承、ネスケは相対数値＝"3"
>> 参照：フォントサイズの単位 相対値指定
■[caption要素]のデフォルト位置
デフォルトはテーブルの上にセンタリング表示
センタリング以外の位置指定
>> 上指定 (align＝"top")、 または 下指定（align＝"bottom"）
但し、[caption要素のalign属性]はスタイルシートの設定を推奨しています。
<caption align="right"> ・・・>> {caption-side: right; }
<caption align="left"> ・・・>> {caption-side: left; }
<caption align="top"> ・・・>> {caption-side: top; }
<caption align="bottom"> ・・・>> {caption-side: bottom;}
IE6は、caption-side の指定をサポートしていません。
ネットスケープ7.1 は △
▼ ▼ ▼
※ 作例に於ける caption-side の指定は機能していません。
▼
未知の苦HTML解道
| URL | www14.plala.or.jp/hrm/ |
| 管理人 | Yah! |
未知の苦HTML解道
| 収集したHTML定義（ルール）の備忘録 |
| フリーWEB素材を基に実践体験リポート |
□ソース表示 テーブルの上に見出し（＝タイトル）
ネスケは、見出しのフォントサイズ＝相対数値の"３"表示
<table border="1">
<caption>未知の苦HTML解道</caption>
<tr>
<td>url</td>
<td>www14.plala.or.jp/hrm/</td>
</tr>
<tr>
<td>管理人</td>
<td>Yah!</td>
</tr>
</table>
□ソース表示 テーブルの下に見出し（＝タイトル）
インラインスタイルにより記述 >> caption-side:bottom;
<table border="1">
<caption style="caption-side:bottom;">
未知の苦HTML解道</caption>
<tr>
<td>収集したHTML定義（ルール）の備忘録</td>
</tr>
<tr>
<td>フリーWEB素材を基に実践体験リポート</td>
</tr>
</table>
▼
■テーブルの行や列を見出し表示 >> [th]タグ
[th]は「Table Header」の略
"見出し"を定義する[th]タグで挟まれたテキストは太字。
こちらもご覧下さい >> 一般的な見出し要素は、H1〜H6要素
未知の苦HTML解道
| URL | www14.plala.or.jp/hrm/ |
|---|
| 管理人 | Yah! |
|---|
未知の苦HTML解道
| Main Contents |
|---|
| 収集したHTML定義（ルール）の備忘録 |
| フリーWEB素材を基に実践体験リポート |
□ソース表示 行見出し
<table border="1">
<caption>未知の苦HTML解道</caption>
<tr>
<th>url</th><td>www14.plala.or.jp/hrm/</td>
</tr>
<tr>
<th>管理人</th><td>Yah!</td>
</tr>
</table>
□ソース表示 列見出し
<table border="1">
<caption style="caption-side:bottom;">
未知の苦HTML解道
</caption>
<tr>
<th>Main Contents</th>
</tr>
<tr>
<td>収集したHTML定義（ルール）の備忘録</td>
</tr>
<tr>
<td>フリーWEB素材を基に実践体験リポート</td>
</tr>
</table>
▼
■テーブルや<td>タグに背景色の指定
>> background-color属性（スタイルシート属性）
■テーブルや<td>タグに画像の指定
>> background-image属性（スタイルシート属性）
（サンプル画像→  12x12size）
(a)未知の苦HTML解道
| URL | www14.plala.or.jp/hrm/ |
|---|
| 管理人 | Yah! |
|---|
(b)未知の苦HTML解道
| Main Contents |
|---|
| 収集したHTML定義（ルール）の備忘録 |
| フリーWEB素材を基に実践体験リポート |
□ソース表示 (a)の作例は、テーブルに背景色を指定
<table border="1" style="background-color:#ffcccc">
<caption>未知の苦HTML解道</caption>
<tr>
<th>url</th><td>www14.plala.or.jp/hrm/</td>
</tr>
<tr>
<th>管理人</th><td>Yah!</td>
</tr>
</table>
□ソース表示 (b)の作例<th>タグに背景画像、 <td>タグに背景色
<table border="1">
<caption style="caption-side:bottom;">
未知の苦HTML解道</caption>
<tr><th style="background-image:url(back.gif);">
Main Contents</th></tr>
<tr><td style="background-color:#e0f1f6;">
収集したHTML定義（ルール）の備忘録</td></tr>
<tr><td style="background-color:#ffcccc;">
フリーWEB素材を基に実践体験リポート</td></tr>
</table>
▼
★ <table>タグは音声ブラウザの読み上げに配慮
>> [summary属性]の記述・・・summary とは「概要」の意
外見上は普通のテーブルですが、音声ブラウザの読み上げに配慮し、[table要素]に"テーブルの説明やテーブルの目的・内容"を記す[summary属性]を記述します。
□ソース表示
<table border="1" summary="表サンプル">
<tr><td>未知の苦HTML解道</td></tr>
</table>
|
