無料ではじめる!ホームページ入門〜ホームページ作成解説サイト〜 HOME HP HTML UP other Link about

HOME > HTML > HTML逆引きリファレンス > テーブル

テーブル

テーブル(表)を作りたい

<table ○>〜</table>…表
<tr>〜</tr>…行
<td>〜</td>…セル
○…border="●"
●…枠線の幅(ピクセル)

<table>〜</table>タグでテーブルの範囲を指定します。<tr>〜</tr>タグで行を、<td>〜</td>でセルを指定します。
枠線を表示させるときは<table>タグのboder属性で指定します。

HTMLソース
<table>
<tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr>
<tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr>
</table>
<br>
<table border="1">
<tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr>
<tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr>
</table>

結果
1−11−21−3
2−12−22−3

1−11−21−3
2−12−22−3

TOP

テーブルの見出しをつけたい

<th>〜</th>

<th>〜</th>タグで行や列の見出しを作ることができます。 見出しとして指定されたセルの文字は太字で中央揃えになります。

HTMLソース
<table border="1">
<tr>
<th>名前</th>
<th>住所</th>
<th>電話番号</th>
</tr>
<tr>
<td>○○○○</td>
<td>○○県××市△△町</td>
<td>○○○−○○○−○○○○</td>
</tr>
</table>

結果
名前住所電話番号
○○○○○○県××市△△町○○○−○○○−○○○○

TOP

枠線の幅を指定したい

<table border="○">〜</table>
○…枠線の幅(ピクセル)

<table>タグのborder属性で枠線の幅を指定します。

HTMLソース
<table border="1">
<tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr>
<tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr>
</table> <br>
<table border="7">
<tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr>
<tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr>
</table>

結果
1−11−21−3
2−12−22−3

1−11−21−3
2−12−22−3

TOP

テーブルの位置を指定したい

<table align="○">〜</table>…表
<tr>〜</tr>…行
<td>〜</td>…セル
○…left、right、center

align属性でテーブルの位置を指定します。leftまたはrightを指定したときは、テーブルに続くテキストがテーブルの横に回りこみます。

HTMLソース
<table border="1" align="left">
<tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr>
<tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr>
</table>
<p>
align属性でテーブルの位置を指定します。leftまたはrightを指定したときは、テーブルに続くテキストがテーブルの横に回りこみます。
</p>
<table border="1" align="right">
<tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr>
<tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr>
</table>
<p>
align属性でテーブルの位置を指定します。leftまたはrightを指定したときは、テーブルに続くテキストがテーブルの横に回りこみます。
</p>

結果
1−11−21−3
2−12−22−3

align属性でテーブルの位置を指定します。leftまたはrightを指定したときは、テーブルに続くテキストがテーブルの横に回りこみます。

1−11−21−3
2−12−22−3

align属性でテーブルの位置を指定します。leftまたはrightを指定したときは、テーブルに続くテキストがテーブルの横に回りこみます。


TOP

テーブルに対する回り込みを解除したい

<br clear="○">
○…left、right、all

<br>タグにclear属性を指定することで、テキストの回り込みを途中で解除することができます。
left…テーブルが左側にあるときの回り込みを解除。
right…テーブルが右側にあるときの回り込みを解除。
all…テーブルが右、左どちらの場合にも有効。

HTMLソース
<table border="1" align="left">
<tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr>
<tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr>
</table>
<p>
align属性でテーブルの位置を指定します。
<br clear="left">
leftまたはrightを指定したときは、テーブルに続くテキストがテーブルの横に回りこみます。
</p>

結果
1−11−21−3
2−12−22−3

align属性でテーブルの位置を指定します。
leftまたはrightを指定したときは、テーブルに続くテキストがテーブルの横に回りこみます。


TOP

キャプション(表のタイトル)をつけたい

<caption align="○">〜</caption>
○…top、bottom

テーブルにキャプション(タイトル)をつけるには<caption>〜</caption>タグを使います。align属性で位置を指定します。 指定しない場合はテーブルの上部に表示されます。

HTMLソース
<table border="1">
<caption align="top">表1</caption>
<tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr>
<tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr>
</table>
<br>
<table border="1">
<caption align="bottom">表2</caption>
<tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr>
<tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr>
</table>

結果
表1
1−11−21−3
2−12−22−3

表2
1−11−21−3
2−12−22−3

TOP

テーブルのサイズを指定したい

<table width="○" height="●">〜</table>
○…テーブルの幅(ピクセルまたはパーセント)
●…テーブルの高さ(ピクセル)

<table>タグにwidth属性で幅を、height属性で高さを指定します。ただしheight属性で高さを指定する方法は、HTML4.01では定義されていないので、スタイルシートか、<th>タグや<td>タグのheight属性で指定したほうがよいでしょう。

HTMLソース
<table border="1" width="400">
<tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr>
<tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr>
</table>

結果
1−11−21−3
2−12−22−3

TOP

セルのサイズを指定したい

<th width="○" height="●">〜</th>
<td width="○" height="●">〜</td>
○…セルの幅(ピクセルまたはパーセント)
●…セルの高さ(ピクセル)

<th>タグまたは<td>タグに、width属性やheight属性でセルの幅や高さを指定します。

HTMLソース
<table border="1">
<tr> <td width="150">1−1</td> <td>1−2</td> <td>1−3</td> </tr>
<tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr>
</table>

結果
1−11−21−3
2−12−22−3

TOP

セルの間隔やマージンを指定したい

<table cellspacing="○" cellpadding="●">〜</table>
○…セルの間隔(ピクセル)
●…セル内のマージン(ピクセル)

cellspacing属性でテーブルの外枠とセル、セルとセルの間隔を指定します。cellpadding属性でセルの枠とセル内の内容との間隔を指定します。

HTMLソース
<table border="1" cellspacing="5" cellpadding="20">
<tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr>
<tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr>
</table>

結果
1−11−21−3
2−12−22−3

TOP

セル内のテキストの位置を指定したい

<tr align="○" valign="●">〜</tr>
<th align="○" valign="●">〜</th>
<td align="○" valign="●">〜</td>
○…left、center、right
●…top、middle、bottom、baceline

align属性で、データの横方向の位置を指定、valign属性でデータの垂直方向の位置を指定します。
left…左揃え
center…中央揃え
right…右揃え
top…上
middle…中央
bottom…下
baceline…横方向のデータのベースライン基準。各セル内の1行目のベースラインを揃えます。

HTMLソース
<table border="1" width="420">
<tr> <td align="right" height="50"></td> <td align="center"></td> <td align="left"></td> </tr>
<tr> <td valign="top" height="50"></td> <td valign="middle"></td> <td valign="bottom"></td> </tr>
</table>

結果

TOP

外枠の表示方法を指定したい

<table frame="○">〜</table>

○…void、above、below、hsides、vsides、lhs、rhs、box、border

<table>〜</table>タグのframe属性で外枠の表示方法を指定します。
void…外枠なし
above…上のみ
below…下のみ
hsides…上下のみ
vsides…左右のみ
lhs…左のみ
rhs…右のみ
box…外枠すべて
border…四辺の縁取り

HTMLソース
<table frame="hsides">
<tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr>
<tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr>
</table>
<br>
<table border="1" frame="above">
<tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr>
<tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr>
</table>

結果
1−11−21−3
2−12−22−3

1−11−21−3
2−12−22−3

TOP

内側罫線の表示方法を指定したい

<table rules="○">〜</table>
○…none、groups、rows、cols、all

<table>〜</table>タグのrules属性で内側罫線の表示方法を指定します。
none…罫線なし
groups…thead、tfoot、tbody、colgroup、colの境界のみ
rows…横の列の境界のみ
cols…縦の列の境界のみ
all…すべての境界

HTMLソース
<table border="1" rules="rows">
<tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr>
<tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr>
</table>
<br>
<table border="1" rules="cols">
<tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr>
<tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr>
</table>

結果
1−11−21−3
2−12−22−3

1−11−21−3
2−12−22−3

TOP

テーブルの背景色を指定したい

<table bgcolor="○">〜</table>
<tr bgcolor="○">〜</tr>
<th bgcolor="○">〜</th>
<td bgcolor="○">〜</td>
○…色指定値または色名

<table>タグのbgcolor属性で、テーブル全体の背景色を指定します。<tr>タグでで指定した場合はその横一列、<th>タグ、<td>タグで指定した場合は、そのセルの背景色を変えることができます。
カラーコードはこちら。

HTMLソース
<table border="1" bgcolor="#33CCCC">
<tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr>
<tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr>
</table>
<br>
<table border="1">
<tr bgcolor="red"> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr>
<tr> <td>2−1</td> <td bgcolor="#66CC33">2−2</td> <td>2−3</td> </tr>
</table>

結果
1−11−21−3
2−12−22−3

1−11−21−3
2−12−22−3

TOP

テーブルの背景画像を指定したい

<table background="○">〜</table>
<tr background="○">〜</tr>
<th background="○">〜</th>
<td background="○">〜</td>
○…画像ファイル名(URL)

<table>タグのbackground属性で、テーブルの背景画像を指定します。
<tr>タグで指定すると、その横一列の背景として表示されます。ただしこの指定はNetscape Navigatorのみ対応です。
<th>タグ、<td>タグで指定すると、そのセルの背景として表示されます。

HTMLソース
<table border="1" background="../img/w102.gif">
<tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr>
<tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr>
</table>
<br>
<table>
<tr> <td>1−1</td> <td background="../img/w102.gif">1−2</td> <td>1−3</td> </tr>
<tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr>
</table>

結果
1−11−21−3
2−12−22−3

1−11−21−3
2−12−22−3

TOP

縦方向にセルを連結したい

<th rowspan="○">〜</th>
<td rowspan="○">〜</td>
○…連結するセルの数

<th>タグや<td>タグのrowspan属性で、セルを縦に連結させることができます。

HTMLソース
<table border="1">
<tr> <td rowspan="2">1−1</td> <td>1−2</td> <td>1−3</td> </tr>
<tr> <td>2−2</td> <td>2−3</td> </tr>
</table>

結果
1−11−21−3
2−22−3

TOP

横方向にセルを連結したい

<th colspan="○">〜</th>
<td colspan="○">〜</td>
○…連結するセルの数

<th>タグや<td>タグのcolspan属性で、セルを横に連結させることができます。

HTMLソース
<table border="1">
<tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr>
<tr> <td colspan="3">2−1</td> </tr>
</table>

結果
1−11−21−3
2−1

TOP

列をグループ化したい

<colgroup ○>〜</colgroup>
○…span="グループ化する列数"、width="列幅(ピクセル、%、*)"、align="●"、valign="□"
●…left、right、center
□…top、middle、bottom、baseline

<colgroup ○>〜</colgroup>タグで縦列のグループ化ができます。
グループ化を行うことで、複数の縦列に対してまとめてスタイルシートを適用したり、HTMLの属性を指定できるようになります。

HTMLソース
<table border="1">
<colgroup width="100"></colgroup>
<colgroup span="2" width="150" align="right"></colgroup>
<tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr>
<tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr>
</table>

結果
1−11−21−3
2−12−22−3

TOP

セル内の改行を禁止したい

<th nowrap>〜</th>
<td nowrap>〜</td>

通常では、テーブルの大きさはブラウザが自動的に調節します。そのためデータが各セルにうまくおさまるように、セル内のテキストが長い場合は自動的に改行されてしまいます。
このような改行を禁止するには<th>タグや<td>タグにnowrap属性を指定します。

HTMLソース
<table border="1" width="300">
<tr>
<td width="60">1−1</td><td width="60">1−2</td>
<td>通常では、テーブルの大きさはブラウザが自動的に調節します。</td>
</tr>
<tr>
<td>2−1</td><td>2−2</td><td>2−3</td>
</tr>
</table>
<br>
<table border="1" width="300">
<tr>
<td width="60">1−1</td><td width="60">1−2</td>
<td nowrap>通常では、テーブルの大きさはブラウザが自動的に調節します。</td>
</tr>
<tr>
<td>2−1</td><td>2−2</td><td>2−3</td>
</tr>
</table>

結果
1−11−2通常では、テーブルの大きさはブラウザが自動的に調節します。
2−12−22−3

1−11−2通常では、テーブルの大きさはブラウザが自動的に調節します。
2−12−22−3

TOP

当サイトへのリンクは確認不要です。
ご意見・ご感想などございましたらこちらまで tada_hp@hotmail.com
Copyright (C) 2004 by K.Y All Rights Reserved.
SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送