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>タグを記述します。TABLE、TR、TDタグは、セットになります。
TDタグは、セルと呼ばれています。
<TABLE>〜<TABLE>タグで挟まれた前後は、要素特性により段落します。
▼
テーブルの枠線表示は、BORDER属性＝"数値"を設定します。（単位＝ピクセル）
★但し、HTML定義HTML4.01におけるBORDER属性は、TABLE要素の枠線表示、非表示の属性として利用できますが、それ以外は非推奨属性です。
>> スタイルシート設定推奨
・・・BORDER="1"の場合 （BORDER="0"は、枠線非表示）
▼
|←←←←←←←←←← 要 素 →→→→→→→→→→→|
↓要素名 ↓行 ↓列 ↓要素内容
<TABLE BORDER="1"><TR><TD>未知の苦..</TR></TABLE>
|←←属性→→|
|-値-|
▼
セル内テキストの位置指定は、TDタグの中にALIGN属性またはVALIGN属性とその値を指定します。
TDタグにおけるALIGN属性の既定値は「左揃え（ALIGN="left"）」のため、そのままでよければ記述不要。
要素名と属性の間に半角スペース必須
テキスト位置を指定するALIGN属性及びVALIGN属性の値と位置関係は、次のとおりです。
▼
ALIGN属性・VALIGN属性の値と位置関係
| 属 性 | 値 | 位 置 関 係 |
|---|
| ALIGN | left | 左寄せ |
| ALIGN | center | センタリング |
| ALIGN | right | 右寄せ |
| VALIGN | top | 上寄せ |
| VALIGN | middle | ど真ん中 |
| VALIGN | bottom | 下寄せ |
▼
■作例１・・・１行３列
左のセル="テキスト右寄せ"指定・・・right
中央のセル="テキストセンタリング"指定・・・center
右のセル="テキスト左寄せ"指定・・・left
□ソース表示
<TABLE BORDER="1" WIDTH="250">
<TR>
<TD ALIGN="right">未知の苦</TD>
<TD ALIGN="center">HTML解道</TD>
<TD ALIGN="left">つまず紀行！</TD>
</TR>
</TABLE>
▼
■作例２・・・３行１列
上のセル="テキスト下寄せ"指定・・・bottom
中のセル="テキスト真ん中"指定・・・center
下のセル="テキスト上寄せ"指定・・・top
| 未知の苦HTML解道 |
| 万年初心者脱却紀行 |
| since 2004 |
□ソース表示
<TABLE BORDER="1" HEIGHT="100">
<TR><TD VALIGN="bottom">未知の苦HTML解道</TD></TR>
<TR><TD VALIGN="middle">万年初心者脱却紀行</TD></TR>
<TR><TD VALIGN="top">since 2004</TD></TR>
</TABLE>
▼
■作例３・・・３行１列 ALIGN属性とVALIGN属性の組合せ
上のセル="テキスト左寄せ"left" 下寄せ"bottom"指定
中のセル=センタリング"center" ど真ん中"middle"指定
下のセル="テキスト右寄せ"right" 上寄せ"top"指定
| 未知の苦HTML解道 |
| 万年初心者脱却紀行 |
| since 2004 |
□ソース表示
<TABLE BORDER="1" WIDTH="250" HEIGHT="80">
<TR><TD ALIGN="left" VALIGN="bottom">
未知の苦HTML解道</TD></TR>
<TR><TD ALIGN="center" VALIGN="middle">
万年初心者脱却紀行</TD></TR>
<TR><TD ALIGN="right" VALIGN="top">
since 2004</TD></TR>
</TABLE>
▼
注：以下、最後尾に至る記事中に出没するNN=ネットスケープ
またはネスケ云々の記述はNNブラウザのサポート終了
（2008年2月）に伴い読み飛ばして下さい。{2015.11.18加筆}
◆テーブル本体の位置指定・・・IEとネスケの違い
IEにおけるテーブル本体の位置指定は、ドキュメントの位置指定と同様、TABLE要素にALIGN属性と値（"左=LEFT・右=RIGHT・中央=CENTER"）を指定すると反映されますが、ALIGN属性は、HTMLの定義（HTML4.01）上、非推奨属性です。
但し、テーブル要素内の td、th、tr、col などに対しては、例外的にALIGN属性を使用することができます。
（本章前半の"ALIGN属性・VALIGN属性の値と位置関係"一覧をご確認下さい。）
ネスケ（検証段階＝NN7.1）は、TABLE要素＋ALIGN属性の位置指定を完全に無視します。
▼
テーブルの位置指定・・・IE限定
下記作例の場合、ネスケはALIGN属性の指定が無視されるため全て中央位置に揃ってしまいます。
▼
□作例から左寄せのソース表示・・・但しIE限定
<TABLE BORDER="1" ALIGN="left">
<TR>
<TD>未知の苦HTML解道</TD>
<TD>万年初心者脱却紀行</TD>
</TR>
</TABLE>
ネスケとは、HTML定義HTML4.01非推奨の"CENTER要素やALIGN属性"を忠実に無視？している模様。
▼
IE、ネスケ共にテーブルの位置指定は、DIV要素にtext-align属性を指定します。
代替（インラインスタイル）記述の例
>> DIV要素に挟まれたテキストの位置指定
更にテーブルの位置指定は少々厄介ですが、TABLE要素にmargin属性を指定します。（ふー）
ポイントの整理
★テキスト全体の位置を指定する
DIV要素にSTYLE属性と"text-align属性 : 値 ;"
★テーブルサイズとテーブルの外側左右の間隔を指定する
TABLE要素にSTYLE属性と
"margin-left : 値 ; margin-right : 値 ;"
▼
▼
□左寄せのソース表示
<DIV style="text-align:left">
<TABLE border="1" style="margin-left:0px ;
margin-right:auto;">
<TR><TD>未知の苦HTML解道</TD></TR>
</TABLE>
</DIV>
□センタリングのソース表示
<DIV style="text-align:center">
<TABLE border="1" style="width: 31%; margin-left:34.5% ;
margin-right:34.5%;">
<TR><TD>未知の苦HTML解道</TD></TR>
</TABLE>
</DIV>
▼
◆ IE、ネスケ、Mac共通のセンタリング方法
センタリングの作例の場合、IE・ネスケ共にSTYLE属性の指定は、
margin-left:auto; margin-right:auto;
で機能しますが、Macも範疇とするなら、上記ソースのように WIDTH属性が必要になります。
作例の数値は、TABLEのサイズを割り出し、残りの数値を均等割した結果です。
★余談★ 管理人がセンタリングの作例を試作していたときの経験談。
WIDTH属性と値の記述がなく、margin-left:10%; margin-right:10%; と記述しても、たまたまセンタリングになりました。
□右寄せのソース表示
<DIV style="text-align:right">
<TABLE border="1" style="margin-left:auto ;
margin-right:0px;">
<TR><TD>未知の苦HTML解道</TD></TR>
</TABLE>
</DIV>
▼
HTML定義「HTML4.01 Transitional」では、CENTER要素やALIGN属性の記述は、非推奨要素・属性のため、スタイルシートの設定を推奨しています。
タグ要素に非推奨要素属性の代替記述をするときは、STYLE属性により、インラインスタイルで直接記述します。
■テーブルタグは音声ブラウザの読み上げに配慮
>> SUMMARY属性
外見上は普通のテーブルですが、音声ブラウザの読み上げに配慮し、テーブルの"目的や内容"を表す"SUMMARY属性"を書き加えます。
ソース表示
<DIV STYLE="text-align:left;">
<TABLE BORDER="1" STYLE="margin-left:10px;
margin-right:auto;" SUMMARY="表サンプル">
<TR><TD>未知の苦HTML解道</TD></TR>
</TABLE>
</DIV>
■ブロックレベル要素とインラインレベル要素
The Web KANZAKI様 TOP | やや詳しい目次 |
インターネットやコンピュータの話 | HTMLの説明 >>
簡単なHTMLの説明 | ２文書の骨格となる基本要素 >>
文書の骨格をかたちづくる基本要素 | ブロックとインライン >> ブロックレベル要素とインライン要素
|
