Of ChaichanPapa-World !

Home/Menu

ストリクトなHTMLの基礎講座

テーブル要素(table,tr,td,タグ等)の概説

◆ はじめに

本ページは、日本人が好んで使う表、そう、テーブル要素をまとめてみました。

テーブル要素は、表を作成するための要素です。レイアウトでこの要素を使ってはいけません。ちなみに、レイアウトでは、スタイルシートを使いましょう!

まずは、テーブルサンプルを見てください。

◆ テーブルサンプル

サンプルの表を作ってみました。


MS 対 反MS
MicrosoftVS反Microsoft
現状クライアント系は優勢VS劣勢
現状サーバー系は劣勢VS優勢
項目 WebブラウザIEVSネスケ
クライアントPCWindowsVSLinux
サーバマシンNTVSUNIX
データベースSQLサーバーVSoracle

◆ サンプルソース

<table border="3">
<caption>MS 対 反MS</caption>
<colgroup>
<col id="head" align="center">
<col id="head2" align="center">
</colgroup>
<colgroup>
<col id="mslist" align="left">
<col class="mless" align="center">
<col id="notms" align="right">
</colgroup>
<thead>
<tr>
<th class="mless" colspan="2"></th><th>Microsoft</th><th>VS</th><th>反Microsoft</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="2">現状クライアント系は</th><th>優勢</th><th>VS</th><th>劣勢</th>
</tr>
<tr>
<th colspan="2">現状サーバー系は</th><th>劣勢</th><th>VS</th><th>優勢</th>
</tr>
</tfoot>
<tbody>
<tr>
<th rowspan="4">項目</th>
<th>Webブラウザ</th><td>IE</td><th>VS</th><td>ネスケ</td>
</tr>
<tr>
<th>クライアントPC</th><td>Windows</td><th>VS</th><td>Linux</td>
</tr><tr>
<th>サーバマシン</th><td>NT</td><th>VS</th><td>UNIX</td>
</tr><tr>
<th>データベース</th><td>SQLサーバー</td><th>VS</th><td>oracle</td>
</tr>
</tbody>
</table>

◆ テーブルサンプル説明

では、上から順番に説明していきましょう。

table 要素

まずは、HTML概説リファレンスのtable要素を参照してください。
ということで、属性の説明をいたします。

summary属性
表の構造や意味などの概要を記述します。視覚的な表現が出来ない場合に利用されます。
width属性
表全体の横幅を「ピクセル数」または「%」で指定します。
border属性
表全体を囲う外枠の太さを「ピクセル数」で指定します。
frame属性
表全体を囲う外枠うち、上下左右のどの枠を表示させるかを指定します。
  • void - 外枠なし
  • above - 上のみ
  • below - 下のみ
  • hsides - 上下のみ
  • lhs - 左のみ
  • rhs - 右のみ
  • vsides - 左右のみ
  • box - 上下左右
  • border - 上下左右
rules属性
表の中のセルを区切る線をどう表示かの指定です。
  • none - 線なし
  • groups - thead,tbody,tfoot,colgroup要素の境界
  • rows - 横列の境界
  • cols - 縦列の境界
  • all - すべての境界
cellspacing属性
セルのスペース間隔を「ピクセル数」または「%」で指定します。
cellpadding属性
セル内のマージンを「ピクセル数」または「%」で指定します。
他の属性
あと、表の表示位置を決めるalign属性、表全体の背景色を指定するbgcolor属性がありますが、非推奨属性です。これらは、スタイルシートで行いましょう。

caption要素

HTML概説リファレンスのcaption要素を参照してください。

colgroup要素

HTML概説リファレンスのcolgroup要素を参照してください。
ということで、属性の説明をいたします。

span属性
グループ化する列の数を指定します。colgroup要素の中にcol要素ある場合は無視されます。
width属性
グループ化した列の幅を指定します。colgroup要素の中にcol要素で幅が指定されている場合は無視されます。
align属性
グループ化したセル内の行揃え。
  • left - 左寄せ
  • right - 右寄せ
  • center - 中央揃え
  • justity - 両端揃え
  • char - char属性で指定された文字の位置を揃える
valign属性
グループ化したセル内の縦揃え。
  • top - 上に寄せる
  • middle - 中央揃え
  • bottom - 下に寄せる
  • baseline - 一行目のベースラインを揃える
char属性
align属性が「char」時の位置揃え文字。
charoff属性
align属性が「char」時のセルの端からchar属性文字の距離を「ピクセル数」または「%」で指定します。

col要素

HTML概説リファレンスのcol要素を参照してください。
colgroup要素との違いは、縦列の単独指定かグループ化指定の違いです。
ということで、属性の説明をいたします。

span属性
対象する列の数を指定します。
width属性
縦列の幅を指定します。
align属性
指定した範囲の縦列のセル内の行揃え。
  • left - 左寄せ
  • right - 右寄せ
  • center - 中央揃え
  • justity - 両端揃え
  • char - char属性で指定された文字の位置を揃える
valign属性
指定した範囲の縦列のセル内の縦揃え。
  • top - 上に寄せる
  • middle - 中央揃え
  • bottom - 下に寄せる
  • baseline - 一行目のベースラインを揃える
char属性
align属性が「char」時の位置揃え文字。
charoff属性
align属性が「char」時のセルの端からchar属性文字の距離を「ピクセル数」または「%」で指定します。

thead要素,tfoot要素,tbody要素,tr要素

まずは、各々のHTML概説リファレンスのthead要素,tbody要素,tfoot要素,tr要素を参照してください。
また、属性は、col要素と同様のalign属性、valign属性、char属性、charoff属性が各々あります。

[注意]
thead要素,tbody要素,tfoot要素の配置の順番は、thead要素が一番で、次にtfoot要素を配置してください。
これは、どの程度の長さか分からない本体よりも先に、フッタを表示させるためです。
しかし、本体の上にフッタが表示されるわけではなく、あくまでも下に表示されます。
仮に、フッタが本体の前に表示されたら、未対応のブラウザということになります。(Thanks to Mr ma-to !)

td要素,th要素

まずは、各々のHTML概説リファレンスのtd要素,th要素を参照してください。

rowspan属性
指定しするセルから下方向のセルの連結するセル数を指定します。
尚、0を指定すると指定したセルの下方向がすべて連結されます。
colspan属性
指定しするセルから右方向のセルの連結するセル数を指定します。
尚、0を指定すると指定したセルの右方向がすべて連結されます。

また、他の属性は、col要素と同様のalign属性、valign属性、char属性、charoff属性があります。
あと、abbr,axis,headers,scopeなどのアクセシビリティに関する属性もあります。
また、あと、非推奨ですが、nowrap,bgcolor,width,heightの属性もあります。

Home/Menu/HTML概説リファレンス