超初心者でも簡単!あなたもできるHP作成!− Make easily  
|| トップページ || HTML || Style Sheet || リファレンス || Web素材 || Contact Us || サイトマップ || 初めての方 || 

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

テーブル

このリファレンスの見方については「リファレンスの見方」をお読みください。
テーブルイメージ
テーブルの <table> <tr> <td> の関係は上の図のようになっています。

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

     
     
【HTMLタグ】

<table width="400" border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

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

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

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

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

<table border="1" style="width:200px; height:100px;">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>

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

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


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

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

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 border="1" style="width:300px; height:100px;">
<tr>
<td style="width:100px;"> </td>
<td style="width:200px;"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>

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

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


<table border="1">
<tr>
<td class="cell1"> </td>
<td class="cell2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>

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

   
   
【HTMLタグ】

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

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

テーブルの線を消す

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

<table width="300" border="0">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> /td>
<td> /td>
</tr>
<tr>
<td> /td>
<td> /td>
</tr>
</table>

テーブルの線の種類

スタイルシートを使えば線の種類を変えることができます。
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>

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

りんごが 真っ赤に 熟しました。
【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>

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

りんごが 真っ赤に 熟しました。
【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>

セルの統合(横に統合)

テーブルのセルを横に統合するには 「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>

セルの統合(縦に統合)

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

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

     
     
【HTMLタグ】

<table width="300" border="1" bgcolor="#FF99FF">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

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

<table width="300" border="1" style="background-color:#FF99FF;">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

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

table {
background-color: #FF99FF;
}


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

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

     
     

これは「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
}

<table width="300">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

セルに色をつける

     
     
【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;
}


<table width="300" border="1">
<tr>
<td class="pink"> </td>
<td class="yellow"> </td>
<td class="green"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

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

     
     
【HTMLタグ】

<table width="300" border="1" background="ファイル名.拡張子">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

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

<table width="300" border="1" style="background-image: url(ファイル名.拡張子);">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

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

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


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

余白を入れる

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

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

外側なので見えませんが、余白が入っています。
     
     
【スタイルシート インライン】

<table width="200" border="1" style="margin: 20px;">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

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

table {
margin: 20px;
}


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

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

テーブルの幅200、余白10
  余白
あり
 
     
テーブルの幅200、余白0
  余白なし  
     
【HTMLタグ】

<table width="200" border="1" cellpadding="10">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

cellpadding="10" の数字を大きくすると余白が大きくなり、「0」にすると余白がなくなります。
【スタイルシート インライン】

<table width="200" border="1">
<tr>
<td style="padding: 10px;"> </td>
<td style="padding: 10px;"> </td>
<td style="padding: 10px;"> </td>
</tr>
<tr>
<td style="padding: 10px;"> </td>
<td style="padding: 10px;"> </td>
<td style="padding: 10px;"> </td>
</tr>
</table>

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

td {
padding: 10px;
}


<table width="200" border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
▲このページのトップに戻るTop