タダでネットでお小遣い〜別館〜

タダでネットでホームページを作ろう！

           ● 大きい文字にする　　● 小さい文字にする

テーブル

テーブルを作る   ↓

<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→右

サンプル


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

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

<br clear="★">

サンプル


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

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

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

サンプル


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

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

<th width="★" height="★">〜</th>
<td width="★" height="★">〜</td>

キャプションをつける   ↓

テーブルにキャプション（タイトル）を付けたいときに 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"→下

サンプル


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

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

<table cellspacing="★" cellpadding="★">〜</table>

サンプル


枠線の色を指定する   ↓

テーブルの枠線の色を指定する場合は、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>

サンプル


セルの連結（縦方向）   ↓

<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" を指定しています
見出し
コメントコメントコメント
コメントコメントコメント
コメントコメントコメント

掲示板 | なんでも掲示板 | リンクについて | フォームメール | Copyright (C) タダでネットでお小遣い〜別館〜All Rights Reserved.