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の略
★ セル間に罫線 >> RULES属性
★ RULES属性の値
全表示＝ALL 行間のみ＝ROWS 縦列のみ＝COLS ・・・ etc
"テーブル"を作成するときは、<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>
|←←属性→→|
|-値-|
▼
セルとセルの間に罫線を表示させたいときは、RULES属性を使います。
下記作例のソース表示は、RULES属性の値とGROUPSの記述<THEAD>タグの囲みを除き全て同じ内容です。
■デフォルト=none・・・テーブル内罫線非表示
none（罫線なし）
| 日本語 | 英 語 |
|---|
| 春 | spring |
| 夏 | summer |
| 秋 | autumn （英） fall（米） |
| 冬 | winter |
□デフォルトのソース表示
<TABLE BORDER="1" RULES="none">
<CAPTION>none（罫線なし）</CAPTION>
<TR><TH>日本語</TH><TH>英語</TH></TR>
<TR><TD ALIGN="center">春</TD>
<TD ALIGN="center">spring</TD></TR>
<TR><TD ALIGN="center">夏</TD>
<TD ALIGN="center">summer</TD></TR>
<TR><TD ALIGN="center">秋</TD>
<TD ALIGN="center">autumn （英） fall（米）</TD></TR>
<TR><TD ALIGN="center">冬</TD>
<TD ALIGN="center">winter</TD></TR>
</TABLE>
■GROUPS
（THEAD・TBODY・COL要素などで挟まれたTABLE要素）
▽は TRタグとTHタグをTHEADで囲みグループ化した例
groups
（thead指定の場合）
| 日本語 | 英 語 |
|---|
| 春 | spring |
| 夏 | summer |
| 秋 | autumn （英） fall（米） |
| 冬 | winter |
□GROUPS（THEADでグループ化）のソース表示
<TABLE BORDER="1" RULES="groups">
<CAPTION>groups（thead指定の場合）</CAPTION>
<THEAD>
<TR><TH>日本語</TH><TH>英語</TH></TR>
</THEAD>
<TR><TD ALIGN="center">春</TD>
<TD ALIGN="center">spring</TD></TR>
<TR><TD ALIGN="center">夏</TD>
<TD ALIGN="center">summer</TD></TR>
<TR><TD ALIGN="center">秋</TD>
<TD ALIGN="center">autumn （英） fall（米）</TD></TR>
<TR><TD ALIGN="center">冬</TD>
<TD ALIGN="center">winter</TD></TR>
</TABLE>
■ROWS＝行間罫線
rows（行間のみ）
| 日本語 | 英 語 |
|---|
| 春 | spring |
| 夏 | summer |
| 秋 | autumn （英） fall（米） |
| 冬 | winter |
□ROWSのソース表示
<TABLE BORDER="1" RULES="rows">
<CAPTION>rows（行間のみ）</CAPTION>
<TR><TH>日本語</TH><TH>英語</TH></TR>
<TR><TD ALIGN="center">春</TD>
<TD ALIGN="center">spring</TD></TR>
<TR><TD ALIGN="center">夏</TD>
<TD ALIGN="center">summer</TD></TR>
<TR><TD ALIGN="center">秋</TD>
<TD ALIGN="center">autumn （英） fall（米）</TD></TR>
<TR><TD ALIGN="center">冬</TD>
<TD ALIGN="center">winter</TD></TR>
</TABLE>
■COLS＝縦列罫線
cols（縦列のみ）
| 日本語 | 英 語 |
|---|
| 春 | spring |
| 夏 | summer |
| 秋 | autumn （英） fall（米） |
| 冬 | winter |
□COLSのソース表示
<TABLE BORDER="1" RULES="cols">
<CAPTION>cols（縦列のみ）</CAPTION>
<TR><TH>日本語</TH><TH>英語</TH></TR>
<TR><TD ALIGN="center">春</TD>
<TD ALIGN="center">spring</TD></TR>
<TR><TD ALIGN="center">夏</TD>
<TD ALIGN="center">summer</TD></TR>
<TR><TD ALIGN="center">秋</TD>
<TD ALIGN="center">autumn （英） fall（米）</TD></TR>
<TR><TD ALIGN="center">冬</TD>
<TD ALIGN="center">winter</TD></TR>
</TABLE>
■ALL＝RULES属性の指定がない場合と同じ
all（全ての境界）
| 日本語 | 英 語 |
|---|
| 春 | spring |
| 夏 | summer |
| 秋 | autumn （英） fall（米） |
| 冬 | winter |
□ALLのソース表示
<TABLE BORDER="1" RULES="all">
<CAPTION>all（全ての境界）</CAPTION>
<TR><TH>日本語</TH><TH>英語</TH></TR>
<TR><TD ALIGN="center">春</TD>
<TD ALIGN="center">spring</TD></TR>
<TR><TD ALIGN="center">夏</TD>
<TD ALIGN="center">summer</TD></TR>
<TR><TD ALIGN="center">秋</TD>
<TD ALIGN="center">autumn （英） fall（米）</TD></TR>
<TR><TD ALIGN="center">冬</TD>
<TD ALIGN="center">winter</TD></TR>
</TABLE>
▼
■FRAME属性について・・・但し、IE限定
TABLE要素にBORDER属性を指定すると、テーブルの上下左右（四辺）全てが枠線で表示されますが、FRAME属性とその値（above＝上の枠線のみ、below＝下の枠線のみ・・・等々 ）を指定すると、様々なテーブルの外枠を設定できます。
■ブロックレベル要素とインラインレベル要素
The Web KANZAKI様 TOP | やや詳しい目次 |
インターネットやコンピュータの話 | HTMLの説明 >>
簡単なHTMLの説明 | ２文書の骨格となる基本要素 >>
文書の骨格をかたちづくる基本要素 | ブロックとインライン >> ブロックレベル要素とインライン要素
|
