表示されているタグをコピー＆ペーストして使用してくださいね♪
基本技１．枠の太さを変えてみる
線の太さ「１」でつくる。１行だけ。
<TABLE BORDER="1">
<TR><TD>セル１</TD><TD>セル２</TD><TD>セル３</TD></TR>
</TABLE>
線の太さ「１」でつくる。２行
<TABLE BORDER="1">
<TR><TD>セル１</TD><TD>セル２</TD><TD>セル３</TD></TR>
<TR><TD>セル４</TD><TD>セル５</TD><TD>セル６</TD></TR>
</TABLE>
線の太さ「５」でつくる。２行
<TABLE BORDER="5">
<TR><TD>セル１</TD><TD>セル２</TD><TD>セル３</TD></TR>
<TR><TD>セル４</TD><TD>セル５</TD><TD>セル６</TD></TR>
</TABLE>
線の太さ「１０」でつくる。２行
<TABLE BORDER="10">
<TR><TD>セル１</TD><TD>セル２</TD><TD>セル３</TD></TR>
<TR><TD>セル４</TD><TD>セル５</TD><TD>セル６</TD></TR>
</TABLE>
基本技２．枠の色を変えてみる
線の太さ「５」で線の色は「ピンク」でつくる。２行
<TABLE BORDER="5"BORDERCOLOR="pink">
<TR><TD>セル１</TD><TD>セル２</TD><TD>セル３</TD></TR>
<TR><TD>セル４</TD><TD>セル５</TD><TD>セル６</TD></TR>
</TABLE>
線の太さ「５」で線の色は「ピンク」と影の色「緑」でつくる。２行
<TABLE BORDER="5"BORDERCOLORLIGHT="oink"BORDERCOLORDARK="green">
<TR><TD>セル１</TD><TD>セル２</TD><TD>セル３</TD></TR>
<TR><TD>セル４</TD><TD>セル５</TD><TD>セル６</TD></TR>
</TABLE>
基本技３．バックの色を変えてみる
線の太さ「５」バックの色「全体にピンク」で作る。２行
<TABLE BORDER="1"BGCOLOR="pink">
<TR><TD>セル１</TD><TD>セル２</TD><TD>セル３</TD></TR>
<TR><TD>セル４</TD><TD>セル５</TD><TD>セル６</TD></TR>
</TABLE>
線の太さ「５」バックの色「１行目ピンク」「２行目ブルー」で作る。２行
<TABLE BORDER="5">
<TR BGCOLOR="pink"><TD>セル１</TD><TD>セル２</TD><TD>セル３</TD></TR>
<TR BGCOLOR="pink"><TD>セル４</TD><TD>セル５</TD><TD>セル６</TD></TR>
</TABLE>
表の大きさを決める
<TABLE BORDER WIDTH="横の大きさ" HEIGHT="縦の大きさ">
<TR><TD>セル１</TD><TD>セル２</TD><TD>セル３</TD><TR>
<TR><TD>セル４</TD><TD>セル５</TD><TD>セル６</TD></TR>
</TABLE>
横にセルを合わせる
<TABLE BORDER="5"BORDERCOLOR="blue">
</TD><TD COLSPAN="2"ALIGN="center">セル１</TD><TD>セル２</TD></TR>
</TD><TD>セル３</TD><TD>セル４</TD><TD>セル５</TD></TR>
</TABLE>
「COLSPAN="*"」の数字は合わせたいセルの数を入れます。
セルの数より多くしてはいけません。↑の場合だと最大は３です。
セルを合わせた場合中の文字が右に寄ってしまいますので
「ALIGN="center"」のタグを入れると合わせたセルの真ん中になります。
縦にセルを合わせる
<TABLE BORDER="5"BORDERCOLOR="green">
</TD><TD ROWSPAN="2"VALIGN="center">セル１</TD><TD>セル２</TD><TD>その３</TD></TR>
</TD><TD>その４</TD><TD>その５</TD></TR>
</TABLE>
「ROWSPAN="*"」の数は合わせたいセルの数を入れます。
セルの数より多くしてはいけません。↑の場合だと最大は２です。
セルを合わせた場合中の文字が上に寄ってしまいますので
「VALIGN="center"」のタグを入れると合わせたセルの真ん中になります。
枠の太さを変える
<TABLE BORDER CELLSPACING="枠の太さ">
<TR><TD>ともちゃんち</TD><TD>ハムちゃんち</TD></TR>
</TABLE>
枠内の余白を変える
<TABLE BORDER CELLPADDING="余白">
<TR><TD>ともちゃんち</TD><TD>ハムちゃんち</TD></TR>
</TABLE>
外枠の表示を変える
| ともちゃんち |
ハムちゃんち |
| どこでしょう♪ |
木のおうち♪ |
<TABLE BORDER FRAME="表示方法">
<TR><TD>ともちゃんち</TD><TD>ハムちゃんち</TD></TR>
<TR><TD>どこでしょう♪</TD><TD>木のおうち♪</TD></TR>
</TABLE>
表示方法： void （ 外枠なし ）：above （ 外枠の上部のみ ）
below （ 外枠の下部のみ ）：hsides （ 上下のみ ）
vsides （ 左右のみ ）：lhs （ 左側のみ ）
rhs （ 右側のみ ）：box （ すべて表示 ）
セル枠の表示を変える
| ともちゃんのおうち |
ハムちゃんのおうち |
| ３階建て |
２階建て |
<TABLE BORDER RULES="表示方法">
<TR><TD>ともちゃんのおうち</TD><TD>ハムちゃんのおうち</TD></TR>
<TR><TD>３階建て</TD><TD>２階建て</TD></TR>
</TABLE>
表示方法：none（ セルの罫線なし ）：all（ すべて表示 ）
rows（ 行間のみ表示 ）：cols（ 列間のみ表示 ）
テーブルそのものの位置を決める
| ともちゃんのおうち |
ハムちゃんのおうち |
| ３階建て |
２階建て |
<TABLE BORDER ALIGN="位置">
<TR><TD>ともちゃんのおうち</TD><TD>ハムちゃんのおうち</TD></TR>
<TR><TD>３階建て</TD><TD>２階建て</TD></TR>
</TABLE>
位置は：右「ｒｉｇｈｔ」：真ん中「ｃｅｎｔｅｒ」：左「ｌｅｆｔ」
表のタイトルを付ける
お家くらべ
| ともちゃんのおうち |
ハムちゃんのおうち |
| ３階建て |
２階建て |
<TABLE BORDER="2">
<CAPTION>タイトル</CAPTION>
<TR><TD>ともちゃんのおうち</TD><TD>ハムちゃんのおうち</TD></TR>
<TR><TD>３階建て</TD><TD>２階建て</TD></TR>
</TABLE>
表の下につけたいときは<CAPTION ALIGN="bottom">
見出しの部分を太字にする
| ともちゃんのおうち |
ハムちゃんのおうち |
| ３階建て |
２階建て |
<TABLE BORDER="2">
<TR><TH>ともちゃんのおうち</TH><TH>ハムちゃんのおうち</TH></TR>
<TR><TD>３階建て</TD><TD>２階建て</TD></TR>
</TABLE>
テーブルのセル内の文字を太字にする。
| 普通の太さ | これは太字 | 普通の太さ |
|---|
| これは太字 | これは太字 | これは太字 |
|---|
太字にしたいセルの＜ＴＤ＞＜／ＴＤ＞を＜ＴＨ＞＜／ＴＨ＞に変えます。
テーブル内の文字や画像の位置を決める
↑わかりやすいようにテーブルの大きさを
「WIDTH="300" HEIGHT="150"」で指定しています。
<TABLE border="1">
<TR>
<TD ALIGN="left" VALIGN="top">枠内の文字や画像のＵＲＬ</TD>
<TD ALIGN="center" VALIGN="top">枠内の文字や画像のＵＲＬ</TD>
<TD ALIGN="right" VALIGN="top">枠内の文字や画像のＵＲＬ</TD>
</TR>
<TR>
<TD ALIGN="left" VALIGN="center">枠内の文字や画像のＵＲＬ</TD>
<TD ALIGN="center" VALIGN="center">枠内の文字や画像のＵＲＬ</TD>
<TD ALIGN="right" VALIGN="center">枠内の文字や画像のＵＲＬ</TD>
</TR>
<TR>
<TD ALIGN="left" VALIGN="bottom">枠内の文字や画像のＵＲＬ</TD>
<TD ALIGN="center" VALIGN="bottom">枠内の文字や画像のＵＲＬ</TD>
<TD ALIGN="right" VALIGN="bottom">枠内の文字や画像のＵＲＬ</TD>
</TR>
</TABLE>
ページ全体のテーブルの文字の大きさの指定
サンプルページ
以下のタグを<head>〜</head>タグ間に記入してください。
<STYLE TYPE="text/css">
<!--
TABLE {font-size :20pt;}
-->
</STYLE>
サイズの「＊ｐｔ」を好きな大きさに変えてください。
ページ全体のテーブルの文字の色の指定
サンプルページ
以下のタグを<head>〜</head>タグ間に記入してください。
<STYLE TYPE="text/css">
<!--
TABLE {color:#FF1493;}
-->
</STYLE>
「＃＊＊＊＊＊＊」を好きな色の番号にしてください
ページ全体のテーブルの文字大きさと色の指定
サンプルページ
以下のタグを<head>〜</head>タグ間に記入してください。
<STYLE TYPE="text/css">
<!--
TABLE {font-size :11pt;color:#FF0000;}
-->
</STYLE>
サイズの「＊ｐｔ」を好きな大きさに「＃＊＊＊＊＊＊」を好きな色の番号にしてください
半透明のテーブル
<TABLE BORDER="1"style="filter:Alpha(opacity=50);">
<TR>
<TD>セル１</TD>
<TD>セル２</TD>
<TD>セル３</TD>
</TR>
<TR>
<TD>セル４</TD>
<TD>セル５</TD>
<TD>セル６</TD>
</TR>
</TABLE>
「opacity=50」の数値が少ない（１〜１００）ほど透明になります
オンマウスでセルの色を変える
↑「セル１」と「セル４」にマウスを合わせてください♪
変えたいセルの＜ＴＤ＞を
<TD onmouseover="this.style.backgroundColor='色番号'" onmouseout="this.style.backgroundColor=''">
にします。
スッキリ枠のテーブル
<TABLE Border Cellspacing="0" BorderColor="枠線の色番号">
<TR><TD>セル１</TD><TD>セル２</TD><TD>セル３</TD></TR>
<TR><TD>セル４</TD><TD>セル５</TD><TD>セル６</TD></TR>
</TABLE>
テーブル枠の種類
<TABLE STYLE="border:効果;border-color:枠の色;">
<TR><TD>本文</TD></TR></TABLE>
| 「効果の種類」 |
|
|
「dotted」 |
|
「ridge」 |
|
「groove」 |
|
｢dashed」 |
|
「double」 |
|
「inset」 |
|
「outset」 |
|
「solid」 |