未知の苦HTML解道　テーブルとセルの間隔

未知の苦HTML解道つまず紀行！　<ホームページ作成支援>

HOME

実践HTML

実践CSS

■ HOME >> 実践HTML >> ブロックレベル要素2 >> セルの間隔

HTML文書は、テキスト内容を"見出し要素" "段落要素" "リスト要素" "リンク要素（ハイパーリンク）"などの"要素"とする考え方を基に、それぞれの要素をタグで囲む（マークアップにより書き表す）文書構造になっています。

■ブロックレベル要素とは・・・？

ひとつのブロック（まとまり）から構成される要素の名称です。
ブロックレベル要素の前後は、要素特性により、段落または改行されます。

■ブロックレベル要素群（abc順）

▼

　★　テーブルの作成　>>　TABLE要素・・・セル次第で縦横無尽
　★　テーブルの構成は、 TABLEタグ内にTRタグ＋TDタグを記述する
　　<TR> ＝Table Rowの略＋ <TD> ＝Table Dataの略

　★　外枠とセル、セルとセルの間隔指定　>>　cellspacing
　★　セル枠とセル内容の間隔指定　>>　cellpadding

"テーブル"を作成するときは、<TABLE>要素を使います。

<TABLE要素>～</TABLE要素>の中に

テーブルの行を表す<TR></TR>タグを記述し、更にTRタグの中に、テーブルの列を表す<TD></TD>タグを記述します。TABLE、TR、TDタグは、セットになります。
TDタグは、セルと呼ばれています。

<TABLE>～<TABLE>タグで挟まれた前後は、要素特性により段落します。

▼

テーブルの枠線表示は、BORDER属性＝"数値"を設定します。（単位＝ピクセル）

★但し、HTML定義HTML4.01におけるBORDER属性は、TABLE要素の枠線表示、非表示の属性として利用できますが、それ以外は非推奨属性です。

　>>　スタイルシート設定推奨

・・・BORDER="1"の場合　（BORDER="0"は、枠線非表示）

未知の苦HTML解道

▼

　|←←←←←←←←←←　要　素　→→→→→→→→→→→|

　 　↓要素名　 　　　  ↓行 ↓列 　↓要素内容　 
　 <TABLE BORDER="1"><TR><TD>未知の苦..</TR></TABLE>
　　　　　|←←属性→→| 
　　　　　　　　　|-値-|

▼

　◆テーブルとセルの間隔、セルとセルの間隔・・・cellspacing

■作例１　BORDER="1" cellspacing="0"

未知の苦HTML解道

万年初心者脱却紀行

□ソース表示

<TABLE BORDER="1" cellspacing="0">
<TR>
<TD>未知の苦HTML解道</TD>
<TD>万年初心者脱却紀行</TD>
</TR>
</TABLE>

▼

■作例２　BORDER="1" cellspacing="5"

未知の苦HTML解道

万年初心者脱却紀行

□ソース表示

<TABLE BORDER="1" cellspacing="5">
<TR><TD>未知の苦HTML解道</TD></TR>
<TR><TD>万年初心者脱却紀行</TD></TR>
</TABLE>

▼

　◆セル枠とセル内容の間隔・・・cellpadding

■作例３　BORDER="1" cellpadding="4"

未知の苦HTML解道
URL	www14.plala.or.jp/hrm/
管理人	Yah!

　□テーブルの上や下に見出しを表示

　>>　CAPTION属性　・・・CAPTIONとは「見出し」の意

▼

注：以下、最後尾に至る記事中に出没するNN=ネットスケープ
またはネスケ云々の記述はNNブラウザのサポート終了
（2008年2月）に伴い読み飛ばして下さい。{2015.11.18加筆}

　□見出しのフォントサイズ

IEはBODY全体に設定した値を継承、ネスケは相対数値＝"3"
　>>　参照：フォントサイズの単位　相対値指定

　□CAPTIN属性のデフォルト位置

デフォルトはテーブルの上にセンタリング表示

センタリング以外の位置指定

　>>　上　ALIGN＝"top"または下 ALIGN＝"bottom"

但し、CAPTIN要素の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 の指定は機能していません。

□ソース表示　テーブルの上に見出し（＝タイトル）

　ネスケは、見出しのフォントサイズ＝相対数値の"３"表示

<TABLE BORDER="1" cellpadding="4">
<CAPTION>未知の苦HTML解道</CAPTION>
<TR>
<TD>URL</TD><TD>www14.plala.or.jp/hrm/</TD>
</TR>
<TR>
<TD>管理人</TD><TD>Yah!</TD>
</TR>
</TABLE>

■作例４　BORDER="1" cellpadding="8"

未知の苦HTML解道
収集したHTML定義（ルール）の備忘録
フリーWEB素材を基に実践体験リポート

□ソース表示　テーブルの下に見出し（＝タイトル）
　・・・"caption-side:bottom;"指定

<TABLE BORDER="1" cellpadding="8">
<CAPTION STYLE="caption-side:bottom;">
未知の苦HTML解道</CAPTION>
<TR>
<TD>収集したHTML定義（ルール）の備忘録</TD>
</TR>
<TR>
<TD>フリーWEB素材を基に実践体験リポート</TD>
</TR>
</TABLE>

▼

　◆cellspacingとcellpaddingの組合せ

■作例５　BORDER="5" cellspacing="5" cellpadding="5"

未知の苦HTML解道
URL	www14.plala.or.jp/hrm/
管理人	Yah!

▼

　□テーブルの列や行を見出し表示

　>>　THタグ・・・Table Headerの略

見出しを定義するタグで挟まれたテキストは太字になります。

こちらもご覧下さい　>>　見出し要素　H1～H6要素

□ソース表示

<TABLE BORDER="5" cellspacing="5" cellpadding="5">
<CAPTION>未知の苦HTML解道</CAPTION>
<TR>
<TH>URL</TH><TD>www14.plala.or.jp/hrm/</TD>
</TR>
<TR>
<TH>管理人</TH><TD>Yah!</TD>
</TR>
</TABLE>

■作例６　BORDER="10" cellspacing="10" cellpadding="10"

未知の苦HTML解道
Main Contents
収集したHTML定義（ルール）の備忘録
フリーWEB素材を基に実践体験リポート

□ソース表示

<TABLE BORDER="10" cellspacing="10" cellpadding="10">
<CAPTION STYLE="caption-side:bottom;>
未知の苦HTML解道</CAPTION>
<TR><TH>Main Contents</TH></TR>
<TR>
<TD>収集したHTML定義（ルール）の備忘録</TD>
</TR>
<TR>
<TD>フリーWEB素材を基に実践体験リポート</TD>
</TR>
</TABLE>

▼

　■テーブルタグは音声ブラウザの読み上げに配慮

　>>　SUMMARY属性

未知の苦HTML解道

外見上は普通のテーブルですが、音声ブラウザの読み上げに配慮し、テーブルの"目的や内容"を表す"SUMMARY属性"を書き加えます。

□ソース表示

<TABLE BORDER="1" SUMMARY="表サンプル">
<TR><TD>未知の苦HTML解道</TD></TR></TABLE>

■ブロックレベル要素とインラインレベル要素