reference

スタイルシートの書き方

ヘッダ情報

ページ全体

見出し

文字（テキスト）

リスト

テーブル

画像・イメージ

リンク

レイアウト

フォーム

フレーム

リファレンス一覧

高さと幅を指定	セル幅の違うテーブル	線の太さの変更
テーブルの線を消す	テーブルの線の種類	横位置を変更
縦位置を変更（上寄せ、下寄せ）	セルの統合（横に統合）	セルの統合（縦に統合）
テーブル全体に色をつける	テーブルの線に色をつける	セルに色をつける
テーブルに背景画像を使う	セルの外側に余白を入れる	セルの内側に余白を入れる

テーブル

このリファレンスの見方については「リファレンスの見方」をお読みください。

テーブルの　<table>　<tr>　<td>　の関係は上の図のようになっています。

上の図をテーブルにすると、このようなテーブルになります。

【HTMLタグ】

▲このページのトップに戻るTop

テーブルの高さと幅を指定する

テーブルの幅を指定するには「width="数字"」、テーブルの高さを指定するには「height="数字"」を使います。
HTMLだけで書く場合は数字に単位はつけません。
スタイルシートに書く場合は単位に「px」をつけます。
width、heightとも、　<table>タグ、<td>タグに使うことができます。

幅200×高さ100のテーブル

【HTMLタグ】

【スタイルシートインライン】

【スタイルシートヘッダ、外部ファイル】

table {
width:200px;
height:100px;
}

すべてのテーブルの高さと幅をそろえたい時は、スタイルシートのクラス名は「table」のみで「.」(ドット)は必要ありません。
また、テーブルを色々なサイズに変更したい場合は、クラス名に「table」は使わないで、それぞれに適当なクラス名をつけてください。

▲このページのトップに戻るTop

セル幅の違うテーブルを作る

width="100"	width="200"
width="100"	width="200"

セルの幅の違うテーブルを作るにはそれぞれの <td>　に幅を指定します。
一番上の　<td>　に数字を指定するとそれ以下のセル幅も指定した数値にそろいます。

【HTMLタグ】

<table width="300" height="100" border="1">
<tr>
<td width="100">width="100"</td>
<td width="200">width="200"</td>
</tr>
<tr>
<td>width="100"</td>
<td>width="200"</td>
</tr>
</table>

【スタイルシートインライン】

【スタイルシートヘッダ、外部ファイル】

table {
width:300px;
height:100px;
}
.cell1 {
width:100px;
}
.cell2 {
width:200px;
}

▲このページのトップに戻るTop

テーブルの線の太さを変える

【HTMLタグ】

テーブルのボーダーの太さは　「border="数字">」で変更します。
数字が小さいとテーブルの線は細くなり、数字を大きくすると線が太くなります。
数字に単位はいりません。
数字の範囲はだいたい1～5ぐらいの間の整数を使います。

▲このページのトップに戻るTop

テーブルの線を消す

テーブルの線を消すにはテーブルタグのborderを「0」にします。

【HTMLタグ】

▲このページのトップに戻るTop

テーブルの線の種類

スタイルシートを使えば線の種類を変えることができます。

double

【スタイルシートインライン】

<table width="200" border style="border-style:double;border-width:thick;">
<tr><td>double</td>
</tr></table>

【スタイルシートヘッダ、外部ファイル】

.double {
border-style:double;
border-width:thick;
}

<table width="200" class="double">
<tr><td>double</td></tr></table>

groove

【スタイルシートインライン】

<table width="200" border style="border-style:groove;border-width:thick;">
<tr><td>groove</td>
</tr></table>

【スタイルシートヘッダ、外部ファイル】

.groove {
border-style:groove;
border-width:thick;
}

<table width="200" class="groove">
<tr><td>groove</td></tr></table>

ridge

【スタイルシートインライン】

<table width="200" border style="border-style:ridge;border-width:thick;">
<tr><td>ridge</td>
</tr></table>

【スタイルシートヘッダ、外部ファイル】

.ridge {
border-style:ridge;
border-width:thick;
}

<table width="200" class="ridge">
<tr><td>ridge</td></tr></table>

inset

【スタイルシートインライン】

<table width="200" border style="border-style:inset;border-width:thick;">
<tr><td>inset</td>
</tr></table>

【スタイルシートヘッダ、外部ファイル】

.inset {
border-style:inset;
border-width:thick;
}

<table width="200" class="inset">
<tr><td>inset</td></tr></table>

outset

【スタイルシートインライン】

<table width="200" border style="border-style:outset;border-width:thick;">
<tr><td>outset</td>
</tr></table>

【スタイルシートヘッダ、外部ファイル】

.outset {
border-style:outset;
border-width:thick;
}

<table width="200" class="outset">
<tr><td>outset</td></tr></table>

▲このページのトップに戻るTop

セル内の横位置を変更する

りんごが

真っ赤に

熟しました。

【HTMLタグ】

<table width="450" height="20" border="1">
<tr>
<td width="150" align="left">りんごが</td>
<td width="150" align="center">真っ赤に</td>
<td width="150" align="right">熟しました。</td>
</tr>
</table>

【スタイルシートインライン】

<table width="450" height="20" border="1">
<tr>
<td width="150" span style="text-align:left;">りんごが</td>
<td width="150" span style="text-align:center;">真っ赤に</td>
<td width="150" span style="text-align:right;">熟しました。</td>
</tr>
</table>

【スタイルシートヘッダ、外部ファイル】

.left {
text-align:left;
}
.center {
text-align:center;
}
.right {
text-align:right;
}

<table width="450" height="20" border="1">
<tr>
<td width="150" span class="left">りんごが</td>
<td width="150" span class="center">真っ赤に</td>
<td width="150" span class="right">熟しました。</td>
</tr>
</table>

▲このページのトップに戻るTop

セル内の縦位置を変更する（上寄せ、下寄せ、中央）

りんごが

真っ赤に

熟しました。

【HTMLタグ】

<table width="450" height="70" border="1">
<tr>
<td width="150" valign="top">りんごが</td>
<td width="150" valign="center">真っ赤に</td>
<td width="150" valign="bottom">熟しました。</td>
</tr>
</table>

【スタイルシートインライン】

<table width="450" height="70" border="1">
<tr>
<td width="150" span style="vertical-align:top";>りんごが</td>
<td width="150" span style="vertical-align:middle";>真っ赤に</td>
<td width="150" span style="vertical-align::bottom";>熟しました。</td>
</tr>
</table>

【スタイルシートヘッダ、外部ファイル】

.top {
vertical-align:top;
}
.middle {
vertical-align:middle;
}
.bottom {
vertical-align::bottom;
}

<table width="450" height="50" border="1">
<tr>
<td width="150" span class="top">りんごが</td>
<td width="150" span class="middle">真っ赤に</td>
<td width="150" span class="bottom">熟しました。</td>
</tr>
</table>

▲このページのトップに戻るTop

セルの統合（横に統合）

テーブルのセルを横に統合するには　「colspan="数字"」　を使います。
数字は統合したいセルの数によって変化します。
統合された部分の　<td>　</td>　を削除するのを忘れないようにしてください。

colspan="2"

colspan="3"

【HTMLタグ】

<table width="300" border="1">
<tr>
<td colspan="2">colspan="2"</td>
<td>　</td>
</tr>
<tr>
<td>　</td>
<td>　</td>
<td>　</td>
</tr>
</table>

<table width="300" border="1">
<tr>
<td colspan="3">colspan="3"</td>
</tr>
<tr>
<td>　</td>
<td>　</td>
<td>　</td>
</tr>
</table>

▲このページのトップに戻るTop

セルの統合（縦に統合）

テーブルのセルを横に統合するには　「rowspan="数字"」　を使います。
数字は統合したいセルの数によって変化します。
統合された部分の　<td>　</td>　を削除するのを忘れないようにしてください。

rowspan="2"
rowspan="2"

rowspan="3"

【HTMLタグ】

<table width="300" border="1">
<tr>
<td rowspan="2">rowspan="2"</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>

<table width="300" border="1">
<tr>
<td rowspan="3">rowspan="3"</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>

▲このページのトップに戻るTop

テーブル全体に色をつける

【HTMLタグ】

【スタイルシートインライン】

【スタイルシートヘッダ、外部ファイル】

table {
background-color: #FF99FF;
}

▲このページのトップに戻るTop

テーブルの線に色をつける

これは「IE（インターネットエクスプローラ」のみ有効です。
IE以外のブラウザの場合、下のようなテーブルになってしまいます。

【HTMLタグ】
<table width="300" border="1" bordercolor="#FF66CC">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

スタイルシートを書く場合は、線の太さ、線の種類、線の色を指定します。

【スタイルシートインライン】
<table width="300" style="border: 1px #FF99FF solid;">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

【スタイルシートヘッダ、外部ファイル】
table {
border: 1px #FF99FF solid
}

▲このページのトップに戻るTop

セルに色をつける

【HTMLタグ】
<table width="300" border="1">
<tr>
<td bgcolor="#FF99FF"> </td>
<td bgcolor="#FFFFCC"> </td>
<td bgcolor="#99FFCC"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

【スタイルシートインライン】
<table width="300" border="1">
<tr>
<td style="background-color: #FF99FF"> </td>
<td style="background-color: #FFFFCC"> </td>
<td style="background-color: #99FFCC"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

【スタイルシートヘッダ、外部ファイル】

.pink {
background-color:#FF99FF;
}
.yellow {
background-color:#FFFFCC;
}
.green {
background-color:#99FFCC;
}

▲このページのトップに戻るTop

テーブルに背景画像を使う

【HTMLタグ】

【スタイルシートインライン】

【スタイルシートヘッダ、外部ファイル】

table {
background-image: url(ファイル名.拡張子)
}

▲このページのトップに戻るTop

余白を入れる

余白の関係は下の図のようになっています。
余白の説明

テーブルの外側に余白を入れる

外側なので見えませんが、余白が入っています。

【スタイルシートインライン】

【スタイルシートヘッダ、外部ファイル】

table {
margin: 20px;
}

▲このページのトップに戻るTop

セルの内側に余白を入れる

テーブルの幅200、余白10

	余白あり

テーブルの幅200、余白0

	余白なし

【HTMLタグ】

cellpadding="10"　の数字を大きくすると余白が大きくなり、「0」にすると余白がなくなります。

【スタイルシートインライン】

【スタイルシートヘッダ、外部ファイル】

td {
padding: 10px;
}

▲このページのトップに戻るTop


		<script Language="javascript" Src="http://ad.jp.ap.valuecommerce.com/servlet/jsbanner?sid=2198620&pid=872929400"></script><noscript><a Href="http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2198620&pid=872929400" target="_blank" ><img Src="http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2198620&pid=872929400" height="60" width="468" Border="0"></a></noscript>