HTML表のつくりかた
表の作成 きほん
TABLEタグを使用します。
<table></table>で囲む。 tableタグ単体では動作しません。
「TABLEタグ」の中で一行を指定する「TRタグ」や、セル（1マス）を指定する「TDタグ」などで囲む
<TR>～</TR>の範囲内が一行になり,
その中に必要な数だけセルを<TD>～</TD>で記入する
基本形
行を表すtrタグ、さらにマスを表すtdタグがあって表ができる。基本はtable,tr,tdが一つのセットとなる。
<table>
<TR><TD></TD><TD></TD></TR>
<TR><TD></TD><TD></TD></TR>
<TR><TD></TD><TD></TD></TR>
</table>
いろいろオプション
「TABLEタグ」に属性を複数つける場合、半角スペースで区切る。
表に外枠をつける。
<table border="数値">表の中身 </table>
外枠の太さを設定。
設定しない場合は「border="0"」となり表の枠は表示されない
見出しをつける。
一番上のセルを「TDタグ」ではなく「THタグ」で囲む。
見出しになったセルは太字になりセンタリングされます。「THタグ」も「trタグ」で囲みます
例
<table>
<TR><Th></Th><Th></Th></TR>
<TR><TD></TD><TD></TD></TR>
</table>
表にタイトルをつける
<caption>タイトル名</caption> 表の上部に表示
されます。
「captionタグ」は「tableタグ」と行を表す「trタグ」の間に記載します。
例
<table>
<caption>タイトル名</caption>
<TR><Th></Th><Th></Th></TR>
<TR><TD></TD><TD></TD></TR>
</table>
セル内の余白・間隔
CSSでも指定できます
tableタグに「cellpadding属性」。
<table cellpadding="pxまたは%">表の中身</table>
例
<table border="1" cellpadding="10">
<caption>タイトル名</caption>
<TR><Th></Th><Th></Th></TR>
<TR><TD></TD><TD></TD></TR>
</table>
外部リンク参考サイトさん
セル内余白（パディング）
表背景に色をつける
<table bgcolor="カラー名またはRGB値">表の中身</table>
table要素に「bgcolor属性」をつける
外部リンク参考サイトさん
・表の入れ方
・表作成
・表背景色
・タイトル
・見出し
CSSでの設定
