HTML リファレンス - テーブル編

■ホームページ基礎知識

1章； HTML入門
2章； HTMLの基本
3章； リンクについて
4章； 文章の整形
5章； ファイル転送
6章； 画像について

■基礎知識 「中級編」

■基礎知識 「上級編」

■HTML リファレンス

 ・基本構成編
 ・リンク編
 ・フォント編
 ・テキスト編
 ・画像編
 ・リスト編
 ・テーブル編
 ・フレーム編
 ・フォーム編
 ・拡張タグ編
 ・カラー編

■アクセスアップの方法

 ・評価の高いサイト
 ・SEOのメリット
 ・SEO関連語句解説

■相互リンクについて

お勧めレンタルサーバー
おすすめ格安レンタルサーバー

■お勧め独自ドメインプラン
違うURLサイト複数製作可

□相互リンクでSEO!
□やきぶたサーチSEO
□アクセスアップ無料情報
□ホームページ作成講座
□アクセスアップSEO
□格安レンタルサーバー
　Ｌ 無料レンタルサーバー
□チャ−シューメンズ倶楽部
□SEOのつもりがスパム？

■ホームページ作成
 ★FC2 無料ホームページ
 ★ホームページ テンプレート 1
 ★ホームページ テンプレート 2

■ テーブル

<TABLE>
<TABLE BORDER>
<TABLE BORDER="n">
<TR><TH><TH>
<TR><TD><TD>
</TABLE>
【説明】

ペアで使用して表組み(Table)を表示します。<TABLE BORDER>を使用すると表の外枠を表示します。またBORDER="n"をピクセル数で指定すると表の外枠の太さを指定できます。<TR><TH><TD>には閉じるタグは必要ありませんが、</TABLE>タグで必ず閉じてください。

<TR>は行の定義(Table Row)を表します。すべての行の先頭にこのタグを置いてください。

<TH>は見出し(Table Header)として指定します。<TD>と区別され、太字で表示されます。

<TD>は<TH>のデータ(Data)として指定します。

また<TH>や<TD>タグだけ記述し、中身を書かないと空白となります。使用例ではデータB2と【使用例３】の左上のセルを空白として扱います。

【使用例１】 
<TABLE>
<TR><TH>見出しA<TH>見出しB<TH>見出しC
<TR><TD>データA1<TD>データB1<TD>データC1
<TR><TD>データA2<TD><TD>データC2
</TABLE>
【表示１】
見出しA見出しB見出しC
データA1データB1データC1
データA2データC2

【使用例２】 
<TABLE BORDER>
<TR><TH>見出しA<TH>見出しB<TH>見出しC
<TR><TD>データA1<TD>データB1<TD>データC1
<TR><TD>データA2<TD><TD>データC2
</TABLE>
【表示２】
見出しA見出しB見出しC
データA1データB1データC1
データA2データC2

【使用例３】 
<TABLE BORDER>
<TR><TH><TH>見出しA<TH>見出しB<TH>見出しC
<TR><TH>見出し1<TD>データA1<TD>データB1<TD>データC1
<TR><TH>見出し2<TD>データA2<TD><TD>データC2
</TABLE>
【表示３】
見出しA見出しB見出しC
見出し1データA1データB1データC1
見出し2データA2データC2

【使用例４】 
<TABLE BORDER="10">
<TR><TH>見出しA<TH>見出しB<TH>見出しC
<TR><TD>データA1<TD>データB1<TD>データC1
<TR><TD>データA2<TD><TD>データC2
</TABLE>
【表示４】
見出しA見出しB見出しC
データA1データB1データC1
データA2データC2

■ テーブルのサイズ変更

<TABLE WIDTH="n" HEIGHT="n">
<TABLE WIDTH="n%" HEIGHT="n%">
</TABLE>
【説明】

ペアで使用して表のサイズを指定します。ピクセル数かパーセント表記で指定します。パーセント指定はブラウザのウィンドーの幅、高さに対する割合であることに注意してください。(100%を指定すると画面いっぱいということです。)

【使用例】 
<TABLE BORDER WIDTH="300" HEIGHT="50">
<TR><TH>見出しA<TH>見出しB<TH>見出しC
<TR><TD>データA1<TD>データB1<TD>データC1
<TR><TD>データA2<TD>データB2<TD>データC2
</TABLE>
【表示】 


見出しA見出しB見出しC

データA1データB1データC1

データA2データB2データC2
【使用例】 
<TABLE BORDER WIDTH="70%" HEIGHT="25%">
<TR><TH>見出しA<TH>見出しB<TH>見出しC
<TR><TD>データA1<TD>データB1<TD>データC1
<TR><TD>データA2<TD>データB2<TD>データC2
</TABLE>
【表示】
見出しA見出しB見出しC
データA1データB1データC1
データA2データB2データC2

■ テーブルの配置

<TABLE ALIGN="LEFT">
<TABLE ALIGN="RIGHT">
<TABLE ALIGN="CENTER">
</TABLE>
【説明】

ペアで使用することにより表の配置を指定します。</TABLE>で自動的に改行されるため、</TABLE>の直後に文字を書いても文字はテーブルの下に置かれます。そこでALIGN="LEFT"やALIGN="RIGHT"を使用するとテーブルの側面に文字を置くことができます。ALIGN="..."を指定しないとALIGN="CENTER"を指定したのと同じことになります。

文字を側面に配置したとき、<BR CLEAR="ALL">を使用し、過剰な文字の回り込みを防止してください。

【使用例】 
<TABLE BORDER ALIGN="LEFT">
<TR><TH>見出しA<TH>見出しB<TH>見出しC
<TR><TD>データA1<TD>データB1<TD>データC1
<TR><TD>データA2<TD>データB2<TD>データC2
</TABLE>LEFTを指定します。
<BR CLEAR="ALL">
【表示】
見出しA見出しB見出しC
データA1データB1データC1
データA2データB2データC2
LEFTを指定します。

【使用例】 
<TABLE BORDER ALIGN="RIGHT">
<TR><TH>見出しA<TH>見出しB<TH>見出しC
<TR><TD>データA1<TD>データB1<TD>データC1
<TR><TD>データA2<TD>データB2<TD>データC2
</TABLE>RIGHTを指定します。
<BR CLEAR="ALL">
【表示】
見出しA見出しB見出しC
データA1データB1データC1
データA2データB2データC2
RIGHTを指定します。
【使用例】 
<TABLE BORDER ALIGN="CENTER">
<TR><TH>見出しA<TH>見出しB<TH>見出しC
<TR><TD>データA1<TD>データB1<TD>データC1
<TR><TD>データA2<TD>データB2<TD>データC2
</TABLE>CENTERを指定します。<BR CLEAR="ALL">
【表示】
見出しA見出しB見出しC
データA1データB1データC1
データA2データB2データC2
CENTERを指定します。

■ 文字の配置

<TABLE>
<TR ALIGN="LEFT,RIGHT,CENTER" VALIGN="TOP,MIDDLE,BOTTOM">
<TH ALIGN="LEFT,RIGHT,CENTER" VALIGN="TOP,MIDDLE,BOTTOM">
<TD ALIGN="LEFT,RIGHT,CENTER" VALIGN="TOP,MIDDLE,BOTTOM">
</TABLE>
【説明】

ペアで使用することによりセル内の文字の配置を指定します。ALIGN="..." VALIGN="..."を指定しないと<TH>場合はALIGN="CENTER"(中揃え)、<TD>の場合は ALIGN="LEFT"のを指定したのと同じことになります。

<TR>で指定するとその行すべてのセルの配置を指定できます。

<TH><TD>で指定するとそのセル内だけの配置を指定できます。

【使用例１】

<TABLE BORDER WIDTH="500">

<TR><TH>見出しA<TH>見出しB<TH>見出しC

<TR><TD>指定なしA1<TD>指定なしB1<TD>指定なしC1

<TR ALIGN="LEFT"><TD>行左揃えA2<TD>行左揃えB2<TD>行左揃えC2

<TR ALIGN="CENTER"><TD>行中揃えA3<TD>行中揃えB3<TD>行中揃えC3

<TR ALIGN="RIGHT"><TD>行右揃えA4<TD>行右揃えB4<TD>行右揃えC4

<TR><TD ALIGN="LEFT">セル左揃えA5<TD ALIGN="CENTER">セル中揃えB5<TD ALIGN="RIGHT">セル右揃えC5

</TABLE>

【表示１】
見出しA見出しB見出しC
指定なしA1指定なしB1指定なしC1
行左揃えA2行左揃えB2行左揃えC2
行中揃えA3行中揃えB3行中揃えC3
行右揃えA4行右揃えB4行右揃えC4
セル左揃えA5セル中揃えB5セル右揃えC5


【使用例２】

<TABLE BORDER WIDTH="500" HEIGHT="250">

<TR><TH>見出しA<TH>見出しB<TH>見出しC

<TR><TD>指定なしA1<TD>指定なしB1<TD>指定なしC1

<TR VALIGN="TOP"><TD>行上揃えA2<TD>行上揃えB2<TD>行上揃えC2

<TR VALIGN="MIDDLE"><TD>行中揃えA3<TD>行中揃えB3<TD>行中揃えC3

<TR VALIGN="BOTTOM"><TD>行下揃えA4<TD>行下揃えB4<TD>行下揃えC4

<TR><TD VALIGN="TOP">セル上揃えA5<TD VALIGN="MIDDLE">セル中揃えB5<TD VALIGN="BOTTOM">セル下揃えC5

</TABLE>

【表示２】

見出しA見出しB見出しC
指定なしA1指定なしB1指定なしC1
行上揃えA2行上揃えB2行上揃えC2
行中揃えA3行中揃えB3行中揃えC3
行下揃えA4行下揃えB4行下揃えC4
セル上揃えA5セル中揃えB5セル下揃えC5

■ 外枠の太さ変更

<TABLE CELLSPACING="n">
<TABLE CELLPADDING="n">
</TABLE>
【説明１】

CELLSPACINGを使用して表の外枠の太さをピクセル数で指定します。外枠の太さ<BORDER="n">との違いに注意してください。

CELLPADDINGを使用してセル内の枠と文字との間の幅をピクセル数で指定します。効果的に使用すると表がすっきりし、見やすくなります。


【使用例１】 
<TABLE BORDER CELLSPACING="10">
<TR><TH>見出しA<TH>見出しB<TH>見出しC
<TR><TD>データA1<TD>データB1<TD>データC1
<TR><TD>データA2<TD>データB2<TD>データC2
</TABLE>
【表示２】

見出しA見出しB見出しC
データA1データB1データC1
データA2データB2データC2


【使用例２】 
<TABLE BORDER CELLPADDING="10">
<TR><TH>見出しA<TH>見出しB<TH>見出しC
<TR><TD>データA1<TD>データB1<TD>データC1
<TR><TD>データA2<TD>データB2<TD>データC2
</TABLE>
【表示２】

見出しA見出しB見出しC
データA1データB1データC1
データA2データB2データC2

■ セルの連結

<TH ROWSPAN="n" COLSPAN="n">
<TD ROWSPAN="n" COLSPAN="n">
【説明】

複数のセルを連結させる表を作成します。ROWSPAN="n"を使用しn個のセルを連結する縦長のセルを指定します。COLSPAN="n"を使用しn個のセルを連結する横長のセルを指定します。

指定するときはまたがるセルのうち一番左上のセルで指定します。


【使用例１】 
<TABLE BORDER WIDTH="450">
<TR><TH COLSPAN="3">企業
<TR><TD>営業部<TD>経理部<TD>企画部
</TABLE>
【表示１】

企業
営業部経理部企画部


【使用例２】 
<TABLE BORDER WIDTH="450">
<TR><TH COLSPAN="4">株式会社○×商事
<TR><TH><TH>厚木本社<TH>世田谷営業所<TH>千代田営業所
<TR><TH>営業部<TD>○<TD>○<TD>○
<TR><TH>経理部<TD>○<TD>○<TD>○
<TR><TH>人事部<TD>○<TD>×<TD>×
<TR><TH>業務課<TD>○<TD>○<TD>×
<TR><TH>庶務課<TD>○<TD>×<TD>○
<TR><TH>販売課<TD>○<TD>○<TD>○
<TR><TH>ショールーム<TD>○<TD>×<TD>○
</TABLE>
【表示２】

株式会社○×商事
厚木本社世田谷営業所千代田営業所
営業部○○○
経理部○○○
人事部○××
業務課○○×
庶務課○×○
販売課○○○
ショールーム○×○

■ セル内改行禁止

<TH NOWRAP>
<TD NOWRAP>
【説明】

セル内の改行の禁止を指定します。WIDTH="n" HEIGHT="n"を指定しないとブラウザの幅によっては自動的に改行されることがありますが、このNOWRAPでキャンセルします。

使用例ではキャンパス名でNOWRAPを使用します。

【使用例】 
<TABLE BORDER>
<TR><TH COLSPAN="4">株式会社○×商事
<TR><TH>厚木本社<TD>○○○○○○○○○○○<TD>0462-XX-XXXX<TD>神奈川県厚木市○○○○○○○○
<TR><TH>世田谷営業所<TD>○○○○○○○○○○○<TD>03-5384-XXXX<TD>東京都世田谷区○○○○○○○○
<TR><TH>千代田営業所<TD>○○○○○○○○○○○<TD>03-3295-XXXX<TD>東京都千代田区○○○○○○○○
</TABLE>
【表示・NOWRAP指定なし】

株式会社○×商事
厚木本社○○○○○○○○○○○○○○○0462-XX-XXXX神奈川県厚木市○○○○○○○○
世田谷営業所○○○○○○○○○○○○○○○03-5384-XXXX東京都世田谷区○○○○○○○○
千代田営業所○○○○○○○○○○○○○○○03-3295-XXXX東京都千代田区○○○○○○○○


【使用例】 
<TABLE BORDER>
<TR><TH COLSPAN="4">株式会社○×商事
<TR><TH NOWRAP>厚木本社<TD>○○○○○○○○○<TD>0462-XX-XXXX<TD>神奈川県厚木市○○○○○○
<TR><TH NOWRAP>世田谷営業所<TD>○○○○○○○○○<TD>03-5384-XXXX<TD>東京都世田谷区○○○○○○
<TR><TH NOWRAP>千代田営業所<TD>○○○○○○○○○<TD>03-3295-XXXX<TD>東京都千代田区○○○○○○
</TABLE>
【表示・NOWRAP指定あり】

株式会社○×商事
厚木本社○○○○○○○○○○○○○○○0462-XX-XXXX神奈川県厚木市○○○○○○○○
世田谷営業所○○○○○○○○○○○○○○○03-5384-XXXX東京都世田谷区○○○○○○○○
千代田営業所○○○○○○○○○○○○○○○03-3295-XXXX東京都千代田区○○○○○○○○

■ キャプション

<CAPTION>
<CAPTION ALIGN="TOP">
<CAPTION ALIGN="BOTTOM">
</CAPTION>
【説明】

テーブルのキャプション(表題)をつけます。自動的にセンタリングされるため、ALIGN指定はTOPとBOTTOMしかありません。またALIGN指定をしなかった場合はALIGN="TOP"を指定したのと同じことになります。

【使用例】 
<TABLE BORDER>
<CAPTION>所在地</CAPTION>
<TR><TH COLSPAN="4">株式会社○×商事
<TR><TH NOWRAP>厚木本社<TD>○○○○○○○○○<TD>0462-XX-XXXX<TD>神奈川県厚木市○○○○○○
<TR><TH NOWRAP>世田谷営業所<TD>○○○○○○○○○<TD>03-5384-XXXX<TD>東京都世田谷区○○○○○○
<TR><TH NOWRAP>千代田営業所<TD>○○○○○○○○○<TD>03-3295-XXXX<TD>東京都千代田区○○○○○○
</TABLE>
【表示】
所在地
株式会社○×商事
厚木本社○○○○○○○○○○○○○○○0462-XX-XXXX神奈川県厚木市○○○○○○○○
世田谷営業所○○○○○○○○○○○○○○○03-5384-XXXX東京都世田谷区○○○○○○○○
千代田営業所○○○○○○○○○○○○○○○03-3295-XXXX東京都千代田区○○○○○○○○

■ テーブルの背景色

<TABLE BGCOLOR="color.html">
<TH BGCOLOR="color.html">
<TD BGCOLOR="color.html">
【説明】

背景色を指定します。TABLE BGCOLORでテーブル全体の背景色を、TH BGCOLORやTD BGCOLORで任意のセルのみ指定することができます。

【使用例】 
<TABLE BORDER BGCOLOR="#ffffe3">
<TR><TH>見出しA<TH>見出しB<TH>見出しC
<TR><TD>データA1<TD>データB1<TD>データC1
<TR><TD>データA2<TD>データB2<TD>データC2
</TABLE>
【表示】

見出しA見出しB見出しC
データA1データB1データC1
データA2データB2データC2


【使用例】 
<TABLE BORDER BGCOLOR="#ffffe3">
<TR><TH BGCOLOR="#00FF00">見出しA<TH BGCOLOR="#00FF99">見出しB<TH BGCOLOR="#CCFF99">見出しC
<TR><TD BGCOLOR="#RRCC00">データA1<TD BGCOLOR="#FFFF99">データB1<TD BGCOLOR="#FFCCFF">データC1
<TR><TD BGCOLOR="#99CCFF">データA2<TD BGCOLOR="#3399FF">データB2<TD BGCOLOR="#FFFF33">データC2
</TABLE>
【表示】

見出しA見出しB見出しC
データA1データB1データC1
データA2データB2データC2

◎1GBの大容量 無料ホームページ（商用利用、アフィリエイト可能）  ◎広告収入GETも可能！無料ホームページ作成サービス（携帯・PC対応）

◎ホームページ・ビルダー10 通常版  ◎ホームページ・ビルダー10 プレミアムパック  ◎ホームページ・ビルダー10初心者おすすめ解説本

◎初心者におすすめ格安レンタルサーバー ロリポップ（２００MB、２６３円から）   ◎ブログの為の格安レンタルサーバー（月額208円 / 500M 〜）

ホームページ作成講座 TOP