タダでインターネットでお小遣い稼ぎましょう!

タダでインターネットでお小遣いを稼ぎましょう!

スポンサードリンク
 

テーブル

前のページへ
 

 
テーブル

テーブルを作る   ↓

<table></table>タグは、挟まれた範囲がテーブルとなる基本のタグです。枠線を表示したい場合は、border属性を記述します。

	<table>
	<tr><td></td></tr>
	</table>
 
<tr></tr>は横一列分の最初と最後に記述します。
 
	<table>
	<tr><td>これがテーブルの基本です</td></tr>
	</table>
 

サンプル

これがテーブルの基本です
※枠線は表示されませんが、テーブルで囲まれています。

枠線を表示する場合

	<table border="1">
	<tr><td>これは、border="1"で枠線を表示しています</td></tr>
	</table>
 

サンプル

これは、border="1"で枠線を表示しています

テーブル(表)の増やし方

横方向に増やす→<tr></tr>内に<td></td>を 増やしたい分だけ記述
 
	<table border="1">
	<tr><td>コメント</td><td>コメント</td></tr>
	</table>
 

サンプル

コメントコメント

 
縦方向に増やす→<tr></tr>を縦に記述する
 
	<table border="1">
	<tr><td>コメント</td><td>コメント</td></tr>
	<tr><td>コメント</td><td>コメント</td></tr>
	</table>
 

サンプル

コメントコメント
コメントコメント

テーブル内の見出し

<th></th>タグで挟まれたテキストは、
太字でセンタリングされて表示されるので見出しとして利用できます。
セルに入るテキストやデータなどは、それぞれ<td>〜</td>内に記述します。
 
	<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>
 

サンプル

見出し見出し見出し
コメントコメントコメント
コメントコメントコメント

このページの上へ

 

枠線の幅を指定する   ↓

border属性で枠線の幅を指定します。
1以上の数値で指定してください。

	<table border="★">
	<tr><td> 〜 </td></tr>
	</table>
 
	<table border="10">
	<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>
 

サンプル

これはborder="5" です
見出し見出し見出し
コメントコメントコメント
コメントコメントコメント

 
これはborder="10" です
見出し見出し見出し
コメントコメントコメント
コメントコメントコメント

このページの上へ

 

テキストに対してテーブルの位置を指定する   ↓

align属性でテーブルを左、中央、右に指定します。
left や right を指定した場合は、テーブルに続くテキストがテーブルの横に回りこみます。

	<table align="★">
	<tr><td> 〜 </td></tr>
	</table>
 
left→左
center→中央
right→右
 

align属性でテーブルを左、中央、右に指定します。
left や right を指定した場合は、テーブルに続くテキストがテーブルの横に回りこみます。

<table border="1" align="★">
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
 
<table border="1" align="left" width="200">
<tr><td>コメント</td><td>コメント</td></tr>
<tr><td>コメント</td><td>コメント</td></tr>
</table>

<p>align属性でテーブルを左、中央、右に指定します。
left や right を指定した場合は、 テーブルに続くテキストがテーブルの横に回りこみます。</p> <hr> <table border="1" align="center" width="200"> <tr><td>コメント</td><td>コメント</td></tr> <tr><td>コメント</td><td>コメント</td></tr> </table> <p>align属性でテーブルを左、中央、右に指定します
left や right を指定した場合は、 テーブルに続くテキストがテーブルの横に回りこみます</p> <hr> <table border="1" align="right" width="200"> <tr><td>コメント</td><td>コメント</td></tr> <tr><td>コメント</td><td>コメント</td></tr> </table> <p>align属性でテーブルを左、中央、右に指定します
left や right を指定した場合は、 テーブルに続くテキストがテーブルの横に回りこみます</p>
 

サンプル   ↓

これはleft
コメントコメント

align属性でテーブルを左、中央、右に指定します。leftright を指定した場合は、 テーブルに続くテキストがテーブルの横に回りこみます。こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜

 
これはright
コメントコメント

align属性でテーブルを左、中央、右に指定しますleftright を指定した場合は、 テーブルに続くテキストがテーブルの横に回りこみます。こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜

 
これはcenter
コメントコメント

align属性でテーブルを左、中央、右に指定しますleftright を指定した場合は、 テーブルに続くテキストがテーブルの横に回りこみます。こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜

このページの上へ

 

テーブルに対してテキストの回りこみを解除する   ↓

上記のテキストの回りこみを解除して、それ以降のテキストを
テーブルの下の行から続けたいときに<br> タグに clear 属性を記述します。

<br clear="★"> left→テーブルが左にあるときの回り込み解除
right→テーブルが右にあるときの回り込み解除
all→どちらの場合でも有効
 
<table border="1" align="left" width="200">
<tr><td>コメント</td><td>コメント</td></tr>
<tr><td>コメント</td><td>コメント</td></tr>
</table>

<p>テキストの回りこみを解除して、それ以降のテキストを
テーブルの下の行から続けたいときに<br> タグに clear 属性を記述。 <br clear="left">ここから回り込みを解除しています </p> <hr> <table border="1" align="right" width="200"> <tr><td>コメント</td><td>コメント</td></tr> <tr><td>コメント</td><td>コメント</td></tr> </table> <p>テキストの回りこみを解除して、それ以降のテキストを
テーブルの下の行から続けたいときに<br> タグに clear 属性を記述します <br clear="right">ここから回り込みを解除しています </p>
 

サンプル

これはleft
コメントコメント

テキストの回りこみを解除して、それ以降のテキストをテーブルの下の行から続けたいときに<br> タグに clear 属性を記述。
ここから回り込みを解除しています。

 
これはright
コメントコメント

こんな感じ〜こんな感じ〜こんな感じ〜
ここから回り込みを解除しています。こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜

このページの上へ

 

テーブルのサイズを指定する   ↓

width属性でテーブルの幅を指定します。
パーセント(%)で指定するとブラウザのサイズに対する割合で表示され、
ピクセル(px)で指定すると指定した大きさで固定されます。

	<table width="★" height="★">
	<tr><td> 〜 </td></tr>
	</table>
 
※高さを指定する場合は(ピクセルのみ)
スタイルシートや<th>や<td>タグで
height属性を指定したほうがよいでしょう。

width属性でテーブルの幅を指定しますパーセント(%)で指定すると
ブラウザのサイズに対する割合で表示され、
ピクセル(px)で指定すると指定した大きさで固定されます。

<table border="1" width="50%">
<tr><th>見出し</th><th>見出し</th><th>見出し</th></tr>
<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>

<hr>

<table border="1" width="400" height="200">
<tr><th>見出し</th><th>見出し</th><th>見出し</th></tr>
<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>

 

サンプル

テーブルの幅を % で指定 (width="50%")
見出し見出し見出し
コメントコメントコメント
コメントコメントコメント
コメントコメントコメント

このテーブルは % で指定しているので、ブラウザのサイズによって大きさが変わります。

 
テーブルの幅をピクセルで指定 (width="400" height="200")
見出し見出し見出し
コメントコメントコメント
コメントコメントコメント
コメントコメントコメント

このテーブルは幅を固定しているので、大きさは変わりません。

このページの上へ

 

セルのサイズを指定する   ↓

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

<th width="★" height="★"></th>
<td width="★" height="★"></td>
<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>

<br>

<table border="1">
<tr><th height="70">見出し</th><th>見出し</th><th>見出し</th></tr>
<tr><td>コメント</td><td>コメント</td><td>コメント</td></tr>
<tr><td>コメント</td><td width="200">コメント</td><td>コメント</td></tr>
</table>
 

サンプル

見出し見出し見出し
コメントコメントコメント
コメントコメントコメント

このテーブルはデフォルト(指定なし)
何も指定しない場合は、中のテキストに合わせてセルの大きさが自動的に変わります。


例:テキストに合わせて自動的に変わります
コメントコメントコメント
コメントコメント何も指定しない場合は、中のテキストに合わせてセルの大きさが自動的に変わります

 

見出し見出し見出し
コメントコメントコメント
コメントコメントコメント

このテーブルはセルの横幅200、高さ70を指定

このページの上へ

 

キャプションをつける   ↓

テーブルにキャプション(タイトル)を付けたいときに captionタグを記述します。
位置を指定しない場合は、テーブルの上にセンタリングで表示されます。
キャプションの位置を align属性でテーブルの上か下に指定できます。

align="top"→テーブルの上にセンタリング
align="bottom"→テーブルの下にセンタリング
 
<table border="1">
<caption>これがキャプションです</caption>
<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>

<br>

<table border="1">
<caption align="bottom">これは下にキャプション</caption>
<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>
 

サンプル

これがキャプションです
見出し見出し見出し
コメントコメントコメント
コメントコメントコメント

これは下にキャプション
見出し見出し見出し
コメントコメントコメント
コメントコメントコメント

このページの上へ

 

セル内のテキストの位置を指定する   ↓

セル内のテキストなどの位置を align属性、valign属性を使って指定します。
align は横方向を指定、valign は縦方向を指定します。

<th align="★" valign="★"></th>
<tr align="★" valign="★"></tr>
<td align="★" valign="★"></td>
 
align="left"→左揃え
align="center"→中央揃え
align="right"→右揃え
valign="top"→上
valign="middle"→中央
valign="bottom"→下
 
<table border="1" width="300">
<caption>セル内のテキストの位置を指定する</caption>
<tr>
<td align="left" valign="top" height="100">左上</td>
<td align="center" valign="top">上中</td>
<td align="right" valign="top">右上</td>
</tr>
<tr>
<td align="left" valign="middle" height="100"></td>
<td align="center" valign="middle">真中</td>
<td align="right" valign="middle"></td>
</tr>
<tr>
<td align="left" valign="bottom" height="100">左下</td>
<td align="center" valign="bottom">下中</td>
<td align="right" valign="bottom">右下</td>
</tr>
</table>
 

サンプル

何も指定しない場合は、align="left"、valign="middle"になります。

このページの上へ

 

セルの間隔・マージンを指定する   ↓

テーブルの外枠とセル、セルとセルの間隔を cellspacing を使って指定します。
セルの枠とセル内のテキストとの間隔を cellpadding で指定します。

<table cellspacing="★" cellpadding="★"></table>
<table border="1" cellspacing="0" cellpadding="0">
<tr><th>見出し</th><th>見出し</th></tr>
<tr><td>コメント</td><td>コメント</td></tr>
</table>

<hr>

<table border="1" cellspacing="10" cellpadding="0">
<tr><th>見出し</th><th>見出し</th></tr>
<tr><td>コメント</td><td>コメント</td></tr>
</table>

<hr>

<table border="1" cellspacing="0" cellpadding="10">
<tr><th>見出し</th><th>見出し</th></tr>
<tr><td>コメント</td><td>コメント</td></tr>
</table>

<hr>

<table border="1" cellspacing="10" cellpadding="10">
<tr><th>見出し</th><th>見出し</th></tr>
<tr><td>コメント</td><td>コメント</td></tr>
</table>

<hr>

<table border="10" cellspacing="10" cellpadding="10">
<tr><th>見出し</th><th>見出し</th></tr>
<tr><td>コメント</td><td>コメント</td></tr>
</table>
 

サンプル

見出し見出し
コメントコメント

cellspacing="0" cellpadding="0"
見出し見出し
コメントコメント
cellspacing="10" cellpadding="0"
見出し見出し
コメントコメント
cellspacing="0" cellpadding="10"
見出し見出し
コメントコメント
cellspacing="10" cellpadding="10"
見出し見出し
コメントコメント
border="10" cellspacing="10" cellpadding="10"

このページの上へ

 

枠線の色を指定する   ↓

テーブルの枠線の色を指定する場合は、table borderに
bordercolorやbordercolorlight、bordercolordarkなどを記述します。
bordercolorは、枠線の色を一色で指定、
bordercolorlight、bordercolordarkは色を変えて立体的なテーブルを表示できます。

<table border="★" bordercolor="★"></table>
<table border="★" bordercolorlight="★" bordercolordark="★"></table>
 
<table border="10" bordercolor="#ff0000">
<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>

<br>

<table border="10" bordercolorligth="#0000ff"
bordercolordark="#000080">
<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>
 

サンプル

これはbordercolorを一色で指定
見出し見出し見出し
コメントコメントコメント
コメントコメントコメント

これはbordercolorligthとbordercolordarkで指定
見出し見出し見出し
コメントコメントコメント
コメントコメントコメント
 
※Netscapeはborder属性に完全に対応していません。
bordercolorlight、bordercolordark属性には対応していません。

このページの上へ

 

外枠の表示を指定する   ↓

frame属性で、テーブルの外枠の表示方法を指定します。

<table frame="★"> 〜 </table>
 
void→外枠なし
adove→上のみ
below→下のみ
hsides→上下のみ
vsides→左右のみ
lhs→左のみ
rhs→右のみ
box→全ての外枠
border→四辺の縁取り
 
<table border="3" bordercolor="#0000ff" frame="★">
<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>
 

サンプル

これはvoid
見出し見出し見出し
コメントコメントコメント
コメントコメントコメント

 

これはadove
見出し見出し見出し
コメントコメントコメント
コメントコメントコメント

 

これはbelow
見出し見出し見出し
コメントコメントコメント
コメントコメントコメント

 

これはhsides
見出し見出し見出し
コメントコメントコメント
コメントコメントコメント

 

これはvsides
見出し見出し見出し
コメントコメントコメント
コメントコメントコメント

 

これはlhs
見出し見出し見出し
コメントコメントコメント
コメントコメントコメント

 

これはrhs
見出し見出し見出し
コメントコメントコメント
コメントコメントコメント

 

これはbox
見出し見出し見出し
コメントコメントコメント
コメントコメントコメント

 

これはborder
見出し見出し見出し
コメントコメントコメント
コメントコメントコメント

このページの上へ

 

テーブル内の線の表示を指定する   ↓

セルの間の線の表示はrules属性で指定します。

<table rules="★"></table>
 
none→線なし
rows→横線のみ
cols→縦線のみ
all→全てを表示
 
<table border="3" bordercolor="#0000ff" rules="★">
<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>
 

サンプル


これはnone
見出し見出し見出し
コメントコメントコメント
コメントコメントコメント

 

これはrows
見出し見出し見出し
コメントコメントコメント
コメントコメントコメント

 

これはcols
見出し見出し見出し
コメントコメントコメント
コメントコメントコメント

 

これはall
見出し見出し見出し
コメントコメントコメント
コメントコメントコメント

このページの上へ

 

テーブルの背景色を指定する   ↓

テーブルの背景色をbgcolor属性で指定します
<table>タグに記述した場合、テーブル全体
<tr>タグに記述した場合、横一列
<th>や<td>タグに記述した場合、そのセルに背景色がつきます。

<table bgcolor="★"></table>
<tr bgcolor="★"></tr>
<th bgcolor="★"></th>
<td bgcolor="★"></td>
 
<table border="3" bgcolor="#7fffd4">
<tr>

<th bgcolor="#00ffff">見出し</th><th>見出し</th><th>見出し</th>

</tr>

<tr bgcolor="#ff00ff">

<td>コメント</td><td>コメント</td><td>コメント</td>

</tr>

<tr>

<td bgcolor="#808000">コメント</td><td>コメント</td><td>コメント</td>

</tr>
</table>
 

サンプル


ここは th で色指定テーブルの指定色テーブルの指定色
ここは tr で色指定ここは tr で色指定ここは tr で色指定
ここは td で色指定テーブルの指定色テーブルの指定色

このページの上へ

 

テーブルの背景画像を指定する   ↓

テーブルやセルの背景画像をbackground属性で指定します。
ブラウザによって表示方法が違うようなので、
ここではテーブル全体に指定します。

<table background="★"></table>
 
<table border="3" background="画像URL">
<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>
 

サンプル


見出し・・・見出し・・・見出し・・・
コメント・・・コメント・・・コメント・・・
コメント・・・コメント・・・コメント・・・

このページの上へ

 

セル内の改行を禁止する   ↓

テーブルの大きさを指定しない場合、テキストなどをセル内に収めるために、
テキストが長い場合に自動的に改行されます。
内容によって改行したくないときに、<th>や<td>タグに nowrap属性を記述します。

<th nowrap></th>
<td nowrap></td>
<table border="1" bgcolor="#99ffcc">
<tr><th>サンプル</th><th>サンプル</th></tr>
<tr>
<td>サンプル</td>
<td>テーブルの大きさを指定しない場合、
テキストなどをセル内に収めるために、テキストが長い場合に
自動的に改行されます。内容によって改行したくないときに、
<th>や<td>タグに nowrap属性を記述します</td>
</tr>
</table>

 
<table border="1" bgcolor="#99ffcc"> <tr><th>サンプル</th><th>サンプル</th></tr> <tr> <td nowrap>サンプル</td> <td nowrap>テーブルの大きさを指定しない場合、 テキストなどをセル内に収めるために、テキストが長い場合に 自動的に改行されます。内容によって改行したくないときに、 <th>や<td>タグに nowrap属性を記述します</td> </tr> </table>
 

サンプル

このページの上へ

 

セルの連結(縦方向)   ↓

<th>や<td>タグにrowspan属性を記述して、
そのセルから指定した数の下方向のセルをつなげて、
一つのセルにすることができます。

<th rowspan="★"></th>
<td rowspan="★"></td>
 
<table border="1">
<tr><th>見出し</th><th>見出し</th><th>見出し</th></tr>
<tr><td>コメント</td><td>コメント</td><td rowspan="3">コメント</td></tr>
<tr><td>コメント</td><td>コメント</td></tr>
<tr><td>コメント</td><td>コメント</td></tr>
</table>
 

サンプル

通常、背景色が水色の部分は、セルが立てに3列並びますが
rowspan="3" を指定して一つのセルにしています。
見出し見出し見出し
コメントコメントコメント
コメントコメント
コメントコメント



例:これは、<th>の部分にrowspan="4" を指定しています。
見出し見出し見出し
コメントコメント
コメントコメント
コメントコメント

このページの上へ

 

セルの連結(横方向)   ↓

<th>や<td>タグにcolspan属性を記述して、
そのセルから指定した数の右方向のセルをつなげて、
一つのセルにすることができます。

<th colspan="★"></th>
<td colspan="★"></td>
 
<table border="1">
<tr><th>見出し</th><th>見出し</th><th>見出し</th></tr>
<tr><td>コメント</td><td colspan="2">コメント</td></tr>
<tr><td>コメント</td><td>コメント</td><td>コメント</td></tr>
<tr><td>コメント</td><td colspan="2">コメント</td></tr>
</table>
 

サンプル


見出し見出し見出し
コメントコメント
コメントコメントコメント
コメントコメント

 

例:これは、<th>の部分にcolspan="3" を指定しています。
見出し
コメントコメントコメント
コメントコメントコメント
コメントコメントコメント

 

このページの上へ