■■■表作成■■■

< TABLEBORDER="*">
</TABLE>
※BORDER="*"は枠の太さ
<TR>段</TR>※セル改行
<TH>セル</TH>太字、左右上下中心（題字用）
<TD>セル</TD>

---

１：内容のみ＋＋＋＋＋<TABLE><TR><TD></TD></TR></TABLE>で構成

<TABLE border="1"> <TR> <TD>内容１</TD> <TD>内容２</TD> <TD>内容３</TD> </TR> <TR> <TD>内容５</TD> <TD>内容６</TD> <TD>内容７</TD> </TR> <TR> <TD>内容８</TD> <TD>内容９</TD> <TD>内容１０</TD> </TR> </TABLE>

内容１	内容２	内容３
内容５	内容６	内容７
内容８	内容９	内容１０

---

２：見出しをつけて＋＋＋＋＋<TH></TH>タグを付け加えます。

<TABLE BORDER="1"> <TR> <TH>見出し１</TH> <TH>見出し２</TH> <TH>見出し３</TH> </TR> <TR> <TD>見出し１の内容１</TD> <TD>見出し２の内容１</TD> <TD>見出し３の内容１</TD> </TR> <TR> <TD>見出し１の内容２</TD> <TD>見出し２の内容２</TD> <TD>見出し３の内容３</TD> </TR> </TABLE>

見出し１	見出し２	見出し３
見出し１の内容１	見出し２の内容１	見出し３の内容１
見出し１の内容２	見出し２の内容２	見出し３の内容３

---

３：色をつけて＋＋＋＋＋BGCOLOR="#******"
※#******は、色コードを参照

<TABLE BORDER="1"BGCOLOR="#CCFF99"> <TR BGCOLOR="#66CC66"> <TH NOWRAP>見出し１</TH> <TH>見出し２</TH> <TH>見出し３</TH> </TR> <TR> <TD>見出し１の内容１</TD> <TD>見出し２の内容１</TD> <TD>見出し３の内容１</TD> </TR> <TR> <TD>見出し１の内容２</TD> <TD>見出し２の内容２</TD> <TD>見出し３の内容３</TD> </TR> </TABLE>

見出し１	見出し２	見出し３
見出し１の内容１	見出し２の内容１	見出し３の内容１
見出し１の内容２	見出し２の内容２	見出し３の内容３

---

４：もっとＨＰを軽くするためには

WIDTH="表の幅"
HEIGHT="表の高さ"
などを付け加えましょう。

CELLPADDING="セル内の余白"
CELLSPACING="罫線の幅"
なども指定すると面白い表ができます。

<TABLE border="1" width="500" height="100" cellpadding="5" cellspacing="20"> <TBODY> <TR> <TD>こんな感じになります。</TD> <TD>だからなんだっていうのか？</TD> </TR> <TR> <TD>これを利用する人はいるの？？</TD> <TD>わかりませんが・・・（笑）</TD> </TR> </TBODY> </TABLE>

こんな感じになります。	だからなんだっていうのか？
これを利用する人はいるの？？	わかりませんが・・・（笑）

先ほどから見かける

これなんか

も実は表タグを使ってるんですねぇ。
文字がくずれにくいので。タグを使用する場合は下を見てね。

<TABLE width="500"> <TBODY> <TR> <TD bgcolor="#FFDDEE">これなんか</TD> </TR> </TBODY> </TABLE>

---

■テーブルサンプル

メールで稼ぐ

<TABLE bgcolor="#6a6aff" cellpadding="3" cellspacing="3" width="100"> <TR bgcolor="#e1e1ff"> <TD align="center"> <FONT color="#cc00cc" size="3"メールで稼ぐ</FONT> </TD> </TR> </TABLE>

<TABLE bgcolor="#6a6aff" cellpadding="3" cellspacing="3" widht="100">

bgcolor="#6a6aff"
外枠の色です。色は色コード参照

#6a6aff

このような表をHTML言語で表すと

<TABLE cellpadding="5" bgcolor="#6a6aff"> <TR> <TD><FONT color="#ffffff">#6a6aff </FONT></TD> </TR> </TABLE>

++++++++++++++++++++++++++++++++++++++++++++++

cellpadding="3"
テーブルのセル内の空白が３　という意味です。
これの記述を省くと　０　で、文字と枠の幅が小さすぎて見にくいので。

Cellpadding="3"

ここに内容を

<TABLE cellpadding="3" bgcolor="#ffff00"> <TR> <TD><FONT size="2">ここに内容を</FONT></TD> </TR> <TABLE>

Cellpadding="0"

ここに内容を

<TABLE cellpadding="0" bgcolor="#ffff00"> <TR> <TD><FONT size="2">ここに内容を</FONT></TD> </TR> <TABLE>

++++++++++++++++++++++++++++++++++++++++++++++

cellspacing="3"
罫線の幅が３　という意味です。

cellspacing="3"

ここに内容を

<TABLE cellspacing="3" border="0" bgcolor="#6a6aff"> <TR bgcolor="#e1e1ff"> <TD><FONT color="#990000" size="2">ここに内容を</FONT> </TD> </TR> </TABLE>

罫線の幅が１　の場合
よく見るパターンですね。
cellspacing="1"

ここに内容を

<TABLE cellspacing="1" border="0" bgcolor="#6a6aff"> <TR bgcolor="#e1e1ff"> <TD><FONT color="#990000" size="2">cellspacing="1"</FONT> </TD> </TR> </TABLE>

★cellspacing="1"のサンプル

ここに内容を

<TABLE cellspacing="1" border="0" bgcolor="#000000"> <TR bgcolor="#e1e1ff"> <TD><FONT color="#ｆｆｆｆｆｆ" size="2">ここに内容を</FONT> </TD> </TR> </TABLE>

++++++++++++++++++++++++++++++++++++++++++++++
TR bgcolor="#e1e1ff"
段で色をつけます。複数の行を同じ色にするときに便利です。

こんな

感じ

になります

<TABLE cellspacing="3" bgcolor="#6a6aff"> <TR bgcolor="#e1e1ff"> <TD><FONT size="2">こんな</FONT></TD> <TD><FONT size="2">感じ</FONT></TD> <TD><FONT size="2">になります</FONT></TD> </TR> </TABLE>

TDで色指定した場合

<TD bgcolor="#eeeeff">こんな</TD>
<TD bgcolor="#ffe1f0">感じに</TD>
<TD bgcolor="#ffffec">なります</TD>

こんな

感じに

なります

<TABLE cellspacing="3" bgcolor="#6a6aff"> <TR> <TD bgcolor="#eeeeff"><FONT size="2">こんな</FONT></TD> <TD bgcolor="#ffe1f0"><FONT size="2">感じに</FONT></TD> <TD bgcolor="#ffffec"><FONT size="2">なります</FONT></TD> </TR> <TABLE>

ココのサイトにもよく使われる表

ここに内容を

<TABLE border="1" cellpadding="5" cellspacing="0" width="400" height="100" bordercolordark="#FFFFFF" bordercolorlight="#000000"> <TBODY> <TR> <TD align="center" bgcolor="#cccccc"> <TABLE border="0"> <TBODY> <TR> <TD width="380" bgcolor="#ffffff" height="80">ここに内容を</TD> </TR> </TBODY> </TABLE>

bordercolordark="#FFFFFF" bordercolorlight="#000000"で立体に見せます。
※外の幅　width="400"を変更　注：中のTD width="380"も、指定サイズ以下に
※外の高　height="100"を変更　：中野ＴＤのheight="80"も指定サイズ以下に
背景色：現在灰色#cccccc　を好きな色に色は色コード参照