[PR] この広告は3ヶ月以上更新がないため表示されています。
ホームページを更新後24時間以内に表示されなくなります。


テーブルにタイトルを付ける
Google

①表の外側にタイトルを付ける

<TABLE>と<TR>の間に<CAPTION>を書くことにより、表の外側にタイトルを付ける事ができます。
ただし、<CAPTION>だけでは、テーブルの上部中央に表示されます。
位置を指定したい場合は、下記のように記述します。

左上に表示 →<CAPTION ALIGN="left"> 右上に表示 → <CAPTION ALIGN="right">
下中央に表示 → <CAPTION ALIGN="bottom">
左下に表示 →<CAPTION ALIGN="left" VALIGN="bottom">
右下に表示 →<CAPTION ALIGN="right" VALIGN="bottom">
<TABLE BORDER>
<CAPTION ALIGN="right">これがタイトルだσ゜д゜)σYO!! </CAPTION>
<TR>
<TD>上で書き忘れたけど…以下省略</TD>
<TD>あいうえお</TD>
</TR>
<TR>
<TD>閉じるってのは…以下省略</TD>
<TD>かきくけこ</TD>
</TR>
</TABLE>
これがタイトルだσ゜д゜)σYO!!
上で書き忘れたけど、<CAPTION>を書いたら閉じるのを忘れないでNё あいうえお
閉じるってのは、</CAPTION>←これのことNё かきくけこ
<TABLE BORDER>
<CAPTION ALIGN="left" VALIGN="bottom">タイトルだσﾟдﾟ)σYO!!</CAPTION>
<TR>
<TD>左下にタイトルいれました</TD>
<TD>見本はこれだけ</TD>
</TR>
<TR>
<TD>どう表示されるか理解できた？</TD>
<TD>あとはご自身で試してNё</TD>
</TR>
</TABLE>
タイトルだσﾟдﾟ)σYO!!
左下にタイトルいれました 見本はこれだけ
どう表示されるか理解できた？ あとはご自身で試してNё



注意： タイトル（<CAPTION>）部分の文字数よりテーブルの幅が狭いと、タイトルの改行が崩れます。
そんな時は<CAPTION>部分に記述するコメントに
<nobr>タイトルのコメント</nobr>
と記述する事をお勧めします。

②テーブル内にタイトルをつける

これは、いわゆる見出しです。
<TD>の代わりに<TH>にすれば、その部分のセルが見出しになります。
見出しセルは太字で中央表示されます。

細かい説明はともかく、どういう効果が出るのか見て下さい。
<TABLE BORDER>
<TR>
<TH>札幌</TH>
<TH>東京</TH>
<TH>大阪</TH>
<TH>福岡</TH> </TR> <TR> <TD>中田一郎</TD> <TD>山本美和子</TD> <TD>村上良子</TD> <TD>加藤周造</TD> </TR> <TR> <TD>岡田美香</TD> <TD>丸山俊夫</TD> <TD>池上一成</TD> <TD>北沢加奈子</TD> </TR> <TR> <TD>山辺太一</TD> <TD>鈴木輝夫</TD> <TD>上田信太郎</TD> <TD>高沢秀和</TD> </TR> </TABLE> 		←長いですねｗ
　名前は架空のモノなので、気にしないで下さい。


∑d(ﾟ∀ﾟ◎)　ﾈｯ!!!<TH>の部分が、太字で中央表示されてるでしょ。
↓　↓　↓　↓
札幌 東京 大阪 福岡
中田一郎 山本美和子 村上良子 加藤周造
岡田美香 丸山俊夫 池上一成 北沢加奈子
山辺太一 鈴木輝夫 上田信太郎 高沢秀和



スペースが余ってるので、ど～でもいい雑談ｗ

個人的に<TH>は、あんま使わないけど、CSSで一括指定する時は便利かもNё
例えば・・・
TH{ font-size:11pt; color:white; line-height:150%; letter-spacing:3pt; background-color:red; }
こんな風に指定しちゃえば、文字の大きさも色も行間も文字間も指定できるし、セルの背景色も指定できちゃうもん(〃ﾟ∀ﾟ)(ﾟ∀ﾟ〃)ﾈｪｰ
太字が嫌だったら、font-weight:normal;　って指定入れれば、通常の太さになるし、中央寄せが嫌なら　text-align:left;　って入れときゃ左寄せになるし。
特定のセルだけ、特定の効果を付けたい！！な～んて場合にもオススメ∑d(ﾟヮﾟ*)ﾈｯ!!!
<TABLE BORDER>
<TR>
<TD></TD>
<TH>東京</TH>
<TH>大阪</TH>
<TH>福岡</TH>
</TR>
<TR>
<TH>1月</TH>
<TD>296,870</TD>
<TD>337,220</TD>
<TD>132,580</TD>
</TR>
<TR>
<TH>2月</TH>
<TD>326,390</TD>
<TD>319,150</TD>
<TD>182,260</TD>
</TR>
<TR>
<TH>3月</TH>
<TD>315,980</TD>
<TD>322,650</TD>
<TD>192,990</TD>
</TR>
</TABLE>
 　またしても長い・・・

　なのに、出来あがったデーブルはちっちゃい( ´ﾟ,_ゝﾟ):;*.’:;ﾌﾞｯ

　今度は、上と左に見出しセルを付けました～！！

東京 大阪 福岡
1月 296,870 337,220 132,580
2月 326,390 319,150 182,260
3月 315,980 322,650 192,990




スペースが余ってるので、ど～でもいい雑談ｗ

この<TH>タグは、bodyで言う所の、<h1>と同じようなモノです。
違いと言えば、bodyの場合、<h1>～<h6>まであるのに対し、<TH>は一つだけ。
文字の大きさなどは、選べません。
<h1>～<h6>ってのは、ビルダーなどを使っている人は『見出し１～見出し６』まで選べると思うけど、アレのこと∑d(ﾟヮﾟ*)ﾈｯ!!!


テーブル作成の目次に戻る　　　TOP