T,N,O〜タダでネットでお小遣い ＞＞ タダでインターネットでお小遣い稼ぎ！

テーブル

前のページへ

テーブル

テーブルを作る   ↓ 前のページへ

<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属性でテーブルを左、中央、右に指定します。left や right を指定した場合は、 テーブルに続くテキストがテーブルの横に回りこみます。こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜   これは right コメント コメント align属性でテーブルを左、中央、右に指定しますleft や right を指定した場合は、 テーブルに続くテキストがテーブルの横に回りこみます。こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜   これは center コメント コメント align属性でテーブルを左、中央、右に指定しますleft や right を指定した場合は、 テーブルに続くテキストがテーブルの横に回りこみます。こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜こんな感じ〜

このページの上へ

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

上記のテキストの回りこみを解除して、それ以降のテキストを テーブルの下の行から続けたいときに<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" を指定しています。 見出し コメント コメント コメント コメント コメント コメント コメント コメント コメント

このページの上へ