HTMLの基本
HTMLファイルの基本
文書情報
文字に関する設定
レイアウト
リンク
リストを作る
BACK→>>リストを作る 6 用語と説明のリストを作る。
NEXT→>>表を作る 2 表全体の横幅を設定。
<table>
<tr><th>見出し1</th><th>見出し2</th>‥(必要分繰返し)</tr>
<tr><td>データ1</td><td>データ2</td>‥(必要分繰返し)</tr>
<tr><td>データ3</td><td>データ4</td>‥(必要分繰返し)</tr>
            ・
            ・
</table>
要素名属性名説明
属性値
非推奨必須属性
table表の作成
summary音声出力・点字出力などの非視覚環境に対して、この表の目的や構成の説明を記述します
値‥テキスト
width表全体の横幅の指定
値に整数(ピクセル単位)又はプラウザの幅に対する割合を%で指定
border外枠線の太さの指定
値に整数をピクセル単位で指定
frame外枠の表示形式の指定
void‥枠線を表示しない(初期値)、above‥上の枠線のみ表示、below‥下の枠線のみ表示、rhs‥右の枠線のみ表示、lhs‥左の枠線のみ表示、vsides‥左右の枠線のみ表示、hsides‥上下の枠線のみ表示、box‥上下左右全ての枠線を表示
rules表の各セルの罫線の表示形式の指定
none‥枠線を表示しない(初期値)、rows‥横列の境界のみ、cols‥縦列の境界のみ、all‥すべての境界、groups‥列グループ・行グループの間の枠線のみ
cellspacingセルの間隔の指定
整数(ピクセル単位)又は%で指定
cellpaddingセルの枠と内容との余白の指定
整数(ピクセル単位)又は%で指定
align表の配置位置の指定
left‥表を左に配置、後続の内容を右側に回り込ます
center‥表を中央に配置
right‥表を右に配置、後続の内容を左側に回り込ます
非推奨
bgcolor表全体の背景色の指定
16進数のRGB値、またはカラーコードで指定
非推奨
classクラス名を用いてスタイルを適用させる
スタイルシートのクラス名
idID名を用いてスタイルを適用させる
スタイルシートのID名
title補足情報
テキスト
style要素に対して直接スタイルを適用させる
スタイルシート(スタイル情報)
lang言語コードの指定
言語コード
dir文字表記の方向の指定
lft(左から右)
rtl(右から左)
要素名属性名説明
属性値
非推奨必須属性
tr表の中の行(横一列分)
align行揃え
left 左揃え(td要素の初期値)
right 右揃え
center 中央揃え(th要素の初期値)
justify 両端揃え
char
valign縦方向の位置揃え
top 上端揃え、 middle 中央揃え(初期値)
bottom 下端揃え、baseline 横方向の列での一行目のベースライン
charchar属性で指定した文字を基準に揃えて表示する
特定の文字(初期値は小数点)
charoffセルの左端から、char属性で指定した基準となる文字までの距離
整数(ピクセル)又はパーセント(%)
bgcolor表の行の背景色の指定
16進数のRGB値、またはカラーコードで指定
非推奨
classクラス名を用いてスタイルを適用させる
スタイルシートのクラス名
idID名を用いてスタイルを適用させる
スタイルシートのID名
title補足情報
テキスト
style要素に対して直接スタイルを適用させる
スタイルシート(スタイル情報)
lang言語コードの指定
言語コード
dir文字表記の方向の指定
lft(左から右)
rtl(右から左)
要素名属性名説明
属性値
非推奨必須属性
th、td見出しセル、データセル
rowspan下方向に統合する
セルの数
colspan左右方向に統合する
セルの数
align行揃え
left 左揃え(td要素の初期値)
right 右揃え
center 中央揃え(th要素の初期値)
justify 両端揃え
char
valign縦方向の位置揃え
top 上端揃え、 middle 中央揃え(初期値)
bottom 下端揃え、baseline 横方向の列での一行目のベースライン
charchar属性で指定した文字を基準に揃えて表示する
特定の文字(初期値は小数点)
charoffセルの左端から、char属性で指定した基準となる文字までの距離
整数(ピクセル)又はパーセント(%)
abbr見出しセルの省略形
axis見出しセルの分類名
headers関連する見出しセルのID名
scope見出しセルの対象となる範囲
nowrap改行の禁止
nowrap(属性値は省略)
非推奨
bgcolor各セルの背景色の指定
16進数のRGB値、またはカラーコードで指定
非推奨
widthセルの横幅の指定
ピクセル又はパーセント値
非推奨
heightセルの高さの指定
ピクセル又はパーセント値
非推奨
classクラス名を用いてスタイルを適用させる
スタイルシートのクラス名
idID名を用いてスタイルを適用させる
スタイルシートのID名
title補足情報
テキスト
style要素に対して直接スタイルを適用させる
スタイルシート(スタイル情報)
lang言語コードの指定
言語コード
dir文字表記の方向の指定
lft(左から右)
rtl(右から左)

表の構造

表は、table要素で表現します。表全体を<table>〜</table>で囲って表示します。その表の中の 1つ分の行(横一列分)を<tr>〜</tr>で囲って表示し、その行の中の各セルは<th>〜</th>、 又は<td>〜</td>で囲って表します。
つまり、table要素の内容は1つ分の行(横一列分)を表すtr要素で構成され、各tr要素の内容はセルを表すth要素、又はtd要素で 構成されるという事になります。
tr要素は、表の中の1つの行を表し、th要素は、そのセルが見出しのセルであるということを表し、td要素は、そのセルの内容がデータであるということを 示します。プラウザでは、th要素内の文字は太字でセンタリングされて表示されます。又、普通はtable要素にborder 要素を指定しなければ、表の枠は表示されません。
Sample
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>表の基本形。</title> </head> <body> <table> <tr><th>見出し1</th><th>見出し2</th><th>見出し3</th></tr> <tr><td>データ1</td><td>データ2</td><td>データ3</td></tr> <tr><td>データ4</td><td>データ5</td><td>データ6</td></tr> <tr><td>データ7</td><td>データ8</td><td>データ9</td></tr> </table> <table border="2"> <tr><th>見出し1</th><th>見出し2</th><th>見出し3</th></tr> <tr><td>データ1</td><td>データ2</td><td>データ3</td></tr> <tr><td>データ4</td><td>データ5</td><td>データ6</td></tr> <tr><td>データ7</td><td>データ8</td><td>データ9</td></tr> </table> </body> </html>

Internet Explorer8での表示例

表の基本形
表を作る
画像の配置
簡単相互リンクツールtoo-search

相互リンク募集や、お友達のページ紹介、自分のお気に入りサイトを登録できる無料の検索エンジンツール。

登録を募集すれば色んなサイトとのつながりもでき、アクセスアップにも効果抜群。

今すぐ登録!
ページ先頭へ