ホームページ作成講座 めもタグ

トップページ | ホームページ講座 | HTML | CSS | 素材作成 | リンク

トップページ > 初心者向けホームページ作成講座 > 表を作成する

表を作成する

ここでは表の作成方法を説明します。
表でデータを表示したり、ページを整えることができます。

spacer

表を作成する

表を作成するには、表のベースとなる<TABLE>を記述し
次に行を定義する<TR>と</TR>を入れ、その中にセルを定義する
<TD>と</TD>を入れます。
（セルとは、数値やデータなどの文字列が入る部分です）
最後に閉じタグの</TABLE>を記述します。
<TABLE>に属性border=""を入れることで表の線の太さを指定できます。
border=""がないと線が表示されません。

記述例

<HTML>
<HEAD>
<TITLE>表を作成する</TITLE>
</HEAD>
<BODY>
２行の表（枠なし）
<TABLE>
<TR>
<TD>セル１</TD><TD>セル２</TD><TD>セル３</TD></TR>
<TD>セル１</TD><TD>セル２</TD><TD>セル３</TD></TR>
</TABLE><BR><BR>

３行の表（枠あり）
<TABLE border="3">
<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>
</BODY>
</HTML>

ブラウザでプレビュー

２行の表（枠なし）
セル１セル２セル３
セル１セル２セル３


３行の表（枠あり）
セル１セル２セル３
セル４セル５セル６
セル７セル８セル９

spacer

表の枠線の色・枠線の太さを変える

書式(表の枠線の色)
<TABLE bordercolor="カラーコード・色名">

書式(枠線の太さ)
<TABLE border="枠線の太さ">

表の線の太さを変えるには <TABLE>にborder="線の太さ"を記述し
枠線の色を指定するには bordercolor="カラーコード" を記述します。

記述例

<HTML>
<HEAD>
<TITLE>表の枠線の色・枠線の太さを変える</TITLE>
</HEAD>
<BODY>
線の太さを変えます。
<TABLE border="4">
<TR><TD>セル１</TD><TD>セル２</TD><TD>セル３</TD></TR>
<TR><TD>セル４</TD><TD>セル５</TD><TD>セル６</TD></TR>
</TABLE><BR>

線の色を変えます。
<TABLE bordercolor="#33cc99" border="4">
<TR><TD>セル１</TD><TD>セル２</TD><TD>セル３</TD></TR>
<TR><TD>セル４</TD><TD>セル５</TD><TD>セル６</TD></TR>
</TABLE>
</BODY>
</HTML>

ブラウザでプレビュー

線の太さを変えます。
セル１セル２セル３
セル４セル５セル６

線の色を変えます。
セル１セル２セル３
セル４セル５セル６

ブラウザによっては、表示が異なる場合があります。
また、border のみの指定の場合、太さは1となります。

spacer

表の大きさを指定する

書式
<TABLE width="表の横幅" height="表の縦幅">

表の大きさは width="" と height="" オプションで変更できます。
使用できる単位は％とピクセルです。

記述例

<HTML>
<HEAD>
<TITLE>表の大きさを指定する</TITLE>
</HEAD>
<BODY>
表の大きさを変えます（ピクセル）
<TABLE border="2" width="300" height="60">
<TR><TD>セル１</TD><TD>セル２</TD><TD>セル３</TD></TR>
<TR><TD>セル４</TD><TD>セル５</TD><TD>セル６</TD></TR>
</TABLE><BR>

表の大きさを変えます（％）
<TABLE border="2" width="50%" height="50%">
<TR><TD>セル１</TD><TD>セル２</TD><TD>セル３</TD></TR>
<TR><TD>セル４</TD><TD>セル５</TD><TD>セル６</TD></TR>
</TABLE>
</BODY>
</HTML>

ブラウザでプレビュー

表の大きさを変えます（ピクセル）
セル１セル２セル３
セル４セル５セル６

表の大きさを変えます（％）
セル１セル２セル３
セル４セル５セル６

spacer

表の表示位置を指定する(文字の回りこみを指定)

書式
<TABLE align="表の位置">

表の表示位置を指定するには align="" を使用します。
指定できる位置は left center right です。
同時に文字の回りこみも行われます。

記述例

<HTML>
<HEAD>
<TITLE>タイトルを入れてください</TITLE>
</HEAD>
<BODY>
<TABLE border="2" align="right">
<TR><TD>セル１</TD><TD>セル２</TD><TD>セル３</TD></TR>
<TR><TD>セル４</TD><TD>セル５</TD><TD>セル６</TD></TR>
</TABLE>あいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてと（右）<BR><BR><BR>

<TABLE border="2" align="left">
<TR><TD>セル１</TD><TD>セル２</TD><TD>セル３</TD></TR>
<TR><TD>セル４</TD><TD>セル５</TD><TD>セル６</TD></TR>
</TABLE>あいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそ<BR clear="all">たちつてと（左）<BR><BR><BR>

<TABLE border="2" align="center">
<TR><TD>セル１</TD><TD>セル２</TD><TD>セル３</TD></TR>
<TR><TD>セル４</TD><TD>セル５</TD><TD>セル６</TD></TR>
</TABLE>あいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてと（中央）
</BODY>
</HTML>

ブラウザでプレビュー

セル１セル２セル３
セル４セル５セル６
あいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそ（右）


セル１セル２セル３
セル４セル５セル６
あいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそ
たちつてと（左）


セル１セル２セル３
セル４セル５セル６
あいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてと（中央）

なお、文章の途中で<BR clear="all">を入れると
文字の回りこみを中断することができます。

spacer

表にタイトルをつける

書式
<CAPTION align="タイトルの位置"></CAPTION>

表にタイトルをつけるには<CAPTION>を使用します。
<CAPTION>〜</CAPTION>の挿入位置は
<TABLE>と<TR>の間です。

表の上に表示するには align="top" と記述し 表の下に表示するには align="bottom" と記述します。

記述例

<HTML>
<HEAD>
<TITLE>表にタイトルをつける</TITLE>
</HEAD>
<BODY>
<TABLE border="2">
<CAPTION align="top">表の上にタイトルをつけます</CAPTION>
<TR><TD>セル１</TD><TD>セル２</TD><TD>セル３</TD></TR>
<TR><TD>セル４</TD><TD>セル５</TD><TD>セル６</TD></TR>
</TABLE><BR>

<TABLE border="2">
<CAPTION align="bottom">表の下にタイトルをつけます</CAPTION>
<TR><TD>セル１</TD><TD>セル２</TD><TD>セル３</TD></TR>
<TR><TD>セル４</TD><TD>セル５</TD><TD>セル６</TD></TR>
</TABLE>
</BODY>
</HTML>

ブラウザでプレビュー

表の上にタイトルをつけます
セル１セル２セル３
セル４セル５セル６

表の下にタイトルをつけます
セル１セル２セル３
セル４セル５セル６

spacer

表に見出しを入れる

書式
<TH>見出し</TH>

表に見出しを入れるには<TH>〜</TH>タグを使います。
見出しにしたい箇所を<TD>タグの代わりに
<TH>〜</TH>で囲みます。

記述例

<HTML>
<HEAD>
<TITLE>表に見出しを入れる</TITLE>
</HEAD>
<BODY>
<TABLE border="2" width="300">
<TR><TH>項目１</TH><TH>項目２</TH></TR>
<TR><TD>セル１</TD><TD>セル２</TD></TR>
<TR><TD>セル３</TD><TD>セル４</TD></TR>
</TABLE>
</BODY>
</HTML>

ブラウザでプレビュー

項目１項目２
セル１セル２
セル３セル４

<TH>〜</TH>で囲まれた部分は 自動的にセンタリングされます。

spacer

セルを統合する

書式
<TD colspan="横（列）に統合するセル数"></TD>

書式
<TH rowspan="縦（行）に統合するセル数"></TH>

複数のセルを統合して、大きなセルを作るには
colspan="" rowspan="" を使用します。
<TD>、<TH>に記述します。

記述例

<HTML>
<HEAD>
<TITLE>セルを統合する</TITLE>
</HEAD>
<BODY>
<TABLE border="2" width="300">
<CAPTION align="top">横に統合します</CAPTION>
<TR><TH colspan="2">項目１</TH></TR>
<TR><TD>セル１</TD><TD>セル２</TD></TR>
<TR><TD>セル３</TD><TD>セル４</TD></TR>
</TABLE><BR><BR>

<TABLE border="2">
<CAPTION align="top">縦に統合します</CAPTION>
<TR><TH rowspan="3">一覧</TH><TD>セル１</TD><TD>セル２</TD></TR> <TR><TD>セル３</TD><TD>セル４</TD></TR>
<TR><TD>セル５</TD><TD>セル６</TD></TR>
</TABLE>
</BODY>
</HTML>

ブラウザでプレビュー

横に統合します
項目１
セル１セル２
セル３セル４


縦に統合します
一覧セル１セル２
セル３セル４
セル５セル６

spacer

セルを区切る枠線とセル内の余白を指定する

書式
<TABLE cellspacing="セルを区切る枠線の太さ" cellpadding="セル内の余白">

セルを区切る枠線の太さを指定するには cellspacing を
セル内の余白を指定するには cellpadding を使用します。

記述例

<HTML>
<HEAD>
<TITLE>セルを区切る枠線とセル内の余白を指定する</TITLE>
</HEAD>
<BODY>
cellspacingで枠線を太くします
<TABLE border="2" width="300" cellspacing="10">
<TR><TH>項目１</TH><TH>項目２</TH></TR>
<TR><TD>セル１</TD><TD>セル２</TD></TR>
<TR><TD>セル３</TD><TD>セル４</TD></TR>
</TABLE>

cellpaddingでセルと文字の余白を増やします
<TABLE border="2" cellpadding="10">
<TR><TH>項目１</TH><TH>項目２</TH></TR>
<TR><TD>セル１</TD><TD>セル２</TD></TR>
<TR><TD>セル３</TD><TD>セル４</TD></TR>
</TABLE>
</BODY>
</HTML>

ブラウザでプレビュー

cellspacingで枠線を太くします
項目１項目２
セル１セル２
セル３セル４

cellpaddingでセルと文字の余白を増やします
項目１項目２
セル１セル２
セル３セル４

spacer

セル内の改行を禁止する

書式
<TD nowrap>文字列</TD>

セル内の改行を禁止するには nowrap を使います。
<TD><TH>タグに記述します。

記述例

<HTML>
<HEAD>
<TITLE>セル内の改行を禁止する</TITLE>
</HEAD>
<BODY>
<TABLE border="2" width="50%">
<TR><TH>ファイル・フォルダをコピー</TH></TR>
<TR><TD>
コピーしたいファイル・フォルダ(ここでは「ドキュメント1」)を<BR>
右クリックしてメニューを開き、「コピー(c)」をクリックします。<BR>
コピーしたファイルは一時的に「クリップボード」に保管されます。<BR>
「クリップボード」とは、コピー・切り取ったものを<BR>
一時的に保管する場所のことです。
</TD></TR>
</TABLE>

<TABLE border="2" width="50%">
<TR><TH>ファイル・フォルダをコピー</TH></TR>
<TR><TD nowrap>
コピーしたいファイル・フォルダ(ここでは「ドキュメント1」)を<BR>
右クリックしてメニューを開き、「コピー(c)」をクリックします。<BR>
コピーしたファイルは一時的に「クリップボード」に保管されます。<BR>
「クリップボード」とは、コピー・切り取ったものを<BR>
一時的に保管する場所のことです。
</TD></TR>
</TABLE>
</BODY>
</HTML>

ブラウザでプレビュー

ファイル・フォルダをコピー
コピーしたいファイル・フォルダ(ここでは「ドキュメント1」)を
右クリックしてメニューを開き、「コピー(c)」をクリックします。
コピーしたファイルは一時的に「クリップボード」に保管されます。
「クリップボード」とは、コピー・切り取ったものを
一時的に保管する場所のことです。

ファイル・フォルダをコピー
コピーしたいファイル・フォルダ(ここでは「ドキュメント1」)を
右クリックしてメニューを開き、「コピー(c)」をクリックします。
コピーしたファイルは一時的に「クリップボード」に保管されます。
「クリップボード」とは、コピー・切り取ったものを
一時的に保管する場所のことです。

spacer

セルの色を変える

書式
<TD bgcolor="カラーコード"></TD>

セルに色を指定するには bgcolor="" を使用します。
<TABLE>に記述した場合、すべてのセルの色が変えることができ
<TD><TH>の場合、個別に色を変えることができます。

記述例

<HTML>
<HEAD>
<TITLE>セルの色を変える</TITLE>
</HEAD>
<BODY>
個別に色を変える
<TABLE border="2" width="50%" height="50%">
<TR> <TD bgcolor="#ff9900">セル１</TD> <TD bgcolor="#ff0000">セル２</TD> <TD bgcolor="#cc00ff">セル３</TD> </TR>
<TR> <TD bgcolor="#0000ff">セル４</TD> <TD bgcolor="#009900">セル５</TD> <TD bgcolor="#66ff00">セル６</TD> </TR>
</TABLE><BR>

枠線なしの表
<TABLE border="0" width="50%" height="50%">
<TR> <TD bgcolor="#ff9900">セル１</TD> <TD bgcolor="#ff0000">セル２</TD> <TD bgcolor="#cc00ff">セル３</TD> </TR>
<TR> <TD bgcolor="#0000ff">セル４</TD> <TD bgcolor="#009900">セル５</TD> <TD bgcolor="#66ff00">セル６</TD> </TR>
</TABLE><BR>

全部の色を変える
<TABLE border="2" width="50%" height="50%" bgcolor="#ff9900">
<TR> <TD>セル１</TD> <TD>セル２</TD> <TD>セル３</TD> </TR>
<TR> <TD>セル４</TD> <TD>セル５</TD> <TD>セル６</TD> </TR>
</TABLE>
</BODY>
</HTML>

ブラウザでプレビュー

個別に色を変える
セル１ セル２ セル３
セル４ セル５ セル６

枠線なしの表
セル１ セル２ セル３
セル４ セル５ セル６

全部の色を変える
セル１ セル２ セル３
セル４ セル５ セル６

spacer

表の背景に画像を表示する

書式
<TABLE background="パスとファイル名">

表の背景に画像を表示させるには background を使用します。
画像の場所指定の詳細は「フォルダや上層フォルダのファイル指定方法 」を参考にしてください。

表の背景に画像を表示する

<HTML>
<HEAD>
<TITLE>タイトルを入れてください</TITLE>
</HEAD>
<BODY>
<TABLE border="2" width="300" height="60" background="../images/wall01.jpg">
<TR> <TD>セル１</TD><TD>セル２</TD><TD>セル３</TD> </TR>
<TR> <TD>セル４</TD><TD>セル５</TD><TD>セル６</TD> </TR>
</TABLE><BR>
</BODY>
</HTML>

ブラウザでプレビュー

セル１セル２セル３
セル４セル５セル６

前の講座：リンクを作成する | 次の講座：フレームページを作成する | トップページ | ページの一番上へ▲